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

公眾號：Lpyexplore的編程小屋
關注我，不定時更新前端面試題
關注還有更多電子書、前端面試題、資料結構與演算法代碼等你來拿

一、什么是Ajax

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

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

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

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

二、Ajax的優缺點

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

（1）優點

1. 瀏覽器默認支持（一般瀏覽器都是支持JavaScript的）
2. 提高用戶體驗（不需要重繪整個頁面，而只需要區域重繪）
3. 提高頁面的性能（只需要請求部分資料，所以資料量就明顯下降了）

（2）缺點

1. 破壞了瀏覽器的前進和后退功能（Ajax不會改變網頁URL，因此不會在瀏覽器記錄前后頁面）
2. 對搜索引擎的支持較弱（搜索引擎無法監測到JS引起的資料變化）

三、Ajax的使用

Ajax的基本流程：創建XHR物件 => 發送資料 => 接收資料

（1）狀態碼

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

（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物件中有一些屬性，它們存盤著服務端回傳來的一些資料資訊，如下表所示

既然我們要獲取服務端回傳的資料，我們就要知道服務端是何時回傳資料的，這就可以通過上面表格中的 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 值為 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) // 請求失敗，回傳狀態碼
					}
				}
			}
		})	
	}
}

五、Ajax的約束

默認情況下，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