XMLHttpRequest object processing method for sending multiple requests simultaneously in AJAX

Time:2022-5-26

In Ajax applications, a page usually sends multiple requests at the same time. If there is only one XMLHttpRequest object and the previous request has not been completed, the latter will overwrite the previous one. If a new XMLHttpRequest object is created every time, it will also cause waste. The solution is to create an xmlhttprequset object pool. If there are free objects in the pool, use this object, otherwise a new object will be created.

Here is a simple class I recently wrote:
* XMLHttpRequest Object Pool
 *
 * @author    legend <[email protected]>
 * @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];
            }
        }

        //Push method is not supported in IE5
        
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)
                {
                }
            }
         }          

        //Some versions of Mozilla do not have the readyState attribute
        
if (objXMLHttp.readyState == null)
        {
            
objXMLHttp.readyState 0;

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

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

        return objXMLHttp;
    },

    //Send request (method [post, get], address, data, callback function)
    
sendReq: function (methodurldatacallback)
    {
        var 
objXMLHttp this._getInstance();

        with(objXMLHttp)
        {
            
try
            
{
                
//Add random number to prevent caching
                
if (url.indexOf(“?”) > 0)
                {
                    
url += “&randnum=” Math.random();
                }
                else
                {
                    
url += “?randnum=” Math.random();
                }

                open(methodurltrue);

                //Set request encoding method
                
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);
            }
        }
    }
}; 

Example:

<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 Download xmlhttp js