Ajax 介紹篇

1. 開局一張圖

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

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

先引用 Ajax 的英文原義：

Asynchronous JavaScript and XML

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

2. web 交互的前期

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

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

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

也許這個時候你會覺得奇怪，交互一次就需要刷新一次？這未免也太過笨拙！是的，如你所見，在 Ajax 之前，HTTP 請求對應(yīng)著頁面，一次 HTTP 請求也就意味著需要請求一個頁面。

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

3. Ajax 的由來

Ajax 最早要追溯到 2005 年，由 Jesse James Garrett 首先提出。當(dāng)時 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ù)以后，前后端就可以不需要重載頁面就能夠直接進行交互，能夠迅速的把信息反映在用戶界面上。

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

4. 什么是 Ajax？

說這么多，那么什么是 Ajax 呢？

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

5. Ajax 的工作原理

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

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

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

Ajax 工作過程大致如下：

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

6. Ajax 的優(yōu)點

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

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

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

7. Ajax 的缺點

Ajax 的缺點主要有如下幾點：

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

8. 小結(jié)

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