这次给大家带来js如何实现ajax的请求函数，js实现ajax请求函数的注意事项有哪些，下面就是实战案例，一起来看一下。
一般我们写网页的时候，如果用到 ajax 请求服务器，都是使用 jquery 等已经封装好的库来调用，比较简单。
但是一般这些库的功能很多，引入了太多我们用不到的东西，如果我们需要写一个功能单一，简单的页面，完全用不到引用如此庞大的库文件。
我们可以简单实现一个自己的 ajax 请求功能，具体的代码如下：
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, data, callback, fail, async) {
var query = [];
for (var key in data) {
query.push(encodeuricomponent(key) + '=' + encodeuricomponent(data[key]));
}
ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'get', null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
var query = [];
for (var key in data) {
query.push(encodeuricomponent(key) + '=' + encodeuricomponent(data[key]));
}
ajax.send(url,'post', query.join('&'), callback, fail, async)
};
使用方法： get
ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {
//success
},
function(status){
//fail
});
post
ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {
//succcess
},function(status){
//fail
});
这里需要注意一个问题，如果我们想要发送类似
var sendcmd = ?op_code= + code + &op_cmd= + cmd;
ajax.post('/control' + sendcmd,'',function(response,xml) {
console.log('success');
},
function(status){
console.log('failed:' + status);
});
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js实现计算器功能最简洁方法
angular实现表格过滤，删除功能
以上就是js如何实现ajax的请求函数的详细内容。