使用过jQuery异步请求的方法的同学，肯定觉得那个相当好用，相比而言，上面写的相当繁琐，get方式和post方式请求甚至还有部分代码是有很大区别的，那应如何通过代码的方式屏蔽这些区别呢，这里我们仿一下jQuery 的$.ajax() 方法。
//封装ajax
function ajax(obj) {
var xhr = creatXmlHttpRequest();
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data);
if (obj.method === 'get') obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
if (obj.async === true) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
callback();
}
};
}
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
} else {
xhr.send(null);
}
if (obj.async === false) {
callback();
}
function callback() {
if (xhr.status == 200) {
obj.success(xhr.responseText); //回调传递参数
} else {
alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
}
}
}
//名值对转换为字符串
function params(data) {
var arr = [];
for (var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
调用我们封装的ajax方法
window.onload = function(){
document.getElementById("username").onchange = function(){
ajax({
method : 'post',
url : 'checkuserByJSON.jsp',
data : {
'username' : document.rgform.username.value,
'password' : document.rgform.password.value
},
success : function (text) {
var _ret = eval('(' + text + ')');
document.getElementById("msg").innerHTML = _ret.tip;
},
async : true
});
}
}
我们给ajax传的就是一个object对象，是不是已经很贴近jQuery的方式了呢。
来源：马开东云搜索（电话：15110131480 微信：makaidongzi QQ：1130122167 微信公众号：makaidong-com）
欢迎分享本文，转载请保留出处！
相关文章
精彩导读
热门资讯
关注我们
