Posted on 2008-10-23 11:47
Java蜘蛛人 --鄭成橋 閱讀(645)
評論(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;
}
}