建立XMLHttpRequest pool

在ajax應用中,通常一個面要同時發送多個請求,如果只有一個XMLHttpRequest物件,前面的請求還未完成,後面的就會把前面的覆蓋掉,如果每次都創建一個新的XMLHttpRequest物件,也會造成浪費。解決的辦法就是創建一個XMLHttpRequset的物件集區,如果池裡有空閒的物件,則使用此物件,否則將創建一個新的物件。<br></br>下麵是我最近寫的一個簡單的類:<br></br><br></br>/**<br></br> * XMLHttpRequest Object Pool<br></br> *<br></br> * @author legend <[email protected]><br></br> * @link http://www.ugia.cn/?p=8<br></br> * @Copyright www.ugia.cn<br></br> */<br></br><br></br>var XMLHttp = {<br></br> _objPool: [],<br></br><br></br> _getInstance: function ()<br></br> {<br></br> for (var i = 0; i < this._objPool.length; i ++)<br></br> {<br></br> if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == )<br></br> {<br></br> return this._objPool[i];<br></br> }<br></br> }<br></br><br></br> // IE中不支援push方法<br></br> this._objPool[this._objPool.length] = this._createObj();<br></br><br></br> return this._objPool[this._objPool.length - ];<br></br> },<br></br><br></br> _createObj: function ()<br></br> {<br></br> if (window.XMLHttpRequest)<br></br> {<br></br> var objXMLHttp = new XMLHttpRequest();<br></br><br></br> }<br></br> else<br></br> {<br></br> var MSXML = [’MSXML.XMLHTTP..0’, ’MSXML.XMLHTTP..0’, ’MSXML.XMLHTTP..0’, ’MSXML.XMLHTTP’, ’Microsoft.XMLHTTP’];<br></br> for(var n = 0; n < MSXML.length; n ++)<br></br> {<br></br> try<br></br> {<br></br> var objXMLHttp = new ActiveXObject(MSXML[n]);<br></br> break;<br></br> }<br></br> catch(e)<br></br> {<br></br> }<br></br> }<br></br> } <br></br><br></br> // mozilla某些版本沒有readyState屬性<br></br> if (objXMLHttp.readyState == null)<br></br> {<br></br> objXMLHttp.readyState = 0;<br></br><br></br> objXMLHttp.addEventListener("load", function ()<br></br> {<br></br> objXMLHttp.readyState = ;<br></br><br></br> if (typeof objXMLHttp.onreadystatechange == "function")<br></br> {<br></br> objXMLHttp.onreadystatechange();<br></br> }<br></br> }, false);<br></br> }<br></br><br></br> return objXMLHttp;<br></br> },<br></br><br></br> // 發送請求(方法[post,get], 位址, 資料, 回呼函數)<br></br> sendReq: function (method, url, data, callback)<br></br> {<br></br> var objXMLHttp = this._getInstance();<br></br><br></br> with(objXMLHttp)<br></br> {<br></br> try<br></br> {<br></br> // 加亂數防止緩存<br></br> if (url.indexOf("?") > 0)<br></br> {<br></br> url += "&randnum=" + Math.random();<br></br> }<br></br> else<br></br> {<br></br> url += "?randnum=" + Math.random();<br></br> }<br></br><br></br> open(method, url, true);<br></br><br></br> // 設定請求編碼方式<br></br> setRequestHeader(’Content-Type’, ’application/x-www-form-urlencoded; charset=UTF-8’);<br></br> send(data);<br></br> onreadystatechange = function ()<br></br> {<br></br> if (objXMLHttp.readyState == && (objXMLHttp.status == 00 || objXMLHttp.status == 0))<br></br> {<br></br> callback(objXMLHttp);<br></br> }<br></br> }<br></br> }<br></br> catch(e)<br></br> {<br></br> alert(e);<br></br> }<br></br> }<br></br> }<br></br>}; <br></br><br></br>示例:<br></br><script type="text/javascript" src="xmlhttp.js"></script><br></br><script type="text/javascript"><br></br>function test(obj)<br></br>{<br></br> alert(obj.statusText);<br></br>}<br></br><br></br>XMLHttp.sendReq(’GET’, ’http://www.ugia.cn/wp-data/test.htm’, ’’, test);<br></br>XMLHttp.sendReq(’GET’, ’http://www.ugia.cn/wp-data/test.htm’, ’’, test);<br></br>XMLHttp.sendReq(’GET’, ’http://www.ugia.cn/wp-data/test.htm’, ’’, test);<br></br>XMLHttp.sendReq(’GET’, ’http://www.ugia.cn/wp-data/test.htm’, ’’, test);<br></br><br></br>alert(’Pool length:’ + XMLHttp._objPool.length);<br></br></script> <br></br><br></br>

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn