高級前端：詳解手寫原生Ajax的實現

點擊上方「 前端印象 」，選擇「 設爲星標 」

第一時間關注技術乾貨！

對於Ajax，確定不少小夥伴都聽過甚至用過了，那麼沒聽過的也不用着急，本文會對Ajax進行講解，其次，必定還有一些人只用過JQuery封裝好了的Ajax卻對原生的Ajax並不瞭解，那麼也不用着急，本文從最基本的Ajax開始講起，而後最後會盡量得模仿JQuery對其進行封裝，讓我剛纔提到的兩類人能對Ajax有進一步的瞭解。

1、什麼是Ajax

Ajax（Asynchronous JavaScript And XML）是2005年新出現的技術，它的出現是爲了解決這樣一個場景：整個頁面中，只有一小部分的數據須要進行更新，按照傳統的先後端交互，咱們須要向服務器請求該網頁的全部數據，而後再在客戶端從新渲染，這無疑是很是低效的操做。所以，Ajax就能夠作到只向服務器請求咱們想要的那一小部分數據，而不用請求所有數據，進而在刷新整個頁面的前提下更新那部分的數據。

舉個例子，咱們去飯店吃飯，而後點了一桌子菜，後來發現其中有一道菜太鹹了，所以咱們只須要讓服務員端回去給廚師從新作這一道菜再拿回來就好了。

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

吃飯事件	數據更新
咱們	客戶端
菜品	頁面全部的數據
服務員	ajax對象
廚師	服務器

當咱們發現有一道菜太鹹了，不須要讓廚師把全部的菜從新作一遍，只要讓服務員拿這一道菜回去給廚師重作這一操做就至關於讓ajax對象向後端請求那一小部分數據再拿回來更新頁面而無需刷新整個頁面。

2、Ajax的優缺點

瞭解了Ajax的做用和定義，咱們再來看看它的優缺點

（1）優勢

1. 瀏覽器默認支持（通常瀏覽器都是支持JavaScript的）
2. 提升用戶體驗（不須要刷新整個頁面，而只須要局部刷新）
3. 提升頁面的性能（只須要請求部分數據，因此數據量就明顯降低了）

（2）缺點

1. 破壞了瀏覽器的前進和後退功能（Ajax不會改變網頁URL，所以不會在瀏覽器記錄先後頁面）
2. 對搜索引擎的支持較弱（搜索引擎沒法監測到JS引發的數據變化）

3、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);
        }
    }
}

4、封裝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 值爲 0，規定返回的數據類型爲 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 值爲 0，規定返回的數據類型爲 json，同時設定了一個回調函數用於接收請求返回的數據、狀態和xhr對象

• 綜合方法

// 該方法既能夠發送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 值爲 0，所接收返回數據的類型爲 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) // 請求失敗，返回狀態碼
     }
    }
   }
  }) 
 }
}

5、Ajax的約束

默認狀況下，Ajax通常只能向同源的域發送請求，這是受到了瀏覽器的同源策略的限制，關於同源策略，大家能夠去看一下我之前寫過的一篇博客，裏面寫了同源策略的定義以及解決方案——前端人員都懂的瀏覽器的同源策略，以及如何進行不一樣源間的相互訪問

瞭解過同源策略之後，咱們來看看如何讓Ajax不受同源策略的限制而成功發送請求。CORS（跨域資源共享）要求咱們在發送請求時自定義一個HTTP頭部與服務器進行溝通，咱們只須要設置一個名爲 Origin 的頭部，值爲當前頁面的源信息（協議、域名、端口），例如 Origin : http://example.com ；而後服務器須要設置一個名爲 Access-Control-Allow-Origin 的響應頭部，其值爲容許跨域訪問的源信息，若服務器設置的 Access-Control-Allow-Origin 與咱們設置的 Origin 相同，則表示服務器容許咱們跨域請求其資源，或者服務器能夠將 Access-Control-Allow-Origin 值設爲 *，此時表示容許任何域向其發送請求而且不受同源策略的限制。

如今的大部分瀏覽器幾乎都支持了在發送Ajax請求後，自動向請求頭部添加當前的源信息

6、結束語

建議大家好好了解JS的Ajax的使用，這樣在面試中問起來你還能說出個一二三，而且有時候面試官還會直接讓你親手寫一個簡單的Ajax請求呢，而不會讓你使用JQuery的。看了本文，想必面試官若是讓你當場封裝一個相似JQuery的Ajax請求，你也不會手足無措呢

 

END

❤支持三連

1.看到這裏了就點個在看支持下吧，你的「在看」是我創做的動力。

2.關注公衆號前端巔峯，「一塊兒交流進步」！

3.關注公衆號回覆【加羣】，拉你進技術交流羣一塊兒玩轉前端。

本文分享自微信公衆號 - 前端巔峯（Java-Script-）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。