Ajax 想服务器请求额外的数据而无需卸载页面，带来更好的用户体验

XHR 的用法

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
const xhr = new XMLHttpRequest()
// readyState 属性的值有一个值变成另一个值，都会触发一次readystatechange事件
// 必须在调用 open() 之前指定 onreadystatechange 事件处理程序才能确保夸浏览器兼容
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    // 304表示请求的资源并没有被修改，可以直接使用浏览器中缓冲的版本
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      // 收到响应后，响应的数据就好自动填充XML对象的属性
      // 无论内容类型是什么，响应主体的内容都会存到responseText属性中
      console.log('responseText', xhr.responseText);
      // 响应内容类型是'text/xml' 或 'application/xml'
      // 非XML数据时，responseXML属性值为 null
      console.log('responseXML', xhr.responseXML);
      console.log('status', xhr.status);
      console.log('statusText', xhr.statusText);
    } else {
      console.log('get error');
    }
  }
}
// open() 方法并不会真正发送请求，而只是启动一个请求以备发送
xhr.open('get', "http://localhost:3000/api/page/list?pageNumber=2", true)
// 作为请求主体发送的数据
// 如不需要发送数据必须传入null，这个参数对某些浏览器是必须的
xhr.send(null)

readyState

  • 0: 未初始化。尚未调用open()
  • 1: 启动。已调用 open(), 尚未调用 send()
  • 2: 发送。已调用 send(), 尚未接受到响应。
  • 3: 接收。接收到部分响应数据。
  • 4: 完成。已接收到全部相应数据，而且已经可以在客户端使用。