上一篇文章是关于ajax跨域的。这篇文章会详细讲ajax。Ajax是现代Web开发中不可或缺的一部分。这是非常基本的，也是非常重要的。这篇总结让我们看看到目前为止我对ajax的理解。什么是阿贾克斯？Ajax是Web开发中的一种交互技术。它的全称是AsynchronousJavaScriptAndXMLHttpRequest。使用ajax可以实现页面的局部更新。每次更改都不需要请求整个页面。之前在我的web发展史文章中也提到过。但是之前的网页每次需要更新都要刷新整个页面，整体体验很差。ajax的出现和广泛使用绝对是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过程。代码演示先看代码varxhr=newXMLHttpRequest();xhr.open('GET',url,true);//url是一个URLxhr.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。具体如下：状态名描述了0Uninitialized初始化状态。XMLHttpRequest对象是由abort()方法创建或重置的。1调用了openopen()方法，但是还没有调用send()方法。请求尚未发送。2SentSend()方法已被调用，并且HTTP请求已发送到Web服务器。没有收到回复。3Receiving接收到所有的响应头。已开始接收响应正文但未完成。4LoadedHTTP响应已完全接收。这里我们只需要判断该值是否为4就可以知道是否收到了响应。另外需要注意的是status，指的是HTTP状态码，大家都很熟悉了。只要是200（OK）或者304（NotModified），就是请求成功（这里也可以关注statusText，指的是状态码对应的名称，不常用）。此时就可以获取到响应数据，responseText就是响应体的内容（还有responseXML，将对请求的响应解析成XML，作为Document对象返回，不常用）.至此，请求准备工作全部完成。接下来，调用发送方法发送请求。如果是POST或者PUT请求，可以将请求体作为参数传入。整个请求发送到这里。XMLHttpRequest还有几个方法abort、getAllResponseHeaders、getResponseHeader、setRequestHeader这里没有涉及，这里暂时不用，多介绍。对于ie5和6，需要使用newActiveXObject("Microsoft.XMLHTTP")创建一个xhr对象，不过以后应该没什么用了。以上就是原生js实现的ajax。在实际开发中，我们几乎不会写ajax。里面有很多封装的ajax库，比如大家熟悉的jquery中的$.ajax、$get、$post等。至此，传统的基于XMLHttpRequest的ajax的内容就结束了，但是还有一点需要知道。fetchXMLHttpRequest的api在上面已经看到了，可以说是非常的复杂，复杂到我们几乎无法使用原生的api，于是一个新的更优雅的解决方案——fetch诞生了。首先，fetch是一个新事物。我们先看浏览器支持率：可以看出不是很乐观，不过没关系，我们可以用polyfill来实现，直接看fetch的例子：fetch(url,{method:'GET',headers:newHeaders({'Accept':'application/json'})}).then(res=>{returnres.json()}).then(res=>{console.log(res)}).catch(err=>{//处理异常})可见fetch是基于promise的（promise相关的内容在本文中有提到），所以可以链式调用.整个过程并不难理解。Request结果如果是json，也支持直接处理。fetch的API非常实用，适合现代前端开发。在使用React进行开发时，我们通常会选择fetch作为数据请求工具。至此，本文内容结束，最后是版权信息：尊重原创，转载分享前请知晓作者，欢迎指出错误，互相交流。更多内容请关注作者博客。点击这里
