什么是XHR，以及XHR常用的API

1 XHR

详情点击

1. 使用XMLHttpRequest(XHR)对象可以与服务器交互, 也就是发送 ajax 请求
2. 前端可以获取到数据，而无需让整个的页面刷新
3. Web页面可以只更新页面的局部，而不影响用户的操作

2 http请求与ajax请求

• http请求包括ajax请求，是一种特别的http请求

2.1 服务器端和浏览器端

• 对服务器端来说, 没有任何区别
• 浏览器端发请求: 只有XHR 或 fetch 发出的才是 ajax 请求, 其它所有的都是非 ajax 请求

2.2 浏览器端接收到响应

一般请求

• 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面

ajax请求

• 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据
  • 通过ajax引擎进行回调函数的调用

3 常用API

3.1 创建 XHR 对象

MLHttpRequest(): 创建 XHR 对象的构造函数

3.2 常用实例属性

3.2.1 发送请求

1. open(): 初始化一个请求, 参数为: (method, url[, async])
2. send(data): 发送请求
3. abort(): 中断请求
4. setRequestHeader(name, value): 设置请求头

3.2.2 请求状态

1. status: 响应状态码值, 比如 200, 404
2. readyState: 标识请求状态的只读属性
   • 0: 初始
   • 1: open()之后
   • 2: send()之后
   • 3: 请求中
   • 4: 请求完成
3. onreadystatechange: 绑定 readyState 改变的监听

3.2.3 响应

1. statusText: 响应状态文本
2. responseType:指定响应数据类型,如果是’json’,得到响应后自动解析响应体数据
3. response: 响应体数据, 类型取决于 responseType 的指定

3.3 其他实例属性

1. timeout: 指定请求超时时间, 默认为 0 代表没有限制
2. ontimeout: 绑定超时的监听
3. onerror: 绑定请求网络错误的监听
4. getResponseHeader(name): 获取指定名称的响应头值
5. getAllResponseHeaders(): 获取所有响应头组成的字符串