原生JS写Ajax的请求函数功能

前端之家收集整理的这篇文章主要介绍了原生JS写Ajax的请求函数功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_301_0@一般我们写网页的时候,如果用到 Ajax 请求服务器,都是使用 JQuery 等已经封装好的库来调用,比较简单。


@H_301_0@但是一般这些库的功能很多,引入了太多我们用不到的东西,如果我们需要写一个功能单一,简单的页面,完全用不到引用如此庞大的库文件


@H_301_0@我们可以简单实现一个自己的 Ajax 请求功能,具体的代码如下:


<div class="jb51code">
<pre class="brush:js;">
var ajax = {};
ajax.x = function () {
if (typeof XMLHttpRequest !== 'undefined') {
return new XMLHttpRequest();
}
var versions = [
"MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp.2.0","Microsoft.XmlHttp"
];
var xhr;
for (var i = 0; i < versions.length; i++) {
try {
xhr = new ActiveXObject(versions[i]);
break;
} catch (e) {
}
}
return xhr;
};
ajax.send = function (url,method,data,success,fail,async) {
if (async === undefined) {
async = true;
}
var x = ajax.x();
x.open(method,url,async);
x.onreadystatechange = function () {
if (x.readyState == 4) {
var status = x.status;
if (status >= 200 && status < 300) {
success && success(x.responseText,x.responseXML)
} else {
fail && fail(status);
}
}
};
if (method == 'POST') {
x.setRequestHeader('Content-type','application/x-www-form-urlencoded');
}
x.send(data)
};
ajax.get = function (url,callback,async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url + (query.length ? '?' + query.join('&') : ''),'GET',null,async)
};
ajax.post = function (url,async) {
var query = [];
for (var key in data) {
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
ajax.send(url,'POST',query.join('&'),async)
};

@H_301_0@

使用方法: GET

PHP',{foo: 'bar'},function(response,xml) { //success },function(status){ //fail }); POST ajax.post('/test.PHP',xml) { //succcess },function(status){ //fail });
@H_301_0@这里需要注意一个问题,如果我们想要发送类似

Failed:' + status); });
@H_301_0@

总结

@H_301_0@以上所述是小编给大家介绍的原生JS写Ajax的请求函数功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程之家的支持

猜你在找的Ajax相关文章