Explication détaillée de l'utilisation de la file d'attente de requêtes AJAX

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de la file d'attente de requêtes AJAX. Quelles sont les précautions lors de l'utilisation de la file d'attente de requêtes AJAX. Voici un cas pratique, jetons un coup d'œil.

AJAX rencontrera un problème lors de son utilisation. Lorsque l'utilisateur exécute plusieurs requêtes asynchrones dans un court laps de temps, si la requête précédente n'est pas terminée, la dernière requête sera annulée. n'aura aucun impact. Par exemple, si une nouvelle liste est demandée, l'ancienne requête n'est pas nécessaire. Cependant, lorsque notre programme WEB doit appeler plusieurs requêtes de manière asynchrone en même temps, ou que l'utilisateur demande des types différents, un problème survient lorsque toutes les requêtes sont exécutées. les données doivent être exécutées. Par conséquent, la demande de l'utilisateur est enregistrée et exécutée dans l'ordre.

Différents navigateurs permettent d'exécuter différents threads en même temps. Habituellement, IE autorise deux threads. Par conséquent, lorsque plus de deux requêtes asynchrones sont exécutées en même temps, seules les deux dernières seront exécutées.

La file d'attente AJAX est très simple. Créez un tableau pour stocker la file d'attente des requêtes. Chaque élément du tableau est un paramètre de requête lorsque l'utilisateur exécute la requête, au lieu d'exécuter directement AJAX. , les paramètres sont d'abord sous forme de tableau, puis stockez-le dans la file d'attente en tant qu'élément, vérifiez s'il y a plusieurs requêtes dans la file d'attente. Sinon, exécutez directement le seul élément de la file d'attente actuelle. S'il y en a, ne l'exécutez pas. (parce qu'il y a d'autres éléments, cela signifie que la file d'attente est toujours en cours d'exécution. , ne vous inquiétez pas, ce sera le tour de cet élément une fois les autres éléments exécutés). Une fois l'exécution AJAX terminée, supprimez l'élément de file d'attente actuellement exécuté et). puis vérifiez s'il y a des requêtes dans le tableau. Si tel est le cas, continuez l'exécution jusqu'à ce que toutes les requêtes soient terminées, comme suit. C'est une file d'attente que j'ai construite et la partie AJAX a été encapsulée auparavant.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de lecture des propriétés ajax

Résumé de la méthode de soumission de formulaire Jquery+ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!