Detailed explanation of the use of AJAX request queue

This time I will bring you a detailed explanation of the use of the AJAX request queue. What are the precautions when using the AJAX request queue? The following is a practical case, let's take a look.

AJAX will encounter a problem when using it. 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. For example, if a new list is requested, the old request is not necessary. However, when our WEB program needs to call multiple requests asynchronously at the same time, or the user requests different types The problem occurs when all the data needs to be executed. Therefore, the user's request is recorded and executed 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 request parameterarray. When the user executes the request, instead of directly executing AJAX, the parameters are first As an array and then store it in the queue as an item, 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. , don’t worry, it will be this item’s turn after other items are executed). After the AJAX execution is completed, delete the currently executed queue item, and then check whether there are any requests in the array. If so, continue execution until all requests are completed, as follows It is a queue I built, and 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();   //要求执行队列中的请求
  }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of JSONP implementation principles and cases

jQuery json makes Ajax calling function (with code)

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