最近在做的ERP项目,很多地方用到Ajax进行数据交换,一个页面通常都需要发送多条请求信息,也就是会执行多个js函数,而通过window.onload方法执行多个函数时,页面上总是只显示最后一个函数的执行结果,其他的函数虽然执行了,但是好像都被覆盖了一样,没有任何效果,想来想去,觉得最好的办法就是创建一个该对象的pool,既避免了被覆盖的现象,又可以高效的利用而不浪费
代码来源于http://www.ugia.cn/?p=85点击打开链接
/**
* 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 i = 0; i < this._objPool.length; i++) {
if (this._objPool[i].readyState == 0
|| 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 n = 0; n < MSXML.length; n++) {
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(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);
}
}
}
};
使用实例:
<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>