DIV CSS 佈局教程網

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

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

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

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

var cache={page:"Index",id:"Courses",element:$("Courses")};
//page為加載的緩存頁面 id緩存ID,element顯示緩存的Dom對象

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

上面定義了緩存對象，下面的代碼就創建一個請求AJax的方法,我們稱之為: AsyncRequest

var 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方法實例:

  $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()

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

我們加載顯示一個緩存就可以這樣調用

loadCache({ page: "Index", id: "NearIPrice", element: $("IPrice"));

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

先將要請求的緩存放到一個集合中:

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

我們現在就要請求這所有的虎頭緩存了!吃飯了直接上代碼...呵呵

            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);
}