AJAX request queue implementation

This article mainly introduces the implementation code of AJAX request queue in detail, which has certain reference value. Interested friends can refer to it

AJAX will encounter a problem during use The problem is that when the user executes multiple asynchronous requests in a short period of time, if the previous request is not completed, the latest request will be canceled. In most cases, there will be no impact, such as requesting a new one. list, there is no need for old requests. However, problems arise when our WEB program needs to call multiple requests asynchronously at the same time, or when the user requests different types of data, all of which need to be executed. So, Record the user's requests and execute them in order.

Different browsers allow different threads to be executed at the same time. Usually IE allows two threads. Therefore, when there are more than two asynchronous requests executed at the same time, only the latest two will be executed.

The AJAX queue is very simple. Create an array to store the request queue. Each item in the array is an array of request parameters. When the user executes the request, instead of directly executing AJAX, the parameters are first used as an array as items and then Store it in the queue and check whether there are multiple requests in the queue. If not, directly execute the only item in the current queue. If there is, do not execute it (because there are other items, it means that the queue is still executing, so don’t worry, other items After the execution is completed, it will be the turn of this item). After the AJAX execution is completed, the currently executed queue item will be deleted, and then the array will be checked to see if there are any requests. If so, execution will continue until all requests are completed. The following is a queue I built. , the AJAX part was encapsulated before.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Summary of several methods of using ajax to submit forms asynchronously

Solution to AJAX requests containing arrays Method

Ajax request and Filter cooperation case analysis

The above is the detailed content of AJAX request queue implementation. For more information, please follow other related articles on the PHP Chinese website!