Ajax到底是什么？

小白我来了公司，就直接使用组件库中封装好的ajax来发送请求，传输数据。后续为了官网轻量级的开发，不再使用react，改用jquery，使用$.ajax来发送数据。但是实际的Ajax是什么呢？客户端与服务端之间传输数据只能使用Ajax吗？它背后的原理到底是什么？小白进行了深入的学习，并完成了这篇文章，想要给像小白一样的童鞋们分享一下。

概念

一句话概括，Ajax就是用JS向服务端发起一个请求，并获取服务器返回的数据。在未出现Ajax之前，客户端与服务器之间进行数据交互，只能通过特定的标签来实现。如a标签来请求一个新的页面，img、iframe、script等，使用这些标签不是需要刷新页面，就是只能请求到特定的数据。这样的局限性很大。

Ajax可以做到不刷新页面，且可以获得任意类型的数据。需要了解Ajax是一种技术方案，它不是一种新技术。它是在异步JS和XMLHttpRequest的基础上实现的。那么它是如何实现不刷新页面来获取数据的呢？这里就需要介绍XMLHttpRequest对象。

XMLHttpRequest

XMLHttpRequest是浏览器提供的一个对象，且W3C对它进行了标准化。XMLHttpRequest标准又分为Level 1和Level 2。 XMLHttpRequest Level 2中新增了以下功能：

• 可以发送跨域请求，在服务端允许的情况下；
• 支持发送和接收二进制数据；
• 新增formData对象，支持发送表单数据；
• 发送和获取数据时，可以获取进度信息；
• 可以设置请求的超时时间；

了解了XMLHttpRequest对下，下面继续来看一下它的属性和方法：

属性

• readyState（只读）: HTTP请求的状态，可取值为0-4。这个值每次变化都会触发onreadystatechange()事件。
• responseText（只读）: 响应体（不包括头部）
• responseXML（只读）: 对请求的响应，解析为XML并作为Document对象返回。
• status（只读）: 由服务器返回的HTTP状态代码。
• statusText（只读）: 用名称描述请求的HTTP状态码。
• timeout: 请求的限制时间，单位为毫秒。

事件句柄

• onreadystatechange: 每次readyState变化都会触发onreadystatechange()。
• ontimeout: 当请求超时后调用。
• onloadstart: 调用xhr.send()方法后立即触发。
• onload: 请求完成时触发。
• onloadend: 请求结束时触发。

方法：

• abort()： 取消当前响应，关闭连接并且结束任何未决的网络活动。
• getAllResponseHeaders(): 把HTTP响应头部作为为解析的字符串返回。
• getResponseHeader(): 返回制定的HTTP响应的头部的值。将要返回的HTTP响应的头部的名称作为参数传递进去。
• open(method,url,async): 初始化HTTP请求参数，但是并不发送请求。method:请求类型。
• send(): 发送HTTP请求，使用传递给open()方法的参数，以及传递给该方法的可选请求体。
• setRequestHeader(name, value): 向一个打开但为发送的请求设置请求头。这个方法必须在open()方法之后，send()方法之前调用。

使用

let xhr = new XMLHttpRequest();

xhr.timeout = 300; // 设置请求最大时间为300毫秒

xhr.open('get', '/get/data/', true);
xhr.setRequestHeader('token',window.localStorage.getItem('token'));
xhr.send();

xhr.onreadystatechange = function(e) { ... };
xhr.ontimeout = function(e) { ... };
xhr.onerror = function(e) { ... };


复制代码

看到这你是不是有点疑惑，这都是在介绍XMLHttpRequest对象，好像和Ajax没有太大关系，其实Ajax就是使用XMLHttpRequest对象来发送一个http请求，并接受http响应。

其实无论是jQuery中的ajax方法，还是你可能使用的其他库中封装的ajax方法，都是在XMLHttpRequest对象的基础上做的封装，让你使用起来更加方便而已。当然客户端和服务器之间的数据交互不仅仅可以通过Ajax来实现，而且它也存在一些局限性。比如说服务器传来一个文件的二进制流，想要在浏览器中实现下载，Ajax就无法完成这个功能，我们只能使用表单提交的方式。具体怎么实现呢？可以参考前端文件下载这篇文章哦。

转载于:https://juejin.im/post/5c8a2c8cf265da2d90587c40