教练，我要学 JavaScript！我要当前端！好，那你懂 Ajax 吗？你知道为什么要学 Ajax 吗？如果你的页面还停留在静态页面和不停刷新得到的动态页面，那么，是时候学习 Ajax 了。作为一个前端必备技能，今天我们来对 Ajax 一个面对面的交流！
什么是 Ajax？
Ajax 提供了一种方式，让你无需刷新页面就可以异步获取数据，听起来是不是很吊，我再也不用每次提交表单刷新页面了，再也不发送数据就刷新页面了，直接把返回的数据插入 DOM 就可以在页面显示数据了。通过 Ajax 我们就可以做出更好的交互了。
如何使用 Ajax
第一步：创建 XHR 对象
Ajax 的核心就是 XHR(XMLHttpRequest) 对象，虽然名字里包含了 XML，但是事实上，并不一定需要用 XML 作为数据格式，在 JSON 大行其道的时代，必然传输 JSON 会更加的愉悦了。
在 IE 已死的今天，不需要再考虑如何兼容 IE 旧版本的 XHR 对象了，所以我们只需要通过
var xhr = new XMLHttpRequest();
就可以获得我们所需要的 XHR 对象了，没错，就是这么简单，不需要判断浏览器的属性，不需要兼容 IE！
第二步：XHR的用法
有了这个对象之后，我们看看需要使用什么样的动作才能完成一次正常的传输？首先我们需要启动一个请求以备发送，然后再发送，发送完之后对返回的数据进行处理。用代码怎么写呢？
var xhr = new XMLHttpRequest();
xhr.open('get', 'example.php', false);
xhr.send(null);
if (xhr.status >= 200 && xhr.status < 300) || xhr.status(304) {
alert(xhr.responseText);
} else {
alert('Request was unsuccessful' + xhr.status);
}
上面这段代码首先创造了 XHR 对象，然后用 open 方法去启动一个请求，默认接收三个参数，分别是要发送的请求的类型，请求的 URL，以及是否异步发送请求。再调用 get 方法发送数据，这里是 null，发送完之后对返回的状态进行检测，通过 xhr.status 返回相对应的状态码，200 表示成功， 304 表示缓存，其他均表示返回失败。
看完上面的代码之后，有人会问，那我想要异步发送怎么办？大多数情况下， Ajax 请求都是异步发送的，这个时候我们需要用到另外一个 XHR 对象的属性 readtstatechange，通常当它的值为 4 的时候，表示所有数据已经接受到了。因此，我们可以把上面的代码更改为如下：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.status === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
alert(xhr.responseText);
} else {
alert('Request was unsuccessful' + xhr.status);
}
}
};
xhr.open('get', 'example.txt', true);
xhr.send(null);
这样我们一个完整的 Ajax 请求就已经完成了，是不是很觉得很简单呢？其实，很多时候我们不仅仅只是简单的获取数据而已，往往我们需要请求不同的参数，或者需要把一些数据发送到服务器里，这个时候就需要进一步的使用了。
再谈 GET 和 POST
GET
GET 是最常见的请求类型，经常用于向服务器查询某些信息。我们可以将查询的字符串追加到 URL 的末尾，发送给服务器。例如下面：
xhr.open('get', 'example.php?name1=value1&name2=value2', true)
POST
另外一个常见的请求是 POST，用于向服务器发送应该被保存的数据。不同于 GET，POST 请求是把数据作为请求的主体去提交的，所以我们的数据一般是在 send 方法里面发出的。可以见下面的例子：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.status === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
alert(xhr.responseText);
} else {
alert('Request was unsuccessful' + xhr.status);
}
}
};
xhr.open('post', 'example.php', true);
var form = document.getElementById('user-info');
xhr.send(serialize(form));
XMLHttpRequest 2 级
FormData
有的时候我们会经常需要提交更多的数据，通过创建一个 FormData 对象，我们可以更加简单的创建于表单格式相同的数据。例如：
var data = new FormData();
data.append('name', 'Steven');
append 方法接受两个参数，键和值，分别对应表单字段的名字和表单字段的值。
创建了 FormData 的实例以后，可以之间传给 XHR 的 send 方法，如下：
// 省略创建 XHR 对象和对其状态的监测
xhr.open('post', 'postexample.php', true);
var form = document.getElementById('user-info');
xhr.send(new FormData(form));
有时候我们需要验证这个表单是否由特定的用户或者是否有足够的权限的时候，可以再提交表单前 append 对应的 token，再对应提交。
progress
有时候我们想知道 Ajax 传输的状态怎么样了怎么办！通过 progress 事件，我们可以时刻知道传输的状态，它的使用必须放在启动请求 'open' 之前，例如：
xhr.onprogress = function(event) {
var divStatus = document.getElementById('status');
if (event.lengthComputable) {
divStatus.innerHTML = '接受到了' + event.position + event.totalSize + 'bytes';
}
};
xhr.open('get', 'example.php', true);
xhr.send(null);
跨域请求
然而 Ajax 并不是万能的，有时候我们想要异步获取其他网站的数据的时候，就会返回失败，这是因为 XHR 对象只能访问与包含它页面位于同一个域中的资源。那我们要怎么办呢？
CORS
跨源资源共享标准通过新增一系列 HTTP 头，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。主要有三种：
通过使用 Origin 和 Access-Control-Allow-Origin 就可以完成最简单的跨站请求。不过 Access-Control-Allow-Origin 需要为 * 或者包含由 Origin 指明的站点。
“预请求”要求必须先发送一个 OPTIONS 请求给目的站点，来查明这个跨站请求对于目的站点是不是安全可接受的。这样做，是因为跨站请求可能会对目的站点的数据造成破坏。
一般而言，对于跨站请求，浏览器是不会发送凭证信息的。但如果将XMLHttpRequest
的一个特殊标志位设置为true，浏览器就将允许该请求的发送。
图片Ping
在使用图片的时候，我们的 <img> 中的 src 属性也可以使用任何网页的链接，意味加载这一类请求无需担心是否跨域。常常用于动态创建图像，或者跟踪用户点击页面，动态广告曝光次数等。
JSONP
JSONP 是 JSON with padding 的缩写，意思是填充式的 JSON，同图片 Ping 一样，<script> 的 src 属性也是可以跨域的，因此通过动态创建一个 <script> 元素获取我们所需要的资源。
不同于图像 Ping 只返回图片，JSONP 可以直接访问相应文本。只需要在添加 URL 的时候添加查询参数即可，看起来会像下面这个样子：
http://freeeoip.net/json/?callback=handleResponse
// 或者 PHP 形式的
http://test.com/bookservice.php?callback=displayBooks
其中赋值给 callback 的表示指定的调用函数，完整的 JSONP 如下：
// 处理返回数据的请求
function handleResponse(data){
alert('Your city is in' + data.city + data.country);
}
// 动态生成 JSPONP 请求
var script = document.createElement('script');
script.src = 'http://freegeoip.net/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
- 好处： 双向通信，可以跨域
- 坏处：无法识别恶意代码，无法知道是否获取失败
