ajax是一種技術(shù)方案，但并不是一種新技術(shù)。它依賴(lài)的是現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴(lài)是瀏覽器提供的XMLHttpRequest對(duì)象，是這個(gè)對(duì)象使得瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)。 實(shí)現(xiàn)在頁(yè)面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互。

XMLHttpRequest

Ajax是一種技術(shù)方案，但并不是一種新技術(shù)。它依賴(lài)的是現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴(lài)是瀏覽器提供的 XMLHttpRequest對(duì)象，是這個(gè)對(duì)象使得瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)。

所以用一句話(huà)來(lái)總結(jié)兩者的關(guān)系，就是：我們使用XMLHttpRequest對(duì)象來(lái)發(fā)送一個(gè)Ajax請(qǐng)求。

創(chuàng)建XMLHttpRequest對(duì)象

一般使用new關(guān)鍵字進(jìn)行創(chuàng)建，然后賦值給一個(gè)變量，

var xhr = new XMLHttpRequest();

XMLHttpRequest對(duì)象的常用屬性

1、readyState
只讀屬性，表示XMLHttpRequest請(qǐng)求當(dāng)前所處的狀態(tài)，共有五個(gè)數(shù)字值（0，1，2，3，4，5）。

• 0：表示XMLHttpRequest實(shí)例已經(jīng)生成，但是open()方法還沒(méi)有被調(diào)用。
• 1：表示已調(diào)用open方法，但還未調(diào)用send方法（請(qǐng)求還未被發(fā)送出去），仍然可以使用setRequestHeader()，設(shè)定HTTP請(qǐng)求的頭信息。
• 2：表示send方法已調(diào)用，數(shù)據(jù)已發(fā)送，并且服務(wù)器接收到了請(qǐng)求。
• 3：表示服務(wù)器正在傳輸數(shù)據(jù)。
• 4：表示數(shù)據(jù)傳輸完成。

2、status
只讀屬性，表示本次請(qǐng)求所得到的HTTP狀態(tài)碼，返回一個(gè)整數(shù)。一般來(lái)說(shuō)，如果通信成功的話(huà)，這個(gè)狀態(tài)碼是200。常用的有如下幾個(gè)狀態(tài)碼:

• 200：OK（正常訪(fǎng)問(wèn)）；
• 301：Moved Permanently（永久移動(dòng)）；
• 302：Moved temporarily（暫時(shí)移動(dòng)）；
• 304：Not Modified（未修改）；
• 307：Temporary Redirect（暫時(shí)重定向）；
• 401：Unauthorized （未授權(quán)）；
• 403：Forbidden（禁止訪(fǎng)問(wèn)）；
• 404：Not Found（未找到該網(wǎng)址）；
• 500：Internal Server Error （找到網(wǎng)址但服務(wù)器發(fā)生錯(cuò)誤）；
  基本上，只有200和304的狀態(tài)碼，表示服務(wù)器返回是正常狀態(tài)。

XMLHttpRequest對(duì)象的常用方法

1. open()

XMLHttpRequest對(duì)象的open方法用于指定發(fā)送HTTP請(qǐng)求的參數(shù)，常用的有三個(gè)參數(shù)：

第一個(gè)參數(shù)：請(qǐng)求的類(lèi)型（常用get或者post）；

第二個(gè)參數(shù)是接口名和：這里要分兩種情況：

get請(qǐng)求時(shí)：接口名+請(qǐng)求參數(shù)（鍵值對(duì)形式）；post請(qǐng)求時(shí)：只需要接口名（需要傳遞的參數(shù)寫(xiě)在send方法里）；

第三個(gè)參數(shù)：一個(gè)布爾值，指定是否異步（true為異步，false為同步，通常為true，默認(rèn)為true）；

2. send()

send方法用于實(shí)際發(fā)出HTTP請(qǐng)求。如果不帶參數(shù)，就表示HTTP請(qǐng)求只包含頭信息，也就是只有一個(gè)URL，典型例子就是GET請(qǐng)求；如果帶有參數(shù)，就表示除了頭信息，還帶有包含具體數(shù)據(jù)的信息體，典型例子就是POST請(qǐng)求。

Ajax 的get寫(xiě)法

var xhr = new XMLHttpRequest()
xhr.open('GET', '請(qǐng)求地址', true)
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4) {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            console.log(xhr.responseText)
        } else {
            console.log('服務(wù)器異常')
        }
    }
}
xhr.onerror = function(){
    console.log('服務(wù)器異常')
}
xhr.send()

Ajax 的post寫(xiě)法

 var xhr = new XMLHttpRequest()
  xhr.timeout = 3000        //可選，設(shè)置xhr請(qǐng)求的超時(shí)時(shí)間
  xhr.open('POST', '/register', true)

  xhr.onload = function(e) { 
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      console.log(this.responseText)
    }
  }
    //可選
  xhr.ontimeout = function(e) { 
        console.log('請(qǐng)求超時(shí)')
  }

  //可選
  xhr.onerror = function(e) {
      console.log('連接失敗')
  }
  //可選
  xhr.upload.onprogress = function(e) {
      //如果是上傳文件，可以獲取上傳進(jìn)度
  }

  xhr.send('username=jirengu&password=123456')