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一般會應用在需要提供多個用戶相互交流,或需要實時的展示服務端變動的數據這兩種情況。了解了這兩項技術,在設計到相關產品功能時,就能應對自如了。
