1 XHR
- 使用
XMLHttpRequest
(XHR)对象可以与服务器交互, 也就是发送 ajax 请求 - 前端可以获取到数据,而无需让整个的页面刷新
- 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 发送请求
open()
: 初始化一个请求, 参数为: (method, url[, async])send(data)
: 发送请求abort()
: 中断请求setRequestHeader(name, value)
: 设置请求头
3.2.2 请求状态
status
: 响应状态码值, 比如 200, 404readyState
: 标识请求状态的只读属性- 0: 初始
- 1: open()之后
- 2: send()之后
- 3: 请求中
- 4: 请求完成
onreadystatechange
: 绑定 readyState 改变的监听
3.2.3 响应
statusText
: 响应状态文本responseType
:指定响应数据类型,如果是’json’,得到响应后自动解析响应体数据response
: 响应体数据, 类型取决于 responseType 的指定
3.3 其他实例属性
timeout
: 指定请求超时时间, 默认为 0 代表没有限制ontimeout
: 绑定超时的监听onerror
: 绑定请求网络错误的监听getResponseHeader(name)
: 获取指定名称的响应头值getAllResponseHeaders()
: 获取所有响应头组成的字符串