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 '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();      //          
    }
}