AJAX 요청 대기열 구현

亚连원래의: 2018-05-23 11:11:562507검색

이 기사에서는 주로 AJAX 요청 대기열의 구현 코드를 자세히 소개하며, 이는 특정 참조 값이 있습니다. 관심 있는 친구는 이를 참조할 수 있습니다.

AJAX는 사용자가 단기적으로 여러 비동기 요청을 실행할 때 문제에 직면하게 됩니다. 이전 요청이 완료되지 않으면 대부분의 경우 영향이 없습니다. 예를 들어 새 목록을 요청하면 이전 요청도 취소될 필요가 없습니다. 그러나 우리의 WEB 프로그램이 동시에 여러 요청을 비동기적으로 호출해야 하거나 사용자가 서로 다른 유형의 데이터를 요청하여 모두 실행해야 하는 경우 문제가 발생하므로 사용자의 요청을 순서대로 기록합니다. .

서로 다른 브라우저에서는 서로 다른 스레드를 동시에 실행할 수 있습니다. 일반적으로 IE는 두 개의 스레드를 허용하므로 동시에 두 개 이상의 비동기 요청이 실행되는 경우 최근 두 개만 실행됩니다.

AJAX 큐는 요청 큐를 저장하기 위한 배열을 생성합니다. 배열의 각 항목은 사용자가 요청을 실행할 때 AJAX를 직접 실행하는 대신 먼저 매개변수를 배열로 사용합니다. 큐에 여러 개의 요청이 있는지 확인하고, 없으면 현재 큐에 있는 항목만 직접 실행합니다.(다른 항목이 있기 때문에) 이는 큐가 아직 실행 중이라는 의미이므로 걱정하지 마세요. 다른 항목이 실행된 후 차례대로 진행됩니다.) AJAX 실행이 완료된 후 현재 실행 중인 큐 항목을 삭제한 다음 있는지 확인하세요. 그렇다면 모든 요청이 완료될 때까지 계속 실행하세요. 다음은 제가 만든 AJAX 부분입니다.

//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 &#39;text/xml&#39;
    {
      reqObj.overrideMimeType(&#39;text/xml&#39;);
    }
  }
  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(&#39;Giving up :( Cannot create an XMLHTTP instance&#39;);
    return false;

  }
  reqObj.onreadystatechange = function(){GetRequest(callBackFun)}; //set onreadystatechange Function
  reqObj.open(method, url, isAsy);    //set open Function
  reqObj.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;); //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(&#39;There was a problem with the request.&#39;+reqObj.status+"CallFunction:"+callBackFun); //else alert warnning
    }
    RequestArray.shift(); //移除队列里的顺序第一个的请求，即当前已经执行完成的请求
    ExeRequestArray();   //要求执行队列中的请求
  }
}

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

AJAX 요청 대기열 구현

관련 기사