一个极简化的Ajax封装,回调接口和浏览器兼容性较好

本文介绍了一个简单的Ajax封装库实现,该库旨在简化Ajax调用流程并提高浏览器兼容性。通过提供的核心函数bajax_send,开发者可以轻松发起Ajax请求并处理响应。
[color=red]>>注意:[/color]请下载后面(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函数。

用法:
[code]
<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>
[/code]

附源码内容
[code]
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)) + ')');
}
[/code]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值