在ajax應用中,通常一個頁面要同時發送多個請求,如果只有一個XMLHttpRequest對象,前面的請求還未完成,後面的就會把前面的覆蓋掉,如果每次都創建一個新的XMLHttpRequest對象,也會造成浪費。解決的辦法就是創建一個XMLHttpRequset的對象池,如果池裡有空閒的對象,則使用此對象,否則將創建一個新的對象。
ajax.js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
| var XMLHttp = { _objPool: [],
_getInstance: function (){ for (var i = 0; i < this._objPool.length; i ++){ if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4){ return this._objPool[i]; } } 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 n=0; n<MSXML.length; n++){ try{ var objXMLHttp = new ActiveXObject(MSXML[n]); break; }catch(e){} } } if (objXMLHttp.readyState == null){ objXMLHttp.readyState = 0; objXMLHttp.addEventListener("load", function (){ objXMLHttp.readyState = 4; if(typeof objXMLHttp.onreadystatechange == "function"){objXMLHttp.onreadystatechange();} }, false); } return objXMLHttp; },
sendReq: function (method, url, data, callback){ var objXMLHttp = this._getInstance(); with(objXMLHttp){ try{ if (url.indexOf("?") > 0){url += "&randnum=" + Math.random();} else{url += "?randnum=" + Math.random();} open(method, url, true); setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); send(data); onreadystatechange = function (){ if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304)){ callback(objXMLHttp); } } }catch(e){alert(e);} } } };
|
index.html :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> new document </title> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Cache-Control" content="no-cache" /> <link rel="stylesheet" type="text/css" media="screen" href="" /> <script src="ajax.js" language="javascript" type="text/javascript"></script> <script language="javascript" type="text/javascript"> function $(id) { return document.getElementById(id); } function showInfo(obj) { $('pageDiv').innerHTML = obj.responseText; } function getAjax(url) { XMLHttp.sendReq('GET', url, null, showInfo); } </script> </head> <body> <a href="#" onclick="getAjax('info.html')">個人資料</a> <hr size="0" /> <div id="pageDiv"></div> </body> </html>
|
info.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> new document </title> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Cache-Control" content="no-cache" /> <link rel="stylesheet" type="text/css" media="screen" href="" /> <script src="" language="javascript" type="text/javascript"></script> </head> <body> <div id="t">This is my info page</div> </body> </html>
|
相關的資料 : http://www.ugia.cn/?p=85 (作者)