Ajax 介紹篇

1. 開局一張圖

沒(méi)錯(cuò)，這正是我們接下來(lái)要講的 Ajax 的直接效果圖。正如圖片場(chǎng)景所示，前端在點(diǎn)擊按鈕的時(shí)候，可以觸發(fā)網(wǎng)絡(luò)請(qǐng)求（具體可以看 Gif 圖右邊）。當(dāng)后端返回隨機(jī)數(shù)據(jù)時(shí)，前端獲取數(shù)據(jù)并顯示在網(wǎng)頁(yè)的局部位置。

相信工作于前后端的同學(xué)對(duì) Ajax 應(yīng)該不會(huì)陌生，有些經(jīng)驗(yàn)的程序員，對(duì)于上圖所示的前后端交互也早已習(xí)以為常。在我們?nèi)粘９ぷ髦?，Ajax 絕對(duì)是我們用來(lái)進(jìn)行網(wǎng)絡(luò)交互的重要利器。并且在前后端分離的實(shí)踐中扮演著極其重要的角色。

先引用 Ajax 的英文原義：

Asynchronous JavaScript and XML

直觀可見(jiàn)，Ajax就是這個(gè)英文的首字母縮寫而成。意思就是異步的 JavaScript 和 XML，換言之，我們也可以用 JavaScript 執(zhí)行異步網(wǎng)絡(luò)請(qǐng)求。

2. web 交互的前期

在 Ajax 出現(xiàn)之前，我們也有網(wǎng)頁(yè)，我們的前后端信息也需要交互，那么我們是怎么做的呢？

當(dāng)時(shí)的做法是：刷新（重載）或跳轉(zhuǎn)頁(yè)面。舉兩個(gè)例子：

• 當(dāng)我們填寫完 form 表單的時(shí)候，submit 提交表單，這個(gè)時(shí)候?yàn)g覽器會(huì)進(jìn)行頁(yè)面刷新或跳轉(zhuǎn)，反饋給用戶表單提交是否成功。
• 當(dāng)我們?cè)陧?yè)面上點(diǎn)擊跳轉(zhuǎn)慕課網(wǎng)鏈接（一般是 a 標(biāo)簽，或者導(dǎo)航欄輸入），那么頁(yè)面會(huì)刷新或者跳轉(zhuǎn)到慕課網(wǎng)上去。

也許這個(gè)時(shí)候你會(huì)覺(jué)得奇怪，交互一次就需要刷新一次？這未免也太過(guò)笨拙！是的，如你所見(jiàn)，在 Ajax 之前，HTTP 請(qǐng)求對(duì)應(yīng)著頁(yè)面，一次 HTTP 請(qǐng)求也就意味著需要請(qǐng)求一個(gè)頁(yè)面。

當(dāng)然，人往高處走，總會(huì)有更加先進(jìn)的辦法來(lái)解決當(dāng)前的問(wèn)題。因此，逐漸的，我們有了 Ajax。

3. Ajax 的由來(lái)

Ajax 最早要追溯到 2005 年，由 Jesse James Garrett 首先提出。當(dāng)時(shí) Jesse James Garrett 在他的 “Ajax : new Approach to Web Applications” 一文中提出了綜合了 Html , JavaScript , XHTML , Cascading Style Sheets , The Document Object Model , XMLHttpRequest , XML 和 XSTL 等現(xiàn)有技術(shù)的新方法，取名為 Ajax 。并且使用這種技術(shù)以后，前后端就可以不需要重載頁(yè)面就能夠直接進(jìn)行交互，能夠迅速的把信息反映在用戶界面上。

雖然 Ajax 中，X 是 XML 的意思，但是前后端交互中，JSON 尤其重要，同時(shí)也擁有更多的好處（比如：更輕量）。因此，在 Ajax 中，JSON 和 XML 一樣，共同用于信息傳輸?shù)拇虬d體中。

4. 什么是 Ajax？

說(shuō)這么多，那么什么是 Ajax 呢？

簡(jiǎn)單來(lái)講，Ajax 就是 JavaScript 基于 XMLHttpRequest 對(duì)象與服務(wù)端進(jìn)行交互，向服務(wù)端發(fā)送一個(gè)請(qǐng)求，并且獲取和處理服務(wù)器返回的內(nèi)容。在這個(gè)過(guò)程中，我們可以使用 XML ，HTML 和 JSON 等格式的數(shù)據(jù)進(jìn)行交互。并且，Ajax 擁有異步特質(zhì)，我們可以在不刷新頁(yè)面的情況下，通過(guò)交互數(shù)據(jù)，在頁(yè)面上做局部的刷新等數(shù)據(jù)處理。

5. Ajax 的工作原理

Ajax 相當(dāng)于用戶端和服務(wù)端的一個(gè)中間層，用來(lái)處理異步化的數(shù)據(jù)交互。這里涉及到兩個(gè)重要的點(diǎn)：XMLHttpRequest 和 異步。

