上一篇单独写的是ajax跨域，这一篇就来详细说一说ajax，ajax是现代web开发中必不可少的一部分内容，非常基础也非常重要，这篇总结一下到目前为止我对ajax的理解。
什么是ajax
ajax是web开发中的一种交互技术，全称为Asynchronous JavaScript And XMLHttpRequest，使用ajax可以实现页面局部更新，每次变化不再需要请求整个页面，之前在我web开发历史的文章中也提到过，从前的web页面每次需要更新时都必须要刷新整个页面，整体体验非常不好。ajax的出现并大量使用在web开发中绝对是颠覆性的变化，它使得开发出优秀的web应用成为现实，从此各种各样的前端技术才得以兴起。时至今日，ajax已经成为web开发中难以或缺的一部分。
ajax的核心自然就是XMLHttpRequest对象了，它存在于所有现代浏览器中（IE5 和 IE6 使用 ActiveXObject），它使得浏览器可以发出HTTP请求与接收HTTP响应。有了这一基础，剩下的就是js交互了，整个过程浏览器就可以处理，而交换数据的文档也不限于xml（现在常用json）。
ajax交互流程
一次ajax交互是浏览器向服务器请求一次数据的过程，整个过程可分为4步：
- 请求发起：在此阶段，由XMLHttpRequest发起一个http请求，GET、POST、PUT、DELETE、UPDATE等等都可以。
- 数据传送：发起请求之后就要传递数据，不同的请求方式传递数据的方式细节不同，但都是浏览器向服务器方向的，因为交互是双方的，数据传递自然很重要。
- 监听状态：整个请求过程结束后浏览器的任务就是等，等待服务器的响应，这个过程不会阻塞用户，只是在后台监听连接状态，这里就体现出异步的优势了。
- 接收响应：服务器处理完数据之后，后返回结果给浏览器，浏览器就可以接收整个请求返回的响应信息，然后本次请求结束。
以上就是一次完整的ajax交互，下面来通过代码展示一下简单的ajax流程。
代码演示
先来看代码
var xhr = new XMLHttpRequest();
xhr.open('GET',url,true); // url 是一个URL
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304){
// 获得 xhr.responseText 为相应数据
}
};
xhr.send();
我们来一点点看其中涉及到的方法和相关概念，首先创建了一个XMLHttpRequest对象，然后接下来是一个open方法，第一个参数是请求方法，第二个参数是一个URL，默认情况要求同源（关于同源策略和跨域可以看我上一篇文章），第三个参数指的是是否为异步请求，默认是true可以省略。open方法结束会初始化HTTP请求参数，但是并不发送请求。
做好请求发送准备了，不过现在还不能发送请求。因为请求是异步的，我们无法获知请求的进度和响应状态，XMLHttpRequest给我们提供了一个事件onreadystatechange，我们可以通过监听这个时间来关注这种变化，所以下一步是注册onreadystatechange事件。
先了解一下readyState，当一个XMLHttpRequest初次创建时，这个readyState的值从0开始，直到接收到完整的HTTP响应，这个值增加到4，具体情况如下：
| 状态 | 名称 | 描述 |
|---|---|---|
| 0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
| 1 | Open | open()方法已调用，但是 send() 方法未调用。请求还没有被发送。 |
| 2 | Sent | Send()方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 |
| 3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成。 |
| 4 | Loaded | HTTP 响应已经完全接收。 |
在这里我们只要判断这个值是不是4就可以知道响应是否接收完成了。
另一个要关注的就是status，它指的就是HTTP状态码，这个大家都很熟悉了，只要是200（OK）或304（Not Modified）就是成功的请求（这里也可以关注statusText，它指的是状态码对应的名称，不常用）。此时就可以获取到响应数据了，responseText即为响应体内容（还有一个responseXML，它对请求的响应解析为XML并作为Document对象返回，不常用）。到此，请求准备完全完成。
接下来调用send方法，发送请求，其中如果是POST或PUT请求可以把请求体作为参数传入。整个请求到此就发送完成了。
XMLHttpRequest还有几个这里没涉及到的方法abort，getAllResponseHeaders，getResponseHeader，setRequestHeader，暂时用不到这里不过多介绍了。
对于ie5、6，创建xhr对象要使用new ActiveXObject("Microsoft.XMLHTTP")，不过以后应该没用了。
以上就是原生js实现的ajax，在实际开发中我们几乎永远都不会去写ajax，封装好的ajax库有很多，比较熟悉的jquery中的$.ajax，$get，$post等等。到此，传统的基于XMLHttpRequest 实现的ajax的内容就结束了，不过现在还有一个东西需要认识一下。
fetch
XMLHttpRequest的api上面已经看到了，可以说的上很复杂了，它复杂到我们平时几乎都用不上原生api，于是，一种新的更优雅的解决方案--fetch诞生了。
首先fetch是新东西，先来看浏览器支持率：
可以看出其实不是很乐观，不过不要紧，我们可以使用polyfill来实现，所以可以直接来看fetch的例子：
fetch(url,{
method: 'GET',headers: new Headers({
'Accept': 'application/json'
})
}).then(res=>{
return res.json()
}).then(res=>{
console.log(res)
}).catch(err=>{
// 处理异常
})
可以看出fetch是基于promise的（关于promise相关内容在这篇文章中提到过）,所以可以链式调用，整个过程不难理解，请求结果如果是json还支持直接处理，fetch的api非常实用，适合现代前端开发使用，使用React开发时候通常我们都选fetch作为数据请求工具。
至此，这篇文章内容就结束了，最后还是版权信息：尊重原创，转载分享前请先知悉作者，也欢迎指出错误不足共同交流，更多内容欢迎关注作者博客点击这里
