提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

多ajax请求的各类解决方案(同步,队列,cancel请求)

同步队列AJAX解决方案队列 请求 各类 cancel
2023-06-13 09:14:33 时间
•多个ajax请求同时发送，相互无依赖。
•多个ajax请求相互依赖，必须有先后顺序。
•多个请求被同时发送，只需要最后一个请求。
第1种case
应用场景：这个场景很多，一个页面打开是多个区域同时请求后台得到各自的数据，没依赖，没顺序。
处理方案：直接用jquery的ajax函数。这个用的非常多，这里从略，可看后面的代码中例子。
第2种case
应用场景：多个ajax请求，需要顺序执行，后一个ajax请求的执行参数是前一个ajax的结果。例如：用户登录后我们发送一次请求得到用户的应用ID，然后利用应用ID发送一次请求得到具体的应用内容（例子虽然不是太恰当，但基本就是这个意思了）。
处理方法：
1.利用ajax参数async设置为false，进行同步操作。(这个方法只适合同域操作，跨域需使用下面两种方法)
2.利用ajax嵌套（这个同第1种情况）
3.利用队列进行操作
jqueryajax队列操作核心代码:
复制代码代码如下:

(function($){
varajaxRequest={};
$.ajaxQueue=function(settings){
varoptions=$.extend({className:"DEFEARTNAME"},$.ajaxSettings,settings);
var_complete=options.complete;
$.extend(options,{
complete:function(){
if(_complete)
_complete.apply(this,arguments);
if($(document).queue(options.className).length>0){
$(document).dequeue(options.className);
}else{
ajaxRequest[options.className]=false;
}
}
});
$(document).queue(options.className,function(){
$.ajax(options);
});
if($(document).queue(options.className).length==1&&!ajaxRequest[options.className]){
ajaxRequest[options.className]=true;
$(document).dequeue(options.className);
}
};
})(jQuery);

第3中case
应用场景：比较典型的是autocomplete控件的操作，这个我们可以使用第2种情况的处理方法，但我们可能只需要最后次按键后返回的结果，这样利用第2种处理方法未免有些浪费。
处理方法：保留最后一次请求，cancel之前的请求。
复制代码代码如下:

(function($){
varjqXhr={}；
$.ajaxSingle=function(settings){
varoptions=$.extend({className:"DEFEARTNAME"},$.ajaxSettings,settings);
if(jqXhr[options.className]){
jqXhr[options.className].abort();
}
jqXhr[options.className]=$.ajax(options);
};
})(jQuery);

对于这些case都是在多个ajax请求，响应时间不能控制的情况。下面是完整Demo代码。
复制代码代码如下:
(function($){
varjqXhr={},
ajaxRequest={};
$.ajaxQueue=function(settings){
varoptions=$.extend({className:"DEFEARTNAME"},$.ajaxSettings,settings);
var_complete=options.complete;
$.extend(options,{
complete:function(){
if(_complete)
_complete.apply(this,arguments);
if($(document).queue(options.className).length>0){
$(document).dequeue(options.className);
}else{
ajaxRequest[options.className]=false;
}
}
});
$(document).queue(options.className,function(){
$.ajax(options);
});
if($(document).queue(options.className).length==1&&!ajaxRequest[options.className]){
ajaxRequest[options.className]=true;
$(document).dequeue(options.className);
}
};
$.ajaxSingle=function(settings){
varoptions=$.extend({className:"DEFEARTNAME"},$.ajaxSettings,settings);
if(jqXhr[options.className]){
jqXhr[options.className].abort();
}
jqXhr[options.className]=$.ajax(options);
};
})(jQuery);
varajaxSleep=(function(){
var_settings={
type:"GET",
cache:false,
success:function(msg){
varthtml=$("#txtContainer").html();
$("#txtContainer").html(thtml+"<br/>"+msg);
}
};
return{
get:function(seconds,mode,isAsync){
varmode=mode||"ajax",
isAsync=isAsync||false;
$[mode]($.extend(_settings,{
url:"ResponsePage.aspx?second="+seconds,
async:isAsync,
className:"GET"
}));
},
post:function(seconds,mode,isAsync){
varmode=mode||"ajax",
isAsync=isAsync||false;
$[mode]($.extend(_settings,{
type:"POST",
url:"PostPage.aspx",
data:{second:seconds},
async:isAsync,
className:"POST"
}));
}
};
}());
varlaunch=function(settings){
$("#txtContainer").html("");
varmode=settings.mode,
isAsync=settings.isAsync;
ajaxSleep.get(12,mode,isAsync);
ajaxSleep.get(10,mode,isAsync);
ajaxSleep.get(8,mode,isAsync);
ajaxSleep.post(6,mode,isAsync);
ajaxSleep.post(4,mode,isAsync);
ajaxSleep.post(2,mode,isAsync);
}
$(document).ready(function(){
//第1种case
$("#btnLaunchAsync").click(function(){
launch({isAsync:true});
});
//第2种case
$("#btnLaunchSync").click(function(){
launch({});
});
//第2种case
$("#btnLaunchQueue").click(function(){
launch({mode:"ajaxQueue",isAsync:true});
});
//第3种case
$("#btnLaunchSingle").click(function(){
launch({mode:"ajaxSingle",isAsync:true});
});
});

default.html
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title></title>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>
<scripttype="text/javascript"src="js/default.js"></script>
</head>
<body>
<formid="form1"runat="server">
<inputtype="button"id="btnLaunchAsync"value="LaunchAsynchronousRequest"/>
<inputtype="button"id="btnLaunchSync"value="LaunchSynchronousRequest"/>
<inputtype="button"id="btnLaunchQueue"value="LaunchRequestedQueue"/>
<inputtype="button"id="btnLaunchSingle"value="LaunchSingleRequest"/>
<divid="txtContainer"></div>
</form>
</body>
</html>

PostPage.aspx&ResponsePage.aspx
复制代码代码如下:
//ResponsePage.aspx
protectedvoidPage_Load(objectsender,EventArgse)
{
intseconds=int.Parse(Request.QueryString["second"]);
Thread.Sleep(seconds*1000);
Response.Write("GET:selptfor"+seconds.ToString()+"sec(s)");
}
//PostPage.aspx
protectedvoidPage_Load(objectsender,EventArgse)
{
intseconds=int.Parse(Request.Form["second"]);
Thread.Sleep(seconds*1000);
Response.Write("POST:selptfor"+seconds.ToString()+"sec(s)");
}

后注：个人能力有限，如有错误敬请指点。这些只是些根据一些特定情况下的处理，如果一个ajax请求能解决的问题切勿利用两个请求来处理，毕竟需要占用资源。我还是相信没有最好的方案，只有最适合的方案。

相关文章