AJAX 工作原理及概述

发表于 | 分类于

参考： 你真的会使用 XMLHttpRequest 吗？

AJAX 工作原理及概述

AJAX 使用 XMLHttpRequest 对象与服务器通信，它可以使用 JSON、XML、HTML和文本等多种格式发送和接受。AJAX 最吸引人的是它的异步特性，也就是说可以在不重新刷新页面的情况下雨服务器通信，交换数据，更新页面。

最主要的两个特性：

  • 在不重新加载页面的情况下发送请求给服务器
  • 接受并使用从服务器发来的数据

工作原理

Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。

发送 HTTP 请求

创建 XMLHttpRequest 对象，需要注意兼容性问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function sendAjax() {
    // 构造表单数据
    var formData = new FormData()
    formData.append('username', 'johndoe')
    formData.append('id', 123456)

    // 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    xhr.timeout = 3000
    xhr.responseType = 'text'
    //创建一个 post 请求， 第三个布尔值参数是同步还是异步, 默认是异步
    xhr.open('POST', '/server', true)
    xhr.onload = function(e) {
        if (this.status == 200 || this.status == 304) {
            alert(this.responseText)
        }
    }

    xhr.ontimeout = function(e) {}
    xhr.onerror = function(e) {}
    xhr.upload.onprogress = function(e) {}

    xhr.send(formData)
}
/**
 * 设置请求头 xhr.setRequestHeader('X-Text', 'one')
 * 获取响应头
*/```


## 指定响应类型
`responseType` 是 `xhr level 2` 新增的属性，用来指定 `xhr.response` 的数据类型

![][2]

``` javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
//可以将`xhr.responseType`设置为`"blob"`也可以设置为`" arrayBuffer"`
//xhr.responseType = 'arrayBuffer';
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
    ...
  }
};

xhr.send();

如何获取 response 数据

xhr 提供了 3 个属性来获取请求返回的数据，分别是：xhr.response、xhr.responseText、xhr.responseXML

  • xhr.response - 默认值：空字符串"" - 当请求完成时，此属性才有正确的值 - 请求未完成时，此属性的值可能是""或者 null，具体与 xhr.responseType有关：当responseType为""或"text"时，值为""；responseType为其他值时，值为 null

  • xhr.responseText - 默认值为空字符串"" - 只有当 responseType 为"text"、””时，xhr 对象上才有此属性，此时才能调用xhr.responseText，否则抛错 - 只有当请求成功时，才能拿到正确值。以下 2 种情况下值都为空字符串""：请求未完成、请求失败

  • xhr.responseXML - 默认值为 null - 只有当 responseType 为"text"、""、"document"时，xhr 对象上才有此属性，此时才能调用 xhr.responseXML，否则抛错 - 只有当请求成功且返回数据被正确解析时，才能拿到正确值。以下 3 种情况下值都为 null：请求未完成、请求失败、请求成功但返回数据无法被正确解析时

如何追踪 ajax 请求的当前状态

用 xhr.readyState 这个属性即可追踪到。这个属性是只读属性，总共有 5 种可能值，分别对应 xhr 不同的不同阶段。每次 xhr.readyState 的值发生变化时，都会触发 xhr.onreadystatechange 事件，我们可以在这个事件中进行相关状态判断。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
xhr.onreadystatechange = function () {
  switch(xhr.readyState){
    case 1://OPENED
      //do something
          break;
    case 2://HEADERS_RECEIVED
      //do something
      break;
    case 3://LOADING
      //do something
      break;
    case 4://DONE
      //do something
      break;
  }

可以发送什么类型的数据

xhr.send(data)的参数 data 可以是以下几种类型：

  • ArrayBuffer
  • Blob
  • Document
  • DOMString
  • FormData
  • null

事件触发顺序