AJAX 요청 대기열 사용에 대한 자세한 설명

이번에는 AJAX 요청 큐 사용에 대해 자세히 설명하겠습니다. AJAX 요청 큐 사용 시 주의 사항은 무엇인가요?

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

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

AJAX 대기열은 요청 대기열을 저장하기 위한 배열을 생성하는 데 매우 간단합니다. 배열의 각 항목은 사용자가 요청을 실행하면 AJAX를 직접 실행하는 대신 먼저 매개변수를 저장합니다. Queue에 여러 개의 요청이 있는지 확인하고, 없으면 현재 Queue에 있는 항목만 직접 실행합니다.(다른 항목이 있으므로 Queue에 있다는 뜻입니다.) 다른 항목은 이미 실행 중이므로 걱정하지 마세요. 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 '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();   //要求执行队列中的请求
  }
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JSONP 구현 원칙 및 사례에 대한 자세한 설명

jQuery+json을 사용하여 Ajax 호출 기능(코드 포함)

위 내용은 AJAX 요청 대기열 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!