ajax请求和响应时间轴

UNSENT OPENED HEADERS_RECEIVED LOADING DONE
初始化 建立连接 接收到响应头 响应体加载中 加载完成
// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', './time.php')
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)
// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
  // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
  if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(this)
  }
}
时间轴
var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 请求代理对象
xhr.open('GET', 'time.php')
console.log(xhr.readyState)
// => 1
// open 方法已经调用，建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
  switch (this.readyState) {
    case 2:
      // => 2
      // 已经接受到了响应报文的响应头
      // 可以拿到头
      // console.log(this.getAllResponseHeaders())
      console.log(this.getResponseHeader('server'))
      // 但是还没有拿到体
      console.log(this.responseText)
      break
    case 3:
      // => 3
      // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
      // 在这里处理响应体不保险（不可靠）
      console.log(this.responseText)
      break
    case 4:
      // => 4
      // 一切 OK （整个响应报文已经完整下载下来了）
      // 这里处理响应体
      console.log(this.responseText)
      break
  }
})
通过理解每一个状态值的含义得出一个结论：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。

1.一个真正的响应有2各阶段 1服务器成功接收响应 2数据已经回到客户端
监听一部对象的响应状态 readystata
xhr.open() 发起请求，可以是get、post方式

xhr.setRequestHeader() 设置请求头

xhr.send() 发送请求主体get方式使用xhr.send(null)

xhr.onreadystatechange = function () {} 监听响应状态

0.创建异步对象，但是还没有真正的去请求；
1.调用send方法，正在发送
2.请求一接受
3.请求处理
4.请求完成，切响应已就绪 可以使用
响应报文
status
200 ok
404 未找到页面
报文行：响应状态码 响应状态信息
报文头：服务器返回给客户端的一些额外信息
报文头：服务器返回给客户端的数据 responseText：普通字符串

responseXML：符合xml格式的字符串

post请求
get请求
注GET和POST请求方式的差异

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send('name=itcast&age=10')

4、POST需要设置

Content-type:application/x-www-form-urlencoded

json的格式
转换成数组 JSON.parse（）
准换成字符串 JSON.stringify（）