XMLHttpRequest 和 AJAX 2

對于Ajax，肯定很多小夥伴都聽過甚至用過了，那麼沒聽過的也不用着急，本文會對Ajax進行講解，其次，一定還有一些人隻用過JQuery封裝好了的Ajax卻對原生的Ajax并不了解，那麼也不用着急，本文從最基本的Ajax開始講起，然後最後會盡可能得模仿JQuery對其進行封裝，讓我剛才提到的兩類人能對Ajax有進一步的了解。

一、什麼是Ajax

Ajax（Asynchronous JavaScript And XML）是2005年新出現的技術，它的出現是為了解決這樣一個場景：整個頁面中，隻有一小部分的資料需要進行更新，按照傳統的前後端互動，我們需要向伺服器請求該網頁的所有資料，然後再在用戶端重新渲染，這無疑是非常低效的操作。是以，Ajax就可以做到隻向伺服器請求我們想要的那一小部分資料，而不用請求全部資料，進而在重新整理整個頁面的前提下更新那部分的資料。

舉個例子，我們去飯店吃飯，然後點了一桌子菜，後來發現其中有一道菜太鹹了，是以我們隻需要讓服務員端回去給廚師重新做這一道菜再拿回來就行了。

在這個例子中的人、物對比Ajax的關系如下表：

吃飯事件	資料更新
我們	用戶端
菜品	頁面所有的資料
服務員	ajax對象
廚師	伺服器

當我們發現有一道菜太鹹了，不需要讓廚師把所有的菜重新做一遍，隻要讓服務員拿這一道菜回去給廚師重做這一操作就相當于讓ajax對象向後端請求那一小部分資料再拿回來更新頁面而無需重新整理整個頁面。

二、Ajax的優缺點

了解了Ajax的作用和定義，我們再來看看它的優缺點

（1）優點

1. 浏覽器預設支援（一般浏覽器都是支援JavaScript的）
2. 提高使用者體驗（不需要重新整理整個頁面，而隻需要局部重新整理）
3. 提高頁面的性能（隻需要請求部分資料，是以資料量就明顯下降了）

（2）缺點

1. 破壞了浏覽器的前進和後退功能（Ajax不會改變網頁URL，是以不會在浏覽器記錄前後頁面）
2. 對搜尋引擎的支援較弱（搜尋引擎無法監測到JS引起的資料變化）

三、Ajax的使用

Ajax的基本流程：建立XHR對象 => 發送資料 => 接收資料

（1）狀态碼

既然Ajax涉及到前後端的資料互動，那麼我們就先來簡單的看一下幾種類型的狀态碼，如下表：

狀态碼	含義
100 ~ 199	連接配接繼續
200 ~ 299	各種成功的請求
300 ~ 399	重定向
400 ~ 499	用戶端錯誤
500 ~ 599	服務端錯誤

（2）xhr的基本使用

在使用xhr之前，我們要建立一個xhr的執行個體對象

let xhr = new XMLHttpRequest()
           

然後再調用xhr對象上的 

open()

 方法，表示建立一個請求。

open()

 方法接收三個參數：

• 第一個參數： 請求的類型（例如get 、post）
• 第二個參數： 請求的URL
• 第三個參數： 是否異步發送請求（預設為true）

// 建立了一個Ajax請求
xhr.open('get', 'example.php', 'true')
           

光調用了 

open()

 方法還不夠，它隻是建立了一個請求，但還沒有發送請求，是以我們還要調用xhr對象上的另一個方法，即 

send()

 方法，表示将請求發送給目标URL

send()

 方法接收一個參數：

• 第一個參數： 作為請求主體發送的資料（例如post請求攜帶的資料）

// 我們上面建立的是get請求，是以send()方法無需傳參
xhr.send()
           

請求發送出去後，用戶端需要接收伺服器響應回來的資料，xhr對象中有一些屬性，它們存儲着服務端傳回來的一些資料資訊，如下表所示

