-
前言
AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。
当前的前端开发都是使用的AJAX来进行网络请求，并且得到了所有浏览器的支持。概括起来，就是一句话，AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。
那么介绍几种AJAX的请求方式。
-
原生的AJAX请求
原生的AJAX请求需要通过XMLHttpRequest对象，该对象会在浏览器与服务器之间传送数据，具体使用如下：
<script type="text/javascript">
function requestSuccess(response) {
console.log(response);
}
function requestError(status) {
console.log(status);
}
//创建ajax请求的对象实例
var ajax = new XMLHttpRequest();
//指定通信过程中状态改变时的回调函数
ajax.onreadystatechange = function () {
//readyState表示当前请求所处的状态，状态为4时，表示一次请求完成或者失败了
if (ajax.readyState == 4) {
//status表示本次请求的状态码，只有当返回200或者304时才是请求成功
if (ajax.status == 200) {
//请求成功
requestSuccess(ajax.responseText);
} else{
//请求失败
requestError(ajax.status);
}
} else{
}
};
//open方法用来指定请求方式，请求地址
ajax.open('GET','http://www.baidu.com');
//发送请求
ajax.send();
</script>
发现使用原生的对象完成一次请求十分的繁琐，而且嵌套层次较深，不易理解，但是最新的ES6标准引入了Promise对象，来看一下其能解决的问题：
Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。
具体Promise的教程可以去网上查阅资料，其实使用起来并不难，因为就是为了简化异步操作的，把上面的例子该为下面的：
<script type="text/javascript">
function mainF(success, fail) {
//创建ajax请求的对象实例
var ajax = new XMLHttpRequest();
//指定通信过程中状态改变时的回调函数
ajax.onreadystatechange = function () {
//readyState表示当前请求所处的状态，状态为4时，表示一次请求完成或者失败了
if (ajax.readyState == 4) {
//status表示本次请求的状态码，只有当返回200或者304时才是请求成功
if (ajax.status == 200) {
//请求成功
success(ajax.responseText);
} else {
//请求失败
fail(ajax.status);
}
} else {
}
};
//open方法用来指定请求方式，请求地址
ajax.open('GET', 'http://www.baidu.com');
//发送请求
ajax.send();
}
var p = new Promise(mainF);
p.then(function (response) {
console.log(response);
})
.catch(function (status) {
console.log(status);
});
</script>
通过上面这样的修改，我们做到了逻辑与结果的完全分离，代码更加的清晰，但是代码量似乎加多了。
-
jQuery进行AJAX请求
jQuery是为了简化DOM操作，事件处理和AJAX请求而出现的一个三方库，那么使用其来进行AJAX处理，如下所示：
<script type="text/javascript">
$(document).ready(function(){
$.get('http://www.baidu.com')
.done(function(data){
//请求成功后执行
console.log(data);
})
.fail(function(ajax) {
//请求失败后执行
console.log(ajax.status);
});
});
</script>
大大的简化了原生AJAX请求的复杂度，但是程序员的暴脾气一般都追求极致，更加希望引入的框架是小而美的。
-
axios
这个是一个第三方的ajax请求库，是专业的，使用如下：
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
有木有更加的简介，后续的开发中就会使用最后的方法来进行网络请求。
注：因为一些MVVM框架的兴起，jQuery这种原始的通过操作DOM来执行一些增删改查以及事件绑定的方式已经落伍了。但是在有些场合jQuery还是有用的，比如第三方的CSS库bootsrtap是使用了jQuery作为其js部分的依赖的。
跨域请求的问题，请点击：跨域请求安全限制