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請求方式的差別

一、GET沒有請求主體，使用xhr.send(null)

二、GET能夠經過在請求URL上添加請求參數

三、POST能夠經過xhr.send('name=itcast&age=10')

四、POST須要設置

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

json的格式轉換成數組 JSON.parse（）準換成字符串 JSON.stringify（）