AJAX中同时发送多个请求XMLHttpRequest对象处理方法

所属分类: 网络编程 / AJAX相关 阅读数: 1503
收藏 0 赞 0 分享

在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象。

下面是我最近写的一个简单的类:
* XMLHttpRequest Object Pool
 *
 * @author    legend <legendsky@hotmail.com>
 * @link      http://www.ugia.cn/?p=85
 * @Copyright www.ugia.cn
 */ 

var XMLHttp = {
    
_objPool: [],

    
_getInstance: function ()
    {
        for (var 
0this._objPool.length++)
        {
            if (
this._objPool[i].readyState == || this._objPool[i].readyState == 4)
            {
                return 
this._objPool[i];
            }
        }

        
// IE5中不支持push方法
        
this._objPool[this._objPool.length] = this._createObj();

        return 
this._objPool[this._objPool.length 1];
    },

    
_createObj: function ()
    {
        if (
window.XMLHttpRequest)
        {
            var 
objXMLHttp = new XMLHttpRequest();

        }
        else
        {
            var 
MSXML = ['MSXML2.XMLHTTP.5.0''MSXML2.XMLHTTP.4.0''MSXML2.XMLHTTP.3.0''MSXML2.XMLHTTP''Microsoft.XMLHTTP'];
            for(var 
0MSXML.length++)
            {
                
try
                
{
                    var 
objXMLHttp = new ActiveXObject(MSXML[n]);
                    break;
                }
                
catch(e)
                {
                }
            }
         }          

        
// mozilla某些版本没有readyState属性
        
if (objXMLHttp.readyState == null)
        {
            
objXMLHttp.readyState 0;

            
objXMLHttp.addEventListener("load", function ()
                {
                    
objXMLHttp.readyState 4;

                    if (
typeof objXMLHttp.onreadystatechange == "function")
                    {
                        
objXMLHttp.onreadystatechange();
                    }
                },  
false);
        }

        return 
objXMLHttp;
    },

    
// 发送请求(方法[post,get], 地址, 数据, 回调函数)
    
sendReq: function (methodurldatacallback)
    {
        var 
objXMLHttp this._getInstance();

        
with(objXMLHttp)
        {
            
try
            
{
                
// 加随机数防止缓存
                
if (url.indexOf("?") > 0)
                {
                    
url += "&randnum=" Math.random();
                }
                else
                {
                    
url += "?randnum=" Math.random();
                }

                
open(methodurltrue);

                
// 设定请求编码方式
                
setRequestHeader('Content-Type''application/x-www-form-urlencoded; charset=UTF-8');
                
send(data);
                
onreadystatechange = function ()
                {
                    if (
objXMLHttp.readyState == && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
                    {
                        
callback(objXMLHttp);
                    }
                }
            }
            
catch(e)
            {
                
alert(e);
            }
        }
    }
}; 

示例:

<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript">
function test(obj)
{
    alert(obj.statusText);
}

XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);

alert('Pool length:' + XMLHttp._objPool.length);
</script> 

demo 下载xmlhttp.js

更多精彩内容其他人还在看

ajax中文乱码问题解决方案

ajax中文乱码问题在中文中经常会出现这种问题,其实只要稍加注意就不会出现ajax中文乱码这回事情了,接下来为大家详细介绍下如何解决这类问题
收藏 0 赞 0 分享

jquery ajax实现批量删除具体思路及代码

回调函数,在请求完成后需要进行的操作:此处是把选中的checkbox去掉,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈,希望对你有所帮助
收藏 0 赞 0 分享

JQuery+ajax实现批量上传图片(自写)

jquery+ajax方式实现单张图片上传的代码是可以搜的到,实现批量上传图片的程序却没搜索到于是自己写了个,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

利用Ajax实现在脚本里传值实例介绍

Ajax实现在脚本里传值可以解决实际上的一些问题,本文实现了一下,感兴趣的朋友可以参考下,希望可以帮助到你
收藏 0 赞 0 分享

jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

CSS也使得表格的布局越来越光彩耀人。但是,无论如何,都掩饰不了那些包装下的死板,接下来为大家介绍下让那些死板的数据 更具有可读性、可用性
收藏 0 赞 0 分享

jQery ajax——load()方法示例介绍

load(url,[data],[callback])url:加载的页面地址;data: 可选项,发送到服务器的数据,格式是key/value;callback:可选项,回调函数,示例代码如下
收藏 0 赞 0 分享

滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用特在此与大家一起分享,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

ajax 登录功能简单实现(未连接数据库)

未连接数据库下实现ajax 登录功能判断登陆成功与失败,喜欢ajax的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享

AJAX和WebService实现邮箱验证(无刷新验证邮件地址是否合法)

首先在项目里面添加服务引用,验证 Email 地址是否正确(邮件地址合法、只是域名正确、邮件服务器没有找到等等)感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

AJAX和三层架构实现分页功能具体思路及代码

本文涉及到AJAX和三层架构方面的知识,在学习分页的同时也巩固了一下它们的相关知识,适合初学者的你
收藏 0 赞 0 分享
查看更多