AJAX

AJAX 使用

// 1. 创建 XMLHttpRequest 实例对象
let xhr = new XMLHttpRequest()

// 2. 与 URL 指定地址建立连接
// xhr.open("method(GET/POST/PUT/DELETE/...)", "url")
xhr.open("POST", url)

// 3. 设置请求头
// xhr.setRequestHeader("key", "value")
xhr.setRequestHeader("Content-Type", "application/json")

// 5. (异步)处理从服务端发送过来的信息
// 当 xhr.readyState 发生变化时触发该回调函数
xhr.onreadystatechange = function() {
  if (xhr.status / 100 | 0 === 2 && xhr.readyState === 4) {
    // do something
  }
}

// 4. 发送请求体信息
// xhr.send("GET" ? null : requestBody)
xhr.send(requestBody)

AJAX 基础知识

1. 关于 xhr.onreadystatechange

对于一个 XMLHttpRequest 的实例对象 xhr, 其 readyState 有 5 个值

readyState 值	意义
0	UNSENT : 表示还没有调用 open 方法
1	OPENDED : 表示已经调用了 open 方法
2	HEADERS_RECEIVED : 表示已经收到 responseHeader
3	LOADING : 表示正在下载 responseBody
4	DONE : 表示服务器发送的响应数据已经全部获取完成

2. 关于获取响应头和响应体

• xhr.getResponseHeader(key)
• xhr.getAllResponseHeaders()
• xhr.responseText
• xhr.response

3. 关于 xhr.status (即 HTTP 状态码)

• 2xx-成功: 请求已经成功被服务器接收, 理解, 并接受

  状态码	意义
  200	请求已成功

• 3xx-重定向: 这些状态码用来重定向, 后续的请求地址(重定向目标)在本次响应的 Location 域中指明

  状态码	意义
  301	永久重定向
  302	临时重定向
  304	表示在客户端中缓存的数据与服务端中的一致
  305	被请求的资源必须通过指定的代理才能被访问

• 4xx-客户端错误

  状态码	意义
  403	服务器理解请求, 但是拒绝执行
  404	请求的资源未在服务器上
  405	请求方式(method)不被允许
  408	请求超时

• 5xx-服务器错误

  状态码	意义
  500	由于某种错误, 服务器无法完成对请求的处理
  502	作为网关或代理工作的服务器尝试执行请求时, 从上游服务器收到无效的响应
  503	服务器过载

3. 关于请求头中 Content-Type 的值的设置

值	对应的请求体数据格式
text/plain	普通字符串
text/html	HTML 字符串
application/json	JSON 字符串
x-www-form-urlencoded	类似于通过 GET 方式发送的请求(name=x&age=y)
multipart/form-data	文件上传