異步編程Ajax的詳解，并對其進行封裝整理

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

不定時有送書活動，記得關注~

關注后回復對應文字領取：【面試題】、【前端必看電子書】、【數據結構與算法完整代碼】、【前端技術交流群】

異步編程——Ajax

一、什么是Ajax

二、Ajax的優缺點

（1）優點

（2）缺點

三、Ajax的使用

（1）狀態碼

（2）xhr的基本使用

（3）發送get請求

（4）發送post請求

四、封裝Ajax

（1）JQuery中的Ajax

（2）封裝準備工作

（3）封裝$.get方法

（4）封裝$.post方法

（5）封裝$.ajax方法

五、Ajax的約束

六、結束語

一、什么是Ajax

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

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

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

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

二、Ajax的優缺點

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

（1）優點

瀏覽器默認支持（一般瀏覽器都是支持JavaScript的）

提高用戶體驗（不需要刷新整個頁面，而只需要局部刷新）

提高頁面的性能（只需要請求部分數據，所以數據量就明顯下降了）

（2）缺點

破壞了瀏覽器的前進和后退功能（Ajax不會改變網頁URL，因此不會在瀏覽器記錄前后頁面）

對搜索引擎的支持較弱（搜索引擎無法監測到JS引起的數據變化）

三、Ajax的使用

Ajax的基本流程：創建XHR對象 => 發送數據 => 接收數據

（1）狀態碼

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

（2）xhr的基本使用

在使用xhr之前，我們要創建一個xhr的實例對象

let xhr = new XMLHttpRequest()

1

然后再調用xhr對象上的 open() 方法，表示創建一個請求。

open() 方法接收三個參數：

第一個參數： 請求的類型（例如get 、post）

第二個參數： 請求的URL

第三個參數： 是否異步發送請求（默認為true）

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

1

2

光調用了 open() 方法還不夠，它只是創建了一個請求，但還沒有發送請求，因此我們還要調用xhr對象上的另一個方法，即 send() 方法，表示將請求發送給目標URL

send() 方法接收一個參數：

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

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

1

2

請求發送出去后，客戶端需要接收服務器響應回來的數據，xhr對象中有一些屬性，它們存儲著服務端返回來的一些數據信息，如下表所示

既然我們要獲取服務端返回的數據，我們就要知道服務端是何時返回數據的，這就可以通過上面表格中的 readyState 屬性來判斷了

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

0： 還未創建請求，即未調用 open() 方法

1： 已調用 open() 方法，但未發送 send() 方法

2： 已調用 send() 方法，但未接收到響應

3： 已接收到部分響應

4： 已接收到全部的響應

同時，xhr對象可以綁定一個 readystatechange 事件，每當 readyState 屬性發生改變，都會觸發該事件，因此，該事件在一次請求中會被多次觸發

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

1

2

3

所以，我們可以在 readystatechange 事件中判斷一下 readyState 屬性是否為 4，即是否已經接收所有的響應，然后還可以再繼續判斷一下 status 屬性，看看狀態碼是否為 200，當上述都成立了，我們再去 responseText 屬性 或 responseXML 屬性中獲取響應數據

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

1

2

3

4

5

6

7

8

9

（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); } } }

1

2

3

4

5

6

7

8

9

10

（4）發送post請求

發送post請求的過程幾乎和get請求一樣，唯一不一樣的是數據的傳遞。大家都知道post請求的數據是放在請求體中的，因此我們需要調用xhr對象上的 setRequestHeader() 方法來模仿表單提交時的內容類型

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

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

1

然后我們上面也說過，send() 方法接收的一個參數是請求主體發送的數據，所以我們的post請求要發送的數據就要作為該方法的參數，代碼如下：

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

1

那我們來看一次完整的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); } } }

1

2

3

4

5

6

7

8

9

10

11

四、封裝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')

1

2

3

4

5

6

7

這段代碼發送了一個 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')

1

2

3

4

5

6

7

這段代碼發送了一個 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}`) })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

其調用的是一個綜合的方法，傳入的參數是一個對象，對象中傳入多個參數。這段代碼是發送了一個 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() } } }

1

2

3

4

5

6

7

8

9

10

11

12

（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) } } } }, }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

（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) } } } } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

（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) // 請求失敗，返回狀態碼 } } } }) } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

五、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請求，你也不會手足無措呢

Ajax jQuery

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。