Ajax到底是什么？

刺骨的言语ヽ痛彻心扉 2022-01-18 22:41 480阅读 0赞

小白我来了公司，就直接使用组件库中封装好的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()方法之前调用。

### 使用 ###

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

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

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

[Link 1]: https://juejin.im/post/5c8a2b9bf265da2ddd4aa117