So implementieren Sie eine AJAX-Warteschlangenanforderung (mit Code)

Dieses Mal zeige ich Ihnen, wie Sie eine AJAX-Warteschlangenanfrage implementieren (mit Code) und welche Vorsichtsmaßnahmen für die Implementierung einer AJAX-Warteschlangenanfrage gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

Bei der Verwendung von AJAX tritt ein Problem auf. Wenn der Benutzer in kurzer Zeit mehrere asynchrone Anforderungen ausführt, wird die letzte Anforderung in den meisten Fällen abgebrochen Wenn beispielsweise eine neue Liste angefordert wird, ist die alte Anforderung nicht erforderlich. Wenn unser WEB-Programm jedoch mehrere Anforderungen gleichzeitig aufrufen muss oder der Benutzer verschiedene Arten anfordert, tritt ein Problem auf Daten müssen ausgeführt werden. Daher wird die Anfrage des Benutzers der Reihe nach aufgezeichnet und ausgeführt.

Verschiedene Browser erlauben die gleichzeitige Ausführung verschiedener Threads. Wenn mehr als zwei asynchrone Anforderungen gleichzeitig ausgeführt werden, werden daher nur die letzten beiden ausgeführt.

Eine AJAX-Warteschlange ist sehr einfach. Jedes Element im Array ist ein Anforderungsparameter-Array, anstatt AJAX direkt auszuführen , Die Parameter werden zuerst als Array gespeichert und dann als Element in der Warteschlange gespeichert. Wenn nicht, führen Sie das einzige Element in der aktuellen Warteschlange direkt aus (Da noch andere Elemente vorhanden sind, bedeutet dies, dass die Warteschlange noch ausgeführt wird. Keine Sorge, dieses Element ist an der Reihe, nachdem die AJAX-Ausführung abgeschlossen ist. Löschen Sie das aktuell ausgeführte Warteschlangenelement.) Überprüfen Sie dann, ob Anforderungen im Array vorhanden sind. Fahren Sie mit der Ausführung fort, bis alle Anforderungen wie folgt abgeschlossen sind. Es handelt sich um eine Warteschlange, die ich erstellt habe, und der AJAX-Teil wurde zuvor gekapselt.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So implementieren Sie ein AJAX-Anforderungsarray

So leeren Sie den Cache in Ajax

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine AJAX-Warteschlangenanforderung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!