AJAX中怎么实现请求队列

AJAX中怎么实现请求队列，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

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();   //要求执行队列中的请求
  }
}

看完上述内容，你们掌握AJAX中怎么实现请求队列的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！