Implémentation de la file d'attente de requêtes AJAX

Cet article présente principalement en détail le code d'implémentation de la file d'attente de requêtes AJAX, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

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. Dans la plupart des cas, il n'y aura aucun impact, comme en demander une nouvelle. pas besoin d'anciennes requêtes. Cependant, des problèmes surviennent lorsque notre programme WEB doit appeler plusieurs requêtes de manière asynchrone en même temps, ou lorsque l'utilisateur demande différents types de données, qui doivent toutes être exécutées. exécutez-les 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 tableau de paramètres de requête. Lorsque l'utilisateur exécute la requête, au lieu d'exécuter directement AJAX, les paramètres sont les premiers. utilisé comme tableau en tant qu'éléments, puis stockez-le dans la file d'attente et 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 (car il y en a d'autres). éléments, cela signifie que la file d'attente est toujours en cours d'exécution, alors ne vous inquiétez pas, les autres éléments une fois l'exécution terminée, ce sera le tour de cet élément). Une fois l'exécution AJAX terminée, l'élément de file d'attente actuellement exécuté sera supprimé. , puis le tableau sera vérifié pour voir s'il y a des requêtes. Si tel est le cas, l'exécution se poursuivra jusqu'à ce que toutes les requêtes soient terminées. Voici une file d'attente que j'ai construite, 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();   //要求执行队列中的请求
  }
}

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Un résumé de plusieurs méthodes d'utilisation d'ajax pour soumettre des formulaires de manière asynchrone

Résoudre les requêtes AJAX qui contiennent Méthode arrays

Requête Ajax et analyse de cas de coopération par filtre

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!