關於Ajax和websocket的區別以及使用場景!

itxcc發表於2018-10-19

在我們日常使用的網際網路產品中,很多都是前後端資料的互動來完成的,說到資料互動就不得不提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輪詢的方式。

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

Ajax的應用場景 Ajax的特點在於非同步互動,動態更新web頁面,因此Ajax的適用範圍是互動較多,頻繁讀取資料的web應用。

Ajax應用場景:

1.用Ajax進行表單資料驗證

在填寫表單內容時,需要保證資料的唯一性(例如新使用者註冊填寫的使用者名稱),因此必須對使用者輸入的內容進行資料驗證。

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

2.按需取資料

在web應用中,經常會用到分類樹或樹形結構,例如部門結構,檔案的分類結構等。

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

在初始化頁面時,只獲取第一級子分類的資料並顯示; 當使用者點開一級分類的第一節點時,頁面會通過Ajax向伺服器請求當前分類所屬的二級子分類的所有資料; 如果再請求已經呈現的二級分類的某一節點時,再次向伺服器請求當前分類所屬的三級子分類的所有資料,以此類推。 頁面會根據使用者的操作向伺服器請求所需要的資料,這樣就不會存在資料的冗餘,減少了資料下載總量。同時,更新頁面時不需要重新載入全部內容,只更新需要更新的那部分內容即可,大大縮短了使用者的等待時間。

3.自動更新頁面

web應用中有很多資料的變化是實時的,例如:最新的新聞,天氣預報以及聊天室等等。在Ajax出現之前,使用者為了即使瞭解相應的內容必須不斷重新整理頁面,檢視是否有新的內容變化,或者頁面本身實現定時重新整理的功能。

應用Ajax技術可以改善這種這種情況,頁面載入以後,會通過Ajax在後臺進行定時的輪詢,向伺服器傳送請求,檢視是否有最新的訊息(當然這種情況是有弊端的,上面也說到了)。如果有則將新的資料下載並且在頁面上進行動態的更新,通過一定的方式通知使用者。

websocket的應用場景

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

你的產品需要提供多個使用者相互交流的功能嗎? 你的產品需要展示伺服器端經常變動的資料嗎? 如果回答都是肯定的,那麼你的產品中就要應用websocket技術了。

常用的應用場景如下:

1.社交類應用

對社交類的應用的一個好處之處就是——能夠即時的知道你的朋友正在做什麼?使用者是不會想要在數分鐘之後,才能知道一個家庭成員在群裡傳送的紅包或者一個朋友給你發的訊息。使用者是線上的,所以使用者收到的訊息應該是實時的。

2.股票基金類應用的價格

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

3.基於位置的應用

越來越多的基於位置的應用,都是借用移動裝置的GPS功能來實現的。如果一直記錄使用者的位置,就可以收集到更加細緻化的資料。如果需要實時的更新網路資料儀表盤(比如:說運動員的教練需要檢視這些資料),借用websocket可以做到讓資料實時重新整理。

4.線上教育類應用

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

總結

Ajax一般會應用在互動較多,頻繁讀取資料的web應用中。

websocket一般會應用在需要提供多個使用者相互交流,或需要實時的展示服務端變動的資料這兩種情況。瞭解了這兩項技術,在設計到相關產品功能時,就能應對自如了。


相關文章