建一个XMLHttpRequest对象池

6 篇文章 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> 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: XMLHttpRequest对象是一种能够发送HTTP或HTTPS请求并接收服务器响应的JavaScript API。它可以用于创异步的Web应用程序,不需要刷新页面就可以更新内容。这个对象通常被用于AJAX编程中,但它也可以用于其它的网络通信。 ### 回答2: XMLHttpRequest对象是一种在JavaScript中使用的原生对象,它允许在客户端和服务器之间进行异步数据交换。通过使用XMLHttpRequest对象,我们可以向服务器发送HTTP请求,并在不刷新整个页面的情况下获取服务器的响应数据。 XMLHttpRequest对象最主要的功能是通过HTTP协议向服务器发送请求,以下是实现HTTP请求的几个基本步骤: 1. 创一个XMLHttpRequest对象:使用`new XMLHttpRequest()`来创一个XMLHttpRequest对象。 2. 设置请求的方法和地址:使用`open()`方法来设置HTTP请求的方法(如GET、POST等)和请求的地址。 3. 设置请求头部信息:可以通过`setRequestHeader()`方法来设置HTTP请求的头部信息,例如设置Content-Type等。 4. 发送请求:使用`send()`方法来发送HTTP请求,如果是POST请求,可以在send()中传递请求的参数。 5. 监听响应:通过设置`onreadystatechange`属性,并使用`onreadystatechange`事件来监听请求的状态变化。 6. 获取响应数据:可以使用`responseText`属性来获取服务器响应的文本数据,使用`responseXML`属性获取服务器响应的XML数据,以及其他相关属性。 XMLHttpRequest对象的出现使得客户端和服务器之间的数据交换更加灵活和高效。它可以用于获取服务器返回的数据,并以各种形式展示在网页中,例如动态更新页面内容、实现无刷新提交表单、实时获取服务器数据等。同时,XMLHttpRequest对象也被广泛用于实现Ajax技术,实现异步更新页面的效果。 需要注意的是,由于浏览器的安全限制,XMLHttpRequest对象只能用于请求同源策略下的资源。如果需要请求其他域名下的资源,可以使用CORS(跨域资源共享)或者代理方式来解决。此外,XMLHttpRequest对象也有一些局限性,例如无法同时发送多个请求、无法监听请求进度等。因此,在一些复杂的应用场景下,可能需要使用其他技术来完成数据交换的需求。 ### 回答3: XMLHttpRequest对象是一种在前端开发中用于与服务器进行通信的API。它是浏览器提供的用于发送和接收HTTP请求的对象之一。 XMLHttpRequest对象的使用主要分为几个步骤。首先,我们需要创一个XMLHttpRequest对象,可以通过调用`new XMLHttpRequest()`来实现。然后,可以使用`open()`方法来指定发送请求的方式(GET、POST等)、URL地址以及是否采用异步方式发送请求。接下来,使用`send()`方法将请求发送到服务器。 在请求发送完成后,XMLHttpRequest对象将会接收服务器的响应。我们可以通过`onreadystatechange`事件来监听ReadyState状态的变化,并在状态为4(请求已完成)时处理服务器的响应。此时,可以使用`status`属性来获取服务器返回的状态码,通过`responseText`或`responseXML`属性获取服务器返回的数据。 XMLHttpRequest对象是一个功能强大且广泛使用的技术,可以用于实现各种与服务器交互的功能。例如,可以使用该对象发送Ajax请求,实现页面的无刷新更新。同时,也可以使用它来实现登录验证、数据传输、文件上传等功能。此外,XMLHttpRequest对象支持跨域请求,可以实现访问不同域名下的资源。 总之,XMLHttpRequest对象是前端开发中不可或缺的一部分,它使得我们可以通过JavaScript与服务器进行通信,实现更加丰富和动态的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值