屬性名
responseText	服務端傳回的文本資訊
responseXML	服務端傳回的XML DOM文檔
status	HTTP狀态碼
statusText	HTTP狀态碼說明
readyState	xhr對象的請求響應階段

既然我們要擷取服務端傳回的資料，我們就要知道服務端是何時傳回資料的，這就可以通過上面表格中的 

readyState

 屬性來判斷了

readyState

 屬性一共有5個值，分别表示不同的請求響應階段：

• 0： 還未建立請求，即未調用 

  open()

   方法
• 1： 已調用 

  open()

   方法，但未發送 

  send()

• 2： 已調用 

  send()

   方法，但未接收到響應
• 3： 已接收到部分響應
• 4： 已接收到全部的響應

同時，xhr對象可以綁定一個 

readystatechange

 事件，每當 

readyState

 屬性發生改變，都會觸發該事件，是以，該事件在一次請求中會被多次觸發

xhr.onreadystatechange = function() {
 console.log('readyState屬性發生改變了')
}
           

是以，我們可以在 

readystatechange

 事件中判斷一下 

readyState

 屬性是否為 

4

，即是否已經接收所有的響應，然後還可以再繼續判斷一下 

status

 屬性，看看狀态碼是否為

200

，當上述都成立了，我們再去 

responseText

 屬性 或 

responseXML

 屬性中擷取響應資料

xhr.onreadystatechange = function() {
 // 判斷是否已接收所有響應
 if(xhr.readyState === 4) {
  // 判斷狀态碼是否為200
  if(xhr.status === 200) {
   console.log(xhr.responseText)
  }
 }
}
           

（3）發送get請求

上面也講解了Ajax請求的簡單應用，同時也是拿 

get

 請求來舉得例子，是以這裡我就不多做說明，唯一要講的就是，get請求所攜帶的資料是明文的，大小隻有4k左右，而且它是寫在URL的 

?

 後面的，例如這樣 

example.php?query=4&em=0

，是以若是我們要在發送get請求時攜帶資料，隻需要在調用 

open()

 方法時，将資料寫在第二個參數的URL的 

?

後面即可

直接來寫一次完整的 

get

 請求，代碼如下：

let xhr = new XMLHttpRequest()
xhr.open('get', 'example.php?query=4&em=0')
xhr.send()
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }
    }
}
           

（4）發送post請求

發送post請求的過程幾乎和get請求一樣，唯一不一樣的是資料的傳遞。大家都知道post請求的資料是放在請求體中的，是以我們需要調用xhr對象上的 

setRequestHeader()

 方法來模仿表單送出時的内容類型

該方法傳入的參數比較固定，代碼如下

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
           

然後我們上面也說過，

send()

 方法接收的一個參數是請求主體發送的資料，是以我們的post請求要發送的資料就要作為該方法的參數，代碼如下：

xhr.send('query=4&em=0')
           

那我們來看一次完整的post請求是怎麼樣的吧，代碼如下：

let xhr = new XMLHttpRequest()
xhr.open('post', 'example.php')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('query=4&em=0')
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }
    }
}
           

四、封裝Ajax

文章開頭提到，JQuery早已對Ajax請求進行了成熟的封裝，是以我們可以借鑒它，甚至盡可能地去模仿它進行封裝，在這之前，我們得先了解JQuery中Ajax的使用

（1）JQuery中的Ajax

這裡我找來了幾段使用JQuery發送Ajax請求的代碼，如下所示：

• 發送get請求

$.get('example.php', {query: 4, em: 0}, function(data, status, xhr) {
 console.log(`
  傳回的資料為${data}
  傳回的狀态為${status}
  傳回xhr對象為${xhr}
 `)
}, 'json')
           

這段代碼發送了一個 

get

 請求，攜帶的參數有 

query

 值為 

4

 、

em

，規定傳回的資料類型為 

json

，同時設定了一個回調函數用于接收請求傳回的資料、狀态和xhr對象

• 發送post請求

