实现发送多个Ajax请求 - New.min - 博客园

佛山软件定制

实现发送多个Ajax请求

大家知道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")}];

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

欢迎拍砖:Sonven 顺便灌一个网址上去方便Seo:http://www.rsion.com

posted on 2009-11-03 12:16 New.min 阅读(3243) 评论(7) 编辑收藏举报

刷新页面返回顶部

导航

公告