中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

我們日常使用的互聯網產品，少不了前后端數據的交互，Ajax和websocket都是數據交互的利器，那么它們分別是什么？Ajax和websocket是如何完成數據實時交互的？websocket與Ajax輪詢的區別又是什么？它們分別的使用場景有哪些？本文將會給出答案。

Ajax

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

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

websocket

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

websocket最大的優點在于——服務器和瀏覽器可以在給定的時間范圍內的任意時刻，互相推送消息。在建立連接之后，服務器可以主動傳送數據給瀏覽器。

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

Ajax輪詢和websocket的區別

實現瀏覽器與服務器的實時數據交互，可以通過建立websocket，也可以通過Ajax輪詢的方式。

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

1. Ajax輪詢

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

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

服務端：沒有（Response）

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

服務端：沒有（Response）

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

服務端：沒有（Response）

…..

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

服務端：有了，給你（Response）

…..

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

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

所以，很有可能發生如下的情景：

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

服務端：沒有（Response）

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

服務端：請稍候再試~（503錯誤）

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

服務端：請稍候再試~（503錯誤）

…..

2. websocket連接

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

此時的交互情景如下：

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

服務端：確認，已升級為Websocket協議

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

服務端：好的，有的時候會告訴你的

服務端：消息~消息~消息

服務端：消息~消息~消息

服務端：消息~消息~消息

服務端：收到~收到~收到

…..

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

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

這里是需要經過兩層代理的，即HTTP協議在Nginx等服務器的解析下，傳送給相應的 Handler（PHP等） 來處理。簡單地說，就好比一個速度非?？焖俚男攀梗∟ginx），他負責把問題轉交給相應的客服（Handler）。

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

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

Ajax和websocket的應用場景

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

1. Ajax的應用場景

Ajax的特點在于異步交互，動態更新web頁面，因此Ajax的適用范圍是交互較多，頻繁讀取數據的web應用。

比如如下場景：

（1）用Ajax進行表單數據驗證

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

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

（2）按需取數據

在web應用中，經常會用到分類樹或樹形結構，例如部門結構，文件的分類結構等。

Ajax技術是這樣實現樹形結構的：

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

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

（3）自動更新頁面

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

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

2. websocket的應用場景

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

• 你的產品需要提供多個用戶相互交流的功能嗎？
• 你的產品需要展示服務器端經常變動的數據嗎？

如果回答都是肯定的，那么你的產品中就要應用websocket技術了。

常用的應用場景如下：

（1）社交類應用

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

（2）股票基金類應用的價格

金融界瞬息萬變——幾乎是每毫秒都在發生變化，過時的信息就能導致損失。當我們打開一個股票或基金類應用時，我們想要知道產品實時的價格，而不是10秒前的數據。使用websocket可以實時更新這些數據變化而不需要等待。

（3）基于位置的應用

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

（4）在線教育類應用

在線教育是學習的不錯方式，可以和老師以及其他同學一起交流。websocket技術可以實現多媒體聊天、文字聊天等功能。

總結

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

#專欄作家#

流年，人人都是產品經理專欄作家?；ヂ摼W產品設計師，4年互聯網產品設計經驗。擅長用戶體驗設計，喜歡鉆研需求功能背后的技術實現方式；在成為綜合型產品設計師的道路上不斷努力前進！

本文原創發布于人人都是產品經理。未經許可，禁止轉載

題圖作者提供