Posted on 2008-10-23 11:47
Java蜘蛛人 --郑成桥 阅读(640)
评论(0) 编辑 收藏
>>注意：请下载后面（9楼）的v1.1正式版。如果要优先考虑IE7中的Native XHR，请自己把附件中bajax.js文件里的bajax_object函数替换一下（修改的代码在9楼的页面里——不想更新附件了）。
前一段时间写51ditu和动易的集成，现在准备改进成Ajax的。很早以前就知道了Ajax，但一直没有实际用过。
网上Google了一番，看了Sajax.php……
还是简单点好，自己写了个很小的封装，测试对浏览器的兼容性还不错，并且回调函数的接口比较友好。
另：经测试，发现如果是对同一个XMLHttpReques对象进行多次open、send等操作，IE会有Cache问题，Firefox正常。但如果是每一次都是重新new一个的话，IE就支持得很好了（Firefox自然不用说）。
用这个库（面向用户的其实就一个函数），不用考虑XMLHttpRequest的任何细节，就如同调用和定义普通的Js函数。
<script language="javascript" src="bajax.js"></script>
<script language="javascript">
function callback(req, id) 
{
if(req.readyState == 4 && req.status == 200) {
if(id)document.getElementById(id).innerHTML = req.responseText;
//eval(req.responseText);
}
}
</script>
<div id="someid"></div>
<div onClick="bajax_send('http://xxx.net/yourscript.php?xxx', callback, 'someid')">点击查看哦！</div>
var bajax_debug_enable = false;
// 主函数：
//（URL，回调函数，传递给回调函数的附加数据，方法，POST数据，是否异步）
function bajax_send(url, callback, fdata, method, sdata, asyn)
{
fdata = (fdata === undefined)? null: fdata;
method = method || "GET";
sdata = (sdata === undefined)? null: sdata;
asyn = (asyn === undefined)? true: asyn;
var X = new bajax_object();
if(asyn)
X.onreadystatechange = function(){ callback(X, fdata); };
X.open(method, url, asyn);
if(bajax_debug_enable)
bajax_debugger(callback);
X.send(sdata);
if(asyn) return X;
else callback(X, fdata);
}
// 兼容IE与其它浏览器（From Sajax.php v0.12）
function bajax_object()
{
var A;
var _msxmlhttp = new Array(
'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0',
'Msxml2.XMLHTTP',
'Microsoft.XMLHTTP');
for(var i = 0; i < _msxmlhttp.length; i++) {
try {
if(A = new ActiveXObject(_msxmlhttp[i])) break;
} catch (e) {
A = null;
}
}
if(!A && typeof XMLHttpRequest != "undefined")
A = new XMLHttpRequest();
if(!A)
alert("Could not create connection object.");
return A;
}
// Debug information
function bajax_debugger(func)
{
var S = func.toString();
alert('[Running] ' + S.slice(9, S.indexOf(')', 10)) + ')');
}
function callback(req, id)
{
if(req.readyState == 4) {
if(req.status != 200) {
// do some thing.
req.onreadystatechange = null;
}else{
var _node = document.getElementById(id);
if(_node) _node.innerHTML = 'Hai ' + req.responseText;
// clear the reference
req.onreadystatechange = null;
}
}
}
'
function callback(req, id) {
if(req.readyState == 4 && req.status == 200) {
var _node = document.getElementById(id);
if(_node) _node.innerHTML = 'Hai ' + req.responseText;
// clear the reference
req.onreadystatechange = null;
}
}