视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
AJAX的队列请求如何实现(附代码)
2020-11-27 19:56:48 责编:小采
文档


这次给大家带来AJAX的队列请求如何实现(附代码),AJAX队列请求实现的注意事项有哪些,下面就是实战案例,一起来看一下。

AJAX在使用的过程中会遇到一个问题,当用户短时间内执行了多个异步请求的时候,如果前一个请求没完成,将会被取消执行最新的一个请求,大多数情况下,不会有什么影响,例如请求了一个新的列表,旧的请求也就没什么必要了 ,但是,当我们的WEB程序需要同时异步调用多个请求,或者需要用户请求的是不同类型的数据,都需要执行完成的时候就出现问题 了,于是,将用户的请求记录下来,并按顺序执行。

不同的浏览器,允许同时执行的线程不同,通常IE允许两个线程,于是,当同时执行的异步请求超过两个时,就会变成只执行最新的两个。

AJAX队列很简单,创建一个数组存储请求队列,数组中每一项又是一个请求参数数组,当用户执行请求时,不是直接执行AJAX,首先将参数作为一个数组作为项再存入队列,检查队列中是否存在多个请求,如果没有,直接执行当前队列中这唯一的一项,如果有则不执行(因为有其他项,说明队列还在执行中,不必着急,其他项执行完了会轮到这一项的),AJAX执行完成后就删除当前执行的队列项,然后再检查数组还有没有请求,有就继续执行到所有请求都完成为止,以下是我构建的一个队列,AJAX部分是之前封装的。

//Ajax Function
var reqObj; //Creat Null Instence
var RequestArray = new Array();
//var whichRequest;
//加入请求队列
function AddRequestArray(url,isAsy,method,parStr,callBackFun)
{
 var ArgItem = new Array();
 ArgItem[0]=url;
 ArgItem[1]=isAsy;
 ArgItem[2]=method;
 ArgItem[3]=parStr;
 ArgItem[4]=callBackFun;
 RequestArray.push(ArgItem); //将当前请求添加到队列末尾
 if(RequestArray.length==1) //如果请求队列里只有当前请求立即要求执行队列,如果有其他请求,那么就不要求执行队列
 {
 ExeRequestArray();
 }
}
//执行队列里的顺序第一个的请求
function ExeRequestArray()
{
 if( RequestArray.length>0) //如果队列里有请求执行 AJAX请求
 {
 var ArgItem = RequestArray[0]; DoRequest(ArgItem[0],ArgItem[1],ArgItem[2],ArgItem[3],ArgItem[4]);
 }
}
//Run Ajax (string urladdress,bool IsAsy,string method,string parameters,string whichRequest)
function DoRequest(url,isAsy,method,parStr,callBackFun) 
{
 reqObj = false;
 //whichRequest = whichReq;
 if (window.XMLHttpRequest) //compatible Mozilla, Safari,...
 {
 reqObj = new XMLHttpRequest(); //Creat XMLHttpRequest Instance
 if (reqObj.overrideMimeType) //if Mime Type is false ,then set MimeType 'text/xml'
 {
 reqObj.overrideMimeType('text/xml');
 }
 }
 else if (window.ActiveXObject) //compatible IE
 {
 try
 {
 reqObj = new ActiveXObject("Msxml2.XMLHTTP"); //Creat XMLHttpRequest Instance
 }
 catch (e)
 {
 try
 {
 reqObj = new ActiveXObject("Microsoft.XMLHTTP"); //Creat XMLHttpRequest Instance
 }
 catch (e)
 {}
 }
 }
 //if reqObj is false,then alert warnning
 if (!reqObj)
 {
 alert('Giving up :( Cannot create an XMLHTTP instance');
 return false;
 }
 reqObj.onreadystatechange = function(){GetRequest(callBackFun)}; //set onreadystatechange Function
 reqObj.open(method, url, isAsy); //set open Function
 reqObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //set RequestHeader
 reqObj.send(parStr); //do send and send parameters 
}
//get Service Response information Function
function GetRequest(callBackFun)
{
 //judge readystate information
 if (reqObj.readyState == 4)
 {
 //judge status information
 if (reqObj.status == 200)
 {
 eval(callBackFun+"(reqObj)");
 }
 else
 {
 alert('There was a problem with the request.'+reqObj.status+"CallFunction:"+callBackFun); //else alert warnning
 }
 RequestArray.shift(); //移除队列里的顺序第一个的请求,即当前已经执行完成的请求
 ExeRequestArray(); //要求执行队列中的请求
 }
}

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

AJAX请求数组应该如何实现

在Ajax中怎样清除缓存

下载本文
显示全文
专题