我們?nèi)粘Ｊ褂玫幕ヂ?lián)網(wǎng)產(chǎn)品，少不了前后端數(shù)據(jù)的交互，Ajax和websocket都是數(shù)據(jù)交互的利器，那么它們分別是什么？Ajax和websocket是如何完成數(shù)據(jù)實時交互的？websocket與Ajax輪詢的區(qū)別又是什么？它們分別的使用場景有哪些？本文將會給出答案。

Ajax

Ajax，即異步JavaScript和XML，是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁實現(xiàn)異步更新，這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的部分進行加載更新。

Ajax 的優(yōu)點在于它在瀏覽器與web服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP請求），不阻塞用戶，核心對象是XMLHTTPRequest。通過這個對象，js可在不重新加載頁面的情況下與web服務(wù)器交換數(shù)據(jù)。

websocket

websocket是HTML5一種新的協(xié)議，實現(xiàn)了瀏覽器與服務(wù)器全雙工通信。其本質(zhì)是：先通過HTTP/HTTPS協(xié)議進行握手后創(chuàng)建一個用于交換數(shù)據(jù)的TCP連接，服務(wù)端與客戶端通過此TCP連接進行實時通信。

websocket最大的優(yōu)點在于——服務(wù)器和瀏覽器可以在給定的時間范圍內(nèi)的任意時刻，互相推送消息。在建立連接之后，服務(wù)器可以主動傳送數(shù)據(jù)給瀏覽器。

Ajax與websocket最大的不同在于：Ajax需要客戶端發(fā)起請求，websocket服務(wù)器和客戶端可以互相實時推送消息。

Ajax輪詢和websocket的區(qū)別

實現(xiàn)瀏覽器與服務(wù)器的實時數(shù)據(jù)交互，可以通過建立websocket，也可以通過Ajax輪詢的方式。

那么這兩種方式有什么不同呢？

1. Ajax輪詢

Ajax輪詢的原理非常簡單，就是讓瀏覽器隔幾秒就發(fā)送一次請求，詢問服務(wù)器是否有新信息，交互場景如下：

客戶端：有沒有新信息(Request)

服務(wù)端：沒有（Response）

客戶端：有沒有新信息(Request)

服務(wù)端：沒有（Response）

客戶端：有沒有新信息(Request)

服務(wù)端：沒有（Response）

…..

客戶端：有沒有新信息(Request)

服務(wù)端：有了，給你（Response）

…..

我們可以看出：Ajax輪詢這種方式，在不斷地建立HTTP連接，然后等待服務(wù)端處理，服務(wù)端不會主動聯(lián)系客戶端，只有客戶端發(fā)起。

這種方式是有很大缺陷的，這種方式會非常的耗費資源，Ajax輪詢需要服務(wù)器有很快的處理速度。

所以，很有可能發(fā)生如下的情景：

客戶端：有沒有新信息(Request)

服務(wù)端：沒有（Response）

客戶端：有沒有新信息(Request)

服務(wù)端：請稍候再試~（503錯誤）

客戶端：有沒有新信息(Request)

服務(wù)端：請稍候再試~（503錯誤）

…..

2. websocket連接

通過上述，我們可以看出Ajax輪詢并不是最好的方式，輪詢需要消耗服務(wù)器很多的資源。所以，在這種情況下，websocket出現(xiàn)了，服務(wù)端就可以主動推送消息給客戶端。

此時的交互情景如下：

客戶端：我要建立Websocket協(xié)議，需要的服務(wù)：chat，Websocket協(xié)議版本：17（HTTP Request）

服務(wù)端：確認，已升級為Websocket協(xié)議

客戶端：麻煩有消息的時候推送給我

服務(wù)端：好的，有的時候會告訴你的

服務(wù)端：消息~消息~消息

服務(wù)端：消息~消息~消息

服務(wù)端：消息~消息~消息

服務(wù)端：收到~收到~收到

…..

只需要經(jīng)過一次HTTP請求，就可以做到兩端源源不斷的消息傳送了。

那么websocket是如何解決資源消耗的問題呢？

這里是需要經(jīng)過兩層代理的，即HTTP協(xié)議在Nginx等服務(wù)器的解析下，傳送給相應(yīng)的 Handler（PHP等） 來處理。簡單地說，就好比一個速度非常快速的信使（Nginx），他負責(zé)把問題轉(zhuǎn)交給相應(yīng)的客服（Handler）。

本身信使基本上速度是足夠的，但是每次都卡在客服（Handler） 了，總是有客服處理速度太慢，導(dǎo)致客服不夠。

Websocket就解決了這樣一個難題，建立websocket連接后，可以直接跟信使建立持久的連接，有信息的時候客服想辦法通知信使，然后信使在統(tǒng)一轉(zhuǎn)交給客戶。 這樣就可以解決Handler處理速度過慢的問題了。

Ajax和websocket的應(yīng)用場景

了解了Ajax和websocket的基本概念，那么我們平時會在哪些應(yīng)用場景應(yīng)用到這兩種技術(shù)呢？

1. Ajax的應(yīng)用場景

Ajax的特點在于異步交互，動態(tài)更新web頁面，因此Ajax的適用范圍是交互較多，頻繁讀取數(shù)據(jù)的web應(yīng)用。

比如如下場景：

（1）用Ajax進行表單數(shù)據(jù)驗證