$.post('example.php', {query: 4, em: 0}, function(data, status, xhr) {
 console.log(`
  傳回的資料為${data}
  傳回的狀态為${status}
  傳回xhr對象為${xhr}
 `)
}, 'json')
           

post

query

4

em

json

• 綜合方法

// 該方法既可以發送get請求又可以發送post請求
$.ajax({
 url: 'example.php', // 請求的URL
 type: 'get', //請求類型,若為post,則表示發送post請求
 data: {query: 4, em: 0},     // 請求攜帶資料
 dataType: 'json',  // 接收的資料類型
 isAsync: true     // 是否異步請求
})
.then(data => {
 console.log(`請求成功，資料為${data}`)
})
.catch(err => {
 console.log(`請求失敗，狀态為${err}`)
})
           

其調用的是一個綜合的方法，傳入的參數是一個對象，對象中傳入多個參數。這段代碼是發送了一個 

get

 請求，位址為 

example.php

，攜帶的參數有 

query

4

em

 值為

，所接收傳回資料的類型為 

json

，請求為異步請求

特别的是，該方法的回調函數是通過 

promise

 實作的，即該方法傳回一個 

promise

 對象，在 

then

 函數中處理請求成功的情況，在 

catch

 函數中處理請求失敗的情況

若沒有了解過 

promise

 的小夥伴建議先花幾分鐘了解一下，因為這是異步程式設計最常用的一個文法，下面放上文章連結——深入了解Promise對象，寫出優雅的回調代碼，告别回調地獄

接下來我們就針對上述給出的例子，逐個封裝

（2）封裝準備工作

因為 

XMLHttpRequest

 對象有一定的相容性，是以我們在封裝ajax方法之前可以先封裝一個方法用來動态建立一個相容性稍微好點的XHR對象（其中主要是相容IE5和IE6）

我們都知道JQuery都是将方法封裝在一個名為 

$

 的對象中的，我們也這麼做

let $ = {
 createXHR: function() {
  // 若浏覽器支援，則建立XMLHttpRequest對象
  if(window.XMLHttpRequest) {
   return new XMLHttpRequest()
  } 
  // 若不支援，則建立ActiveXobject對象
  else {
   return new ActiveXObject()
  } 
 }
}
           

（3）封裝$.get方法

首先查閱JQuery的 

get

 方法可知，其接收四個參數：URL、data、callback、dataType，分别表示請求的url位址、攜帶的參數、成功回調函數、傳回資料的類型

let $ = {
 // 動态生成XHR對象的方法
 createXHR: function() {
  if(window.XMLHttpRequest) {
   return new XMLHttpRequest()
  } else {
   return new ActiveXObject()
  } 
 },
 get: function(url, data, callback, dataType) {
  // 避免dataType大小寫的問題
  let dataType = dataType.toLowerCase()
  // 如果有傳入data，則在url後面跟上參數
  if(data) {
   url += '?'
   Object.keys(data).forEach(key => url += `${key}=${data[key]}&`)
   url = url.slice(0, -1)
  }
  // 調用我們封裝的方法生成XHR對象
  let xhr = this.createXHR()
  // 建立get請求
  xhr.open('get', url)
  // 發送請求
  xhr.send()
  xhr.onreadystatechange = function() {
   if(xhr.readyState === 4) {
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
     // 若dataType為json，則将傳回的資料通過JSON.parse格式化
     let res = dataType === 'json' ? JSON.parse(xhr.responseText) : xhr.responseText
     // 調用回調函數，并把參數傳進去
     callback(res, xhr.status, xhr)
    }
   }
  }
 },
}
           

（4）封裝$.post方法

JQuery的 

post

 方法傳入的參數跟 

get

 方法一樣，隻不過其内部的實作有略微的差別，就是攜帶參數的發送不一樣，是以直接來看代碼吧

