網頁

2013年12月6日

[javascript] 網站AJAX技術原理淺談

AJAX為Asynchronous JavaScript and XML的縮寫,中文翻譯為「非同步的JavaScript與XML技術」,現在很多網站都有使用這項技術,因為AJAX技術可以減少網路傳輸,讓用戶得到更好的體驗。

如何判斷網站是否使用ajax技術,其實很簡單,只要網頁畫面在沒有重整的情況下,可以針對某個區塊做畫面更新,就可能是使用AJAX技術,為何只說"可能",因為Flash也有這樣子的效果,可以直接在區塊上按滑鼠右鍵,如果有出現Flash選單,就可以判定是使用Flash技術。

從ajax技術架構圖中,可以看出ajax夾在瀏覽器(用戶端)跟伺服器(主機端)中間,它必須處理用戶端的請求及主機回傳的結果,由於請求及回傳都只針對頁面的區塊,遠比整個頁面所需的傳輸量來得少,因此可以減少網路傳輸量。

程式設計人員,為了大量減少網路傳輸量,都會把固定的選項資料,在用戶第一次進到頁面時,就傳送給瀏覽器,此方式的好處在於選項資料都在瀏覽器上,主機端只要回傳代碼,再由用戶端轉換成選項在頁面顯示即可。

舉個列子來說好了,假設網站輸入出生年份,就可以知道生肖,「生肖」就是所謂的固定選項資料,選項資料事先給予對應代碼(1鼠,2牛,3虎,4免,5牛.......),當用戶輸入出生年份給主機端,主機端只需回傳數字代碼給用戶端,而用戶端接收到數字代碼後,直接轉換成選項資料,這樣子的方式可以減少相當可觀的傳輸量,因為網路傳送「1」會比傳送「鼠」所需要的傳輸量少。


預先把選項資料傳送到用戶端,雖然可以減少大量的傳輸,卻也不盡然是好事,因為曾經有網站舉辦商品線上限量搶購活動,為預防流量太多造成主機癱瘓,直接把「商品已經售完」字樣,預先傳送給用戶端的瀏覽器,而商品開賣沒多久就售完,造成很多沒買到商品的買家不滿,剛好又被發現網頁源始碼內含預先傳送的「商品已經售完」選項資料,反而造成買家懷疑,懷疑網站想透過隨機出現「商品已經售完」的訊息,捏造商品被搶購的假象。