ajax请求相关

上一篇单独写的是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步：

1. 请求发起：在此阶段，由XMLHttpRequest发起一个http请求，GET、POST、PUT、DELETE、UPDATE等等均可以。
2. 数据传送：发起请求以后就要传递数据，不一样的请求方式传递数据的方式细节不一样，但都是浏览器向服务器方向的，由于交互是双方的，数据传递天然很重要。
3. 监听状态：整个请求过程结束后浏览器的任务就是等，等待服务器的响应，这个过程不会阻塞用户，只是在后台监听链接状态，这里就体现出异步的优点了。
4. 接收响应：服务器处理完数据以后，后返回结果给浏览器，浏览器就能够接收整个请求返回的响应信息，而后本次请求结束。

以上就是一次完整的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，暂时用不到这里不过多介绍了。

对于ie五、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做为数据请求工具。

---

至此，这篇文章内容就结束了，最后仍是版权信息：尊重原创，转载分享前请先知悉做者，也欢迎指出错误不足共同交流，更多内容欢迎关注做者博客点击这里