let $ = {
 // 動态生成XHR對象的方法
 createXHR: function() {
  if(window.XMLHttpRequest) {
   return new XMLHttpRequest()
  } else {
   return new ActiveXObject()
  } 
 },
 post: function(url, data, callback, dataType) {
  // 避免dataType大小寫的問題
  let dataType = dataType.toLowerCase()
  // 調用我們封裝的方法動态生成XHR對象
  let xhr = this.createXHR()

  let str = ''
  // 若傳入參數，則将參數序列化
  if(data) {
   Object.keys(data).forEach(key => str += `${key}=${data[key]}&`)
   str = str.slice(0, -1)
  }
  // 設定頭部資訊
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  // 發送請求，并攜帶參數
  xhr.send(str)
  xhr.onreadystatechange = function() {
   if(xhr.readyState === 4) {
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
     // 若dataType為json，則将傳回的資料通過JSON.parse格式化
     let res = dataType === 'json' ? JSON.parse(xhr.responseText) : xhr.responseText
     // 調用回調函數，把對應參數傳進去
     callback(res, xhr.status, xhr)
    }
   }
  }
 }
}
           

（5）封裝$.ajax方法

在JQuery中還有一個 

ajax

 方法，其既可以發送 

get

 請求，也可以發送 

post

 請求，該方法可傳入多種參數，且支援 

promise

 處理回調函數

let $ = {
 createXHR: function() {
  if(window.XMLHttpRequest) {
   return new XMLHttpRequest()
  } else {
   return new ActiveXObject()
  } 
 },
 ajax: function(params) {
  // 初始化參數
  let type = params.type ? params.type.toLowerCase() : 'get'
  let isAsync = params.isAsync ? params.isAsync : 'true'
  let url = params.url
  let data = params.data ? params.data : {}
  let dataType = params.dataType.toLowerCase()
  // 用我們封裝的方法動态生成XHR對象
  let xhr = this.createXHR()
  
  let str = ''
  
  // 拼接字元串
  Object.keys(data).forEach(key => str += `${key}=${data[key]}&`)
  str = str.slice(0, -1)
  // 如果是get請求就把攜帶參數拼接到url後面
  if(type === 'get') url += `?${str}`;
  // 傳回promise對象，便于外部then和catch函數調用
  return new Promise((resolve, reject) => {
   // 建立請求
   xhr.open(type, url, isAsync)
   
   if(type === 'post') {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-rulencoded')
    xhr.send(str)
   } else {
    xhr.send()
   }

   xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
     if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
      let res = dataType === 'json' ? JSON.parse(xhr.responseText) : xhr.responseText
      resolve(res) // 請求成功，傳回資料
     } else {
      reject(xhr.status) // 請求失敗，傳回狀态碼
     }
    }
   }
  }) 
 }
}
           

五、Ajax的限制

預設情況下，Ajax一般隻能向同源的域發送請求，這是受到了浏覽器的同源政策的限制，關于同源政策，你們可以去看一下我以前寫過的一篇部落格，裡面寫了同源政策的定義以及解決方案——前端人員都懂的浏覽器的同源政策，以及如何進行不同源間的互相通路

了解過同源政策以後，我們來看看如何讓Ajax不受同源政策的限制而成功發送請求。CORS（跨域資源共享）要求我們在發送請求時自定義一個HTTP頭部與伺服器進行溝通，我們隻需要設定一個名為 

Origin

 的頭部，值為目前頁面的源資訊（協定、域名、端口），例如 

Origin : http://example.com

 ；然後伺服器需要設定一個名為 

Access-Control-Allow-Origin

 的響應頭部，其值為允許跨域通路的源資訊，若伺服器設定的 

Access-Control-Allow-Origin

 與我們設定的 

Origin

 相同，則表示伺服器允許我們跨域請求其資源，或者伺服器可以将 

Access-Control-Allow-Origin

 值設為 

*

，此時表示允許任何域向其發送請求并且不受同源政策的限制。

現在的大部分浏覽器幾乎都支援了在發送Ajax請求後，自動向請求頭部添加目前的源資訊

六、結束語