在填寫表單內(nèi)容時，需要保證數(shù)據(jù)的唯一性（例如新用戶注冊填寫的用戶名），因此必須對用戶輸入的內(nèi)容進行數(shù)據(jù)驗證。

使用Ajax技術(shù)，可以由XMLHttpRequest對象發(fā)出驗證請求，根據(jù)返回的HTTP響應(yīng)判斷驗證是否成功，整個過程不需要彈出新窗口，也不需要將整個頁面提交到服務(wù)器，快速而又不會加重服務(wù)器負擔(dān)。

（2）按需取數(shù)據(jù)

在web應(yīng)用中，經(jīng)常會用到分類樹或樹形結(jié)構(gòu)，例如部門結(jié)構(gòu)，文件的分類結(jié)構(gòu)等。

Ajax技術(shù)是這樣實現(xiàn)樹形結(jié)構(gòu)的：

• 在初始化頁面時，只獲取第一級子分類的數(shù)據(jù)并顯示；
• 當(dāng)用戶點開一級分類的第一節(jié)點時，頁面會通過Ajax向服務(wù)器請求當(dāng)前分類所屬的二級子分類的所有數(shù)據(jù)；
• 如果再請求已經(jīng)呈現(xiàn)的二級分類的某一節(jié)點時，再次向服務(wù)器請求當(dāng)前分類所屬的三級子分類的所有數(shù)據(jù)，以此類推。

頁面會根據(jù)用戶的操作向服務(wù)器請求所需要的數(shù)據(jù)，這樣就不會存在數(shù)據(jù)的冗余，減少了數(shù)據(jù)下載總量。同時，更新頁面時不需要重新加載全部內(nèi)容，只更新需要更新的那部分內(nèi)容即可，大大縮短了用戶的等待時間。

（3）自動更新頁面

web應(yīng)用中有很多數(shù)據(jù)的變化是實時的，例如：最新的新聞，天氣預(yù)報以及聊天室等等。在Ajax出現(xiàn)之前，用戶為了即使了解相應(yīng)的內(nèi)容必須不斷刷新頁面，查看是否有新的內(nèi)容變化，或者頁面本身實現(xiàn)定時刷新的功能。

應(yīng)用Ajax技術(shù)可以改善這種這種情況，頁面加載以后，會通過Ajax在后臺進行定時的輪詢，向服務(wù)器發(fā)送請求，查看是否有最新的消息（當(dāng)然這種情況是有弊端的，上面也說到了）。如果有則將新的數(shù)據(jù)下載并且在頁面上進行動態(tài)的更新，通過一定的方式通知用戶。

2. websocket的應(yīng)用場景

決定是否需要使用websocket技術(shù)的方法其實很簡單：

• 你的產(chǎn)品需要提供多個用戶相互交流的功能嗎？
• 你的產(chǎn)品需要展示服務(wù)器端經(jīng)常變動的數(shù)據(jù)嗎？

如果回答都是肯定的，那么你的產(chǎn)品中就要應(yīng)用websocket技術(shù)了。

常用的應(yīng)用場景如下：

（1）社交類應(yīng)用

對社交類的應(yīng)用的一個好處之處就是——能夠即時的知道你的朋友正在做什么？用戶是不會想要在數(shù)分鐘之后，才能知道一個家庭成員在群里發(fā)送的紅包或者一個朋友給你發(fā)的消息。用戶是在線的，所以用戶收到的消息應(yīng)該是實時的。

（2）股票基金類應(yīng)用的價格

金融界瞬息萬變——幾乎是每毫秒都在發(fā)生變化，過時的信息就能導(dǎo)致?lián)p失。當(dāng)我們打開一個股票或基金類應(yīng)用時，我們想要知道產(chǎn)品實時的價格，而不是10秒前的數(shù)據(jù)。使用websocket可以實時更新這些數(shù)據(jù)變化而不需要等待。

（3）基于位置的應(yīng)用

越來越多的基于位置的應(yīng)用，都是借用移動設(shè)備的GPS功能來實現(xiàn)的。如果一直記錄用戶的位置，就可以收集到更加細致化的數(shù)據(jù)。如果需要實時的更新網(wǎng)絡(luò)數(shù)據(jù)儀表盤(比如：說運動員的教練需要查看這些數(shù)據(jù))，借用websocket可以做到讓數(shù)據(jù)實時刷新。

（4）在線教育類應(yīng)用

在線教育是學(xué)習(xí)的不錯方式，可以和老師以及其他同學(xué)一起交流。websocket技術(shù)可以實現(xiàn)多媒體聊天、文字聊天等功能。

總結(jié)

我們總結(jié)一下，Ajax一般會應(yīng)用在交互較多，頻繁讀取數(shù)據(jù)的web應(yīng)用中。websocket一般會應(yīng)用在需要提供多個用戶相互交流，或需要實時的展示服務(wù)端變動的數(shù)據(jù)這兩種情況。了解了這兩項技術(shù)，在設(shè)計到相關(guān)產(chǎn)品功能時，就能應(yīng)對自如了~

#專欄作家#

流年，人人都是產(chǎn)品經(jīng)理專欄作家?；ヂ?lián)網(wǎng)產(chǎn)品設(shè)計師，4年互聯(lián)網(wǎng)產(chǎn)品設(shè)計經(jīng)驗。擅長用戶體驗設(shè)計，喜歡鉆研需求功能背后的技術(shù)實現(xiàn)方式；在成為綜合型產(chǎn)品設(shè)計師的道路上不斷努力前進！

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供