對於Ajax，肯定很多小夥伴都聽過甚至用過了，那麼沒聽過的也不用著急，本文會對Ajax進行講解，其次，一定還有一些人只用過JQuery封裝好了的Ajax卻對原生的Ajax並不瞭解，那麼也不用著急，本文從最基本的Ajax開始講起，然後最後會盡可能得模仿JQuery對其進行封裝，讓我剛才提到的兩類人能對Ajax有進一步的瞭解。
公眾號：Lpyexplore的程式設計小屋
關注我，不定時更新前端面試題
關注還有更多電子書、前端面試題、資料結構與演演算法程式碼等你來拿
Ajax（Asynchronous JavaScript And XML）是2005年新出現的技術，它的出現是為了解決這樣一個場景：整個頁面中，只有一小部分的資料需要進行更新，按照傳統的前後端互動，我們需要向伺服器請求該網頁的所有資料，然後再在使用者端重新渲染，這無疑是非常低效的操作。因此，Ajax就可以做到只向伺服器請求我們想要的那一小部分資料，而不用請求全部資料，進而在重新整理整個頁面的前提下更新那部分的資料。
舉個例子，我們去飯店吃飯，然後點了一桌子菜，後來發現其中有一道菜太鹹了，因此我們只需要讓服務員端回去給廚師重新做這一道菜再拿回來就行了。
在這個例子中的人、物對比Ajax的關係如下表：
| 吃飯事件 | 資料更新 |
|---|---|
| 我們 | 使用者端 |
| 菜品 | 頁面所有的資料 |
| 服務員 | ajax物件 |
| 廚師 | 伺服器 |
當我們發現有一道菜太鹹了，不需要讓廚師把所有的菜重新做一遍，只要讓服務員拿這一道菜回去給廚師重做這一操作就相當於讓ajax物件向後端請求那一小部分資料再拿回來更新頁面而無需重新整理整個頁面。
瞭解了Ajax的作用和定義，我們再來看看它的優缺點
Ajax的基本流程：建立XHR物件 => 傳送資料 => 接收資料
既然Ajax涉及到前後端的資料互動，那麼我們就先來簡單的看一下幾種型別的狀態碼，如下表：
| 狀態碼 | 含義 |
|---|---|
| 100 ~ 199 | 連線繼續 |
| 200 ~ 299 | 各種成功的請求 |
| 300 ~ 399 | 重定向 |
| 400 ~ 499 | 使用者端錯誤 |
| 500 ~ 599 | 伺服器端錯誤 |
在使用xhr之前，我們要建立一個xhr的範例物件
let xhr = new XMLHttpRequest()
然後再呼叫xhr物件上的 open() 方法，表示建立一個請求。
open() 方法接收三個引數：
// 建立了一個Ajax請求
xhr.open('get', 'example.php', 'true')
光呼叫了 open() 方法還不夠，它只是建立了一個請求，但還沒有傳送請求，因此我們還要呼叫xhr物件上的另一個方法，即 send() 方法，表示將請求傳送給目標URL
send() 方法接收一個引數：
// 我們上面建立的是get請求，因此send()方法無需傳參
xhr.send()
請求傳送出去後，使用者端需要接收伺服器響應回來的資料，xhr物件中有一些屬性，它們儲存著伺服器端返回來的一些資料資訊，如下表所示
| 屬性名 | 含義 |
|---|---|
| responseText | 伺服器端返回的文字資訊 |
| responseXML | 伺服器端返回的XML DOM檔案 |
| status | HTTP狀態碼 |
| statusText | HTTP狀態碼說明 |
| readyState | xhr物件的請求響應階段 |
既然我們要獲取伺服器端返回的資料，我們就要知道伺服器端是何時返回資料的，這就可以通過上面表格中的 readyState 屬性來判斷了
readyState 屬性一共有5個值，分別表示不同的請求響應階段：
open() 方法open() 方法，但未傳送 send() 方法send() 方法，但未接收到響應同時，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)
}
}
}
上面也講解了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);
}
}
}
傳送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);
}
}
}
文章開頭提到，JQuery早已對Ajax請求進行了成熟的封裝，所以我們可以借鑑它，甚至儘可能地去模仿它進行封裝，在這之前，我們得先了解JQuery中Ajax的使用
這裡我找來了幾段使用JQuery傳送Ajax請求的程式碼，如下所示：
$.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('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物件，寫出優雅的回撥程式碼，告別回撥地獄
接下來我們就針對上述給出的例子，逐個封裝
因為 XMLHttpRequest 物件有一定的相容性，因此我們在封裝ajax方法之前可以先封裝一個方法用來動態建立一個相容性稍微好點的XHR物件（其中主要是相容IE5和IE6）
我們都知道JQuery都是將方法封裝在一個名為 $ 的物件中的，我們也這麼做
let $ = {
createXHR: function() {
// 若瀏覽器支援，則建立XMLHttpRequest物件
if(window.XMLHttpRequest) {
return new XMLHttpRequest()
}
// 若不支援，則建立ActiveXobject物件
else {
return new ActiveXObject()
}
}
}
首先查閱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)
}
}
}
},
}
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)
}
}
}
}
}
在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不受同源策略的限制而成功傳送請求。CORS（跨域資源共用）要求我們在傳送請求時自定義一個HTTP頭部與伺服器進行溝通，我們只需要設定一個名為 Origin 的頭部，值為當前頁面的源資訊（協定、域名、埠），例如 Origin : http://example.com ；然後伺服器需要設定一個名為 Access-Control-Allow-Origin 的響應頭部，其值為允許跨域存取的源資訊，若伺服器設定的 Access-Control-Allow-Origin 與我們設定的 Origin 相同，則表示伺服器允許我們跨域請求其資源，或者伺服器可以將 Access-Control-Allow-Origin 值設為 *，此時表示允許任何域向其傳送請求並且不受同源策略的限制。
現在的大部分瀏覽器幾乎都支援了在傳送Ajax請求後，自動向請求頭部新增當前的源資訊
建議你們好好了解JS的Ajax的使用，這樣在面試中問起來你還能說出個一二三，並且有時候面試官還會直接讓你親手寫一個簡單的Ajax請求呢，而不會讓你使用JQuery的。看了本文，想必面試官如果讓你當場封裝一個類似JQuery的Ajax請求，你也不會手足無措呢
歡迎關注公眾號：Lpyexplore的程式設計小屋 ， 不定時更新前端面試題，與我一起學習前端，早日斬獲大廠Offer