網路新知
News
技術本位 AJAX網頁設計與應用
2017-09-06
分享新知
技術本位2017-09-06
AJAX，非同步的JavaScript與XML技術，指的是一套綜合了多項技術的瀏覽器端網頁開發技術；可以僅向伺服器傳送並取回必須的資料（局部交換用戶端及伺服器之間的資料），並在用戶端採用JavaScript處理來自伺服器的回應。最重要的關鍵效益是「更新而不重載」。
因為在伺服器和瀏覽器之間交換的資料大量減少（大約只有原來的5%），伺服器回應更快了；同時，很多的處理工作可以在發出請求的用戶端機器上完成，因此Web伺服器的負荷也減少了。
運用Ajax設計的網站，讓使用者不用重新下載全部網頁內容，可以要什麼就立刻秀什麼，不僅可即時回應使用者即時的需求，還能細膩地客製化每個回應，做到最貼近使用者的服務。
最大優點就是能在不更新整個頁面的前提下維護資料，使得Web應用程式更為迅捷地回應用戶動作，並避免了在網路上傳送那些沒有改變的、靜態且重複性出現的資訊；而且不需要任何瀏覽器外掛模組，所以必須串徹延續執行的功能如播放音樂等，也不會因為切換頁面就重新播放。
但其缺點也很明顯：它可能破壞瀏覽器的後退與加入收藏書籤功能。在動態更新頁面的情況下，用戶無法回到前一個頁面狀態。若為網頁頁面的切換，必須搭配statement的push及pop直接操作瀏覽歷史。
以技術而論，AJAX發展至今，技術已相當成熟；再者，因AJAX以異步的方式向伺服器提交需求，因此程式設計師因此必須自行處理或在JavaScript裡面處理程序以避免多行程或多執行緒的競爭問題發生。
以資訊安全的角度檢視AJAX，最讓人產生疑慮的就是AJAX程式能夠透過檢視程式碼的方式看到它的程式邏輯與變數使用方式，進而增加對網站攻擊的可能性；但事實上，一個安全的網站，原本就必須在前端資料傳遞到後端時做好過濾與把關的工作，伺服器端程式在設計時重視程式的安全規畫，那麼無論前端是由使用者輸入資料傳來的，或是由JavaScript程式傳遞而來，都一樣安全。
以下，我們列出幾項AJAX開發守則以供參考：
1.前、端後都要做好安全的把關工作
2.盡量以HTTP POST方法傳輸資料
3.不要直接用eval函式喚起JSON物件
4.限制使用者可用的HTML語法
5.禁止可留言的網頁頁面使用JavaScript語法
6.必須注意安全性問題
7.讓使用者知道自己身處的狀況，如：頁面整理中的提示
8.保持小量傳輸
9.注意易用性與內容的平衡
體驗AJAX風格的網頁：
Google Maps：當使用者利用地圖左上方的拉桿調整地圖解析度，網頁會即時顯示該解析度之地圖資料。需要移動地圖畫面時，僅需用滑鼠拖拉底圖即可移動。局部更新資料的方式擺脫了重新整理畫面的漫長等待時間情況並達到「所思即所見」的效果。
--誠翊資訊花蓮網頁設計，貼近您的需求，以RWD、AJAX等最新技術為您打造您的專屬品牌網站。
回列表
因為在伺服器和瀏覽器之間交換的資料大量減少（大約只有原來的5%），伺服器回應更快了；同時，很多的處理工作可以在發出請求的用戶端機器上完成，因此Web伺服器的負荷也減少了。
運用Ajax設計的網站，讓使用者不用重新下載全部網頁內容，可以要什麼就立刻秀什麼，不僅可即時回應使用者即時的需求，還能細膩地客製化每個回應，做到最貼近使用者的服務。
最大優點就是能在不更新整個頁面的前提下維護資料，使得Web應用程式更為迅捷地回應用戶動作，並避免了在網路上傳送那些沒有改變的、靜態且重複性出現的資訊；而且不需要任何瀏覽器外掛模組，所以必須串徹延續執行的功能如播放音樂等，也不會因為切換頁面就重新播放。
但其缺點也很明顯：它可能破壞瀏覽器的後退與加入收藏書籤功能。在動態更新頁面的情況下，用戶無法回到前一個頁面狀態。若為網頁頁面的切換，必須搭配statement的push及pop直接操作瀏覽歷史。
以技術而論，AJAX發展至今，技術已相當成熟；再者，因AJAX以異步的方式向伺服器提交需求，因此程式設計師因此必須自行處理或在JavaScript裡面處理程序以避免多行程或多執行緒的競爭問題發生。
以資訊安全的角度檢視AJAX，最讓人產生疑慮的就是AJAX程式能夠透過檢視程式碼的方式看到它的程式邏輯與變數使用方式，進而增加對網站攻擊的可能性；但事實上，一個安全的網站，原本就必須在前端資料傳遞到後端時做好過濾與把關的工作，伺服器端程式在設計時重視程式的安全規畫，那麼無論前端是由使用者輸入資料傳來的，或是由JavaScript程式傳遞而來，都一樣安全。
以下，我們列出幾項AJAX開發守則以供參考：
1.前、端後都要做好安全的把關工作
2.盡量以HTTP POST方法傳輸資料
3.不要直接用eval函式喚起JSON物件
4.限制使用者可用的HTML語法
5.禁止可留言的網頁頁面使用JavaScript語法
6.必須注意安全性問題
7.讓使用者知道自己身處的狀況，如：頁面整理中的提示
8.保持小量傳輸
9.注意易用性與內容的平衡
體驗AJAX風格的網頁：
Google Maps：當使用者利用地圖左上方的拉桿調整地圖解析度，網頁會即時顯示該解析度之地圖資料。需要移動地圖畫面時，僅需用滑鼠拖拉底圖即可移動。局部更新資料的方式擺脫了重新整理畫面的漫長等待時間情況並達到「所思即所見」的效果。
--誠翊資訊花蓮網頁設計，貼近您的需求，以RWD、AJAX等最新技術為您打造您的專屬品牌網站。
