實現傳送多個Ajax請求

iDotNetSpace發表於2009-11-04

大家知道IE只能一次傳送一個Ajax請求，你是否嘗試過在一個頁面上用Ajax請求多次,雖然可以實現我們發現程式碼很亂

我們來實現一個在頁面呈現快取的例子吧!

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gt//獲取Dom
function $(id) { return document.getElementById(id); }

思路:我們把要載入的快取放在一個集合中，再迭代集合實現所有的獲取快取請求

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gtvar cache={page:"Index",id:"Courses",element:$("Courses")};
//page為載入的快取頁面 id快取ID,element顯示快取的Dom物件

順便插一句:這個例子用Jquery實現的了嗎？可以嘗試一下，呵呵,這幾天好像跟Jquery有仇一樣

上面定義了快取物件，下面的程式碼就建立一個請求Ajax的方法,我們稱之為: AsyncRequest

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gtvar xmlHttp = null;
function $AsyncRequest(request, callback) {
    this.method = request.method!=null&&request.method.toLowerCase()=="post"?"POST":"GET";
    this.url = request.url;
    this.params = request.params;
    this.dataType =request.dataType!=null&&request.dataType.toLowerCase() == "xml" ? "xml" : "text";
    this.async = request.async instanceof Boolean ? request.async : true;
    if (callback != null) {
        this.success = callback.success;
        this.error = callback.error;
        if (callback.start != null) callback.start();
    }
    if (xmlHttp == null) {
        if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();
        else if(window.ActiveXObject)xmlHttp=new ActiveXObject("MSXML2.XMLHTTP")||new ActiveXObject("MICROSOFT.XMLHTTP");
        else{return false;}
    }

    var current = this;
   xmlHttp.open(this.method, this.url, this.async);
   xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                if (current.success != null)
                    current.success(current.dataType == "xml" ? xmlHttp.responseXml : xmlHttp.responseText);
            }
            else {
                if (current.error != null)
                    current.error(xmlHttp.responseText);
            }
        }
    }
    if (this.method== "POST")
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.send(this.params);
}

呼叫AsyncRequest方法例項:

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gt  $AsyncRequest({ url:"http://127.0.0.1",method:"GET",async:true,dataType:"text" },

 { start: function () {//開始請求執行 },
   error:function(){//請求錯誤時執行},
   success: function (x) {//成功獲取結果為x} 
 });
//簡單的就可以像下面這樣呼叫
  $AsyncRequest({ url: "/default.htm"}, { 
            success: function (x) {alert(x);} 
        });

好了，下面我們來請求獲取快取內容並顯示出來了!新建一個方法叫loadCache()

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gtfunction loadCache(cache,callback) {
    this.requestUrl = "/handler/cacheASHtml.ashx?cache.page=" + cache.page +
        "&cache.guid=" + cache.id + (cache.params != null ? "&" + cache.params : "")+"&"+Math.random();
        var nodeName=cache.element.nodeName;
        if (nodeName != null && (nodeName == "DIV" || nodeName == "SPAN")) {
            var element = cache.element;
        } else { alert('不支援的元素(div,span)' + nodeName); return false; }
        $AsyncRequest({ url: this.requestUrl }, { start: function () { element.innerHTML = "載入中!"; },
            success: function (x) {element.innerHTML = x;if (callback != undefined) callback(); } 
        });
}

我們載入顯示一個快取就可以這樣呼叫

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gtloadCache({ page: "Index", id: "NearIPrice", element: $("IPrice"));

我們發現請求一個請求並不難，但是要請求多個時候就遇到問題了..

先將要請求的快取放到一個集合中:

實現傳送多個Ajax請求Code

我們現在就要請求這所有的虎頭快取了!吃飯了直接上程式碼...呵呵

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gt
            window.caches = [{ page: _p, id: "VipSchoolArchive", element: $("VipArchives") },
                { page: _a, id: "DefaultPageVipArchivesRightPart", element: $("VipArchiveAd") },
                { page: _a, id: "DefaultPageVipArchivesBottomPart", element: $("VipArchiveAdBottom")}];

            loadCacheCollection(window.caches);

function loadCacheCollection(cacheArray) {
    cacheArray.reverse();
    var s = setInterval(function () {
        for (var i in cacheArray) {
            loadCache(cacheArray[i],
            function () {
                cacheArray.pop(cacheArray[i]);
                if (cacheArray.length == 0) clearInterval(s);
            });
        }
    }, 10);
}

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-618125/，如需轉載，請註明出處，否則將追究法律責任。

相關文章