先講異步，異步指的是用戶無(wú)需等待，異步操作不會(huì)阻礙當(dāng)前用戶的活動(dòng)。在早期，對(duì)于我們的 Web 交互，每次用戶發(fā)送請(qǐng)求，都會(huì)阻塞當(dāng)前活動(dòng)，進(jìn)行頁(yè)面重載。而在服務(wù)器響應(yīng)請(qǐng)求之前，瀏覽器只能是一片空白。體驗(yàn)極其差！然而，使用異步就能夠解決這個(gè)問(wèn)題，瀏覽器端發(fā)送請(qǐng)求，但是不會(huì)阻塞用戶當(dāng)前的活動(dòng)，也不會(huì)丟棄當(dāng)前頁(yè)面，數(shù)據(jù)一樣可以進(jìn)行交互和刷新。體驗(yàn)效果極佳！

另一個(gè) XMLHttpRequest 可以說(shuō)是 Ajax 的核心技術(shù)。使用 XMLHttpRequest ，我們可以通過(guò) JavaScript 向服務(wù)端發(fā)送請(qǐng)求，并且獲取和處理服務(wù)端返回的數(shù)據(jù)，卻不會(huì)阻塞用戶活動(dòng)，而僅僅只是局部動(dòng)態(tài)更新，更加不會(huì)導(dǎo)致 web 頁(yè)面頻繁重載。

Ajax 工作過(guò)程大致如下：

1. JavaScript 通過(guò) XMLHttpRequest 向后端發(fā)起異步請(qǐng)求，可以是 get 或者 post 等；
2. 服務(wù)端接收請(qǐng)求，處理并返回?cái)?shù)據(jù)；
3. JavaScript 通過(guò) XMLHttpRequest 獲取并解析服務(wù)端返回的數(shù)據(jù)內(nèi)容；
4. JavaScript 通過(guò)動(dòng)態(tài)更新 DOM 或者執(zhí)行其他操作。

6. Ajax 的優(yōu)點(diǎn)

Ajax 技術(shù)的優(yōu)勢(shì)有如下幾點(diǎn)：

• 無(wú)刷新更新頁(yè)面。拋棄了早期重載頁(yè)面的方式，加快了請(qǐng)求的速度，提升了用戶體驗(yàn)。
• 減少客戶端的內(nèi)存消耗。采用更加輕量的數(shù)據(jù)提取做法，避免了客戶端大量的冗余請(qǐng)求，減少了不必要的內(nèi)存消耗。
• 將部分傳統(tǒng)技術(shù)中原本在服務(wù)端的工作轉(zhuǎn)移到客戶端來(lái)進(jìn)行。 使用Ajax，一些數(shù)據(jù)的處理能夠在客戶端進(jìn)行，減輕了服務(wù)端的壓力。
• 兼容性極好，幾乎所有的瀏覽器都支持。不需要額外插件或者虛擬機(jī)即可使用。

當(dāng)然，Ajax 帶來(lái)的最大的優(yōu)勢(shì)還是通過(guò)異步請(qǐng)求和處理數(shù)據(jù)的方式，取代了通過(guò)原始 Form 表單提交來(lái)更新數(shù)據(jù)及頁(yè)面的方式，從而使得我們的 Web 應(yīng)用成為了可能。

7. Ajax 的缺點(diǎn)

Ajax 的缺點(diǎn)主要有如下幾點(diǎn)：

• 破壞瀏覽器的后退與加入收藏書簽功能。這也是為大家所詬病的一點(diǎn)，因?yàn)橥ㄟ^(guò) Ajax 進(jìn)行頁(yè)面動(dòng)態(tài)更新，用戶無(wú)法回到上一頁(yè)的狀態(tài)。
• 網(wǎng)絡(luò)延遲造成用戶體驗(yàn)差。在請(qǐng)求到響應(yīng)的這段時(shí)間，可長(zhǎng)可短，在網(wǎng)絡(luò)延遲的情況下，留給用戶的就是一個(gè)頁(yè)面無(wú)反應(yīng)，造成的結(jié)果可能是用戶的體驗(yàn)極差。解決這個(gè)問(wèn)題一般是提供一個(gè) Loading 組件告訴用戶正在等待。
• Ajax 造成的競(jìng)態(tài)關(guān)系。當(dāng)然這也不是 Ajax 的鍋，異步本身就會(huì)有這個(gè)問(wèn)題。假設(shè)多個(gè) Ajax 同時(shí)更新到同一個(gè)數(shù)據(jù)，那么這個(gè)數(shù)據(jù)是按照什么規(guī)則更新呢？這就需要我們對(duì)競(jìng)態(tài)進(jìn)行一定的考量和規(guī)范了。

8. 小結(jié)

• Ajax 是一種集合了 Html , JavaScript , XHTML , Cascading Style Sheets , The Document Object Model , XMLHttpRequest , XML 和 XSTL 等現(xiàn)有技術(shù)的新方法，JavaScript 是粘合劑。
• Ajax 能夠提供一種異步請(qǐng)求數(shù)據(jù)，局部刷新頁(yè)面的辦法。
• XMLHttpRequest 是 Ajax 的核心技術(shù)，我們通過(guò)它來(lái)向服務(wù)器發(fā)起異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)。