飛哥與小佛 Wiki
Advertisement
以CC-BY-SA協議引自維基百科AJAX 文章(作者)

AJAX即「Asynchronous JavaScript and XML」(異步的JavaScript與XML技術),指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax的概念由Jesse James Garrett所提出[1]

傳統的Web應用允許用戶端填寫表單(form),當送出表單時就向Web伺服器發送一個請求。伺服器接收並處理傳來的表單,然後送回一個新的網頁,但這個做法浪費了許多帶寬,因為在前後兩個頁面中的大部分HTML碼往往是相同的。由於每次應用的溝通都需要向伺服器發送請求,應用的回應時間依賴於伺服器的回應時間。這導致了用戶界面的回應比本機應用慢得多。

與此不同,AJAX應用可以僅向伺服器發送並取回必須的數據,並在客戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的數據大量減少,伺服器回應更快了。同時,很多的處理工作可以在發出請求的客戶端機器上完成,因此Web伺服器的負荷也減少了。

類似於DHTML或LAMP,AJAX不是指一種單一的技術,而是有機地利用了一系列相關的技術。雖然其名稱包含XML,但實際上數據格式可以由JSON代替,進一步減少數據量,形成所謂的AJAJ。而客戶端與伺服器也並不需要異步。一些基於AJAX的「派生/合成」式(derivative/composite)的技術也正在出現,如AFLAX。

應用[]

  • 運用XHTML+CSS來表達資訊;
  • 運用JavaScript操作DOM(Document Object Model)來執行動態效果;
  • 運用XML和XSLT操作資料
  • 運用XMLHttpRequest為Agent與網頁伺服器進行非同步資料交換;
  • 運用JavaScript技術來實現。
  • 注意:AJAX與Flash、Silverlight和Java Applet等RIA技術是有區分的。

發展史[]

上個世紀90年代,幾乎所有的網站都由HTML頁面實現,伺服器處理每一個用戶請求都需要重新加載網頁。這樣的處理方式效率不高。用戶的體驗是所有頁面都會消失,再重新載入,即使只是一部分頁面元素改變也要重新載入整個頁面,不僅要刷新改變的部分,連沒有變化的部分也要刷新。這會加重伺服器的負擔。

這可以用異步加載來解決。1995年,JAVA語言的第一版發布,隨之發布的的Java applets(JAVA小程序)首次實現了異步加載。瀏覽器通過運行嵌入網頁中的Java applets與伺服器交換數據,不必刷新網頁。1996年,Internet Explorer將iframe元素加入到HTML,支持局部刷新網頁。

1998年前後,Outlook Web Access小組寫成了允許客戶端腳本發送HTTP請求(XMLHTTP)的第一個組件。該組件原屬於微軟Exchange Server,並且迅速地成為了Internet Explorer 4.0[2]的一部分。部分觀察家認為,Outlook Web Access是第一個應用了Ajax技術的成功的商業應用程式,並成為包括Oddpost的網絡郵件產品在內的許多產品的領頭羊。但是,2005年初,許多事件使得Ajax被大眾所接受。Google在它著名的交互應用程式中使用了異步通訊,如Google討論組、Google地圖、Google搜索建議、Gmail等。Ajax這個詞由《Ajax: A New Approach to Web Applications》一文所創,該文的迅速流傳提高了人們使用該項技術的意識。另外,對Mozilla/Gecko的支持使得該技術走向成熟,變得更為簡單易用。

優缺點[]

使用Ajax的最大優點,就是能在不更新整個頁面的前提下維護數據。這使得Web應用程式更為迅捷地回應用戶動作,並避免了在網絡上發送那些沒有改變的信息。

Ajax不需要任何瀏覽器插件,但需要用戶允許JavaScript在瀏覽器上執行。就像DHTML應用程式那樣,Ajax應用程式必須在眾多不同的瀏覽器和平台上經過嚴格的測試。隨著Ajax的成熟,一些簡化Ajax使用方法的程序庫也相繼問世。同樣,也出現了另一種輔助程序設計的技術,為那些不支持JavaScript的用戶提供替代功能。

對應用Ajax最主要的批評就是,它可能破壞瀏覽器的後退功能[3]。在動態更新頁面的情況下,用戶無法回到前一個頁面狀態,這是因為瀏覽器僅能記下歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙;用戶通常都希望單擊後退按鈕,就能夠取消他們的前一次操作,但是在Ajax應用程式中,卻無法這樣做。不過開發者已想出了種種辦法來解決這個問題,當中大多數都是在用戶單擊後退按鈕訪問歷史記錄時,通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。(例如,當用戶在Google Maps中單擊後退時,它在一個隱藏的IFRAME中進行搜索,然後將搜索結果反映到Ajax元素上,以便將應用程式狀態恢復到當時的狀態。)

一個相關的觀點認為,使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中。該問題的解決方案也已出現,大部分都使用URL片斷標識符(通常被稱為錨點,即URL中#後面的部分)來保持追蹤,允許用戶回到指定的某個應用程式狀態。(許多瀏覽器允許JavaScript動態更新錨點,這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點。)這些解決方案也同時解決了許多關於不支持後退按鈕的爭論。

進行Ajax開發時,網絡延遲——即用戶發出請求到伺服器發出響應之間的間隔——需要慎重考慮。如果不給予用戶明確的回應[4],沒有恰當的預讀數據[5],或者對XMLHttpRequest的不恰當處理[6],都會使用戶感到厭煩[7]。通常的解決方案是,使用一個可視化的組件來告訴用戶系統正在進行後台操作並且正在讀取數據和內容。

支持[]

  • 一些手持設備(如手機、PDA等)現在還不能很好的支持Ajax;
  • 用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是讓人頭痛的事;
  • Ajax的無刷新重載,由於頁面的變化沒有刷新重載那麼明顯,所以容易給用戶帶來困擾——用戶不太清楚現在的數據是新的還是已經更新過的;現有的解決有:在相關位置提示、數據更新的區域設計得比較明顯、數據更新後給用戶提示等;
  • 對串流媒體的支持沒有FLASH、Java Applet好。

兼容性[]

JavaScript編程的最大問題來自不同的瀏覽器對各種技術和標準的支持。

XmlHttpRequest對象在不同瀏覽器中不同的創建方法,以下是跨瀏覽器的通用方法:

// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
//   when XMLHttpRequest is predefined
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < aVersions.length; i++) {
        try {
            xmlHttp = new ActiveXObject(aVersions[i]);
            break;
        } catch (e) {}
    }
}

AJAX支持的瀏覽器有:Internet Explorer、Chrome、Firefox、Opera、Konqueror及Mac OS的Safari。但Opera不支持XSL格式對象,也不支持XSLT[8]

參考文獻[]

  1. Ajax:網頁應用程式的新方法—Jesse James Garrett,最近存取日2007年11月7日
  2. 微軟XML Parser(MSXML)版本列表,最近存取日2007年11月7日
  3. Web設計10大錯誤(1999年)—Jakob Nielsen著
  4. Remote Scripting with AJAX, Part 2
  5. 延遲必死:預讀資料以降低延遲—JonathanBoutelle.com
  6. 不可靠網路下的非同步要求—Harry Fuecks著,2005年2月
  7. 小朋友們聽著, AJAX不怎麼酷—Marcus Baker著,2005年6月3日
  8. Opera 9支援的網頁規格—XSLT, XPath, and XSL-FO部分論及不支持XSL-FO與XSLT,最近存取日2007年11月7日

工具[]

  • ASP.NET AJAX Extension(開發階段時代號Atlas),微軟AJAX工具箱。
  • jQuery,開源JS框架,寫得更少,做得更多。
  • Dojo工具箱,AJAX/DHTML工具箱。
  • Prototype,開放源代碼框架。
  • Buffalo Web Remoting(based on prototype)
  • openrico JS UI component(based on prototype)
  • PHPRPC,開放源代碼多語言支持的跨平台的安全的Web遠程過程調用框架,讓Ajax編程更容易。
  • Sajax,簡單AJAX工具箱
  • Rialto,Rich Internet AppLication TOolkit.
  • MochiKit一個自稱AJAX的輕量級js庫,支持Json。
  • OpenLaszlo原本專注在Flash作為表現層的Laszlo將方向轉至AJAX。
  • script.aculo.us為Ruby on Rails量身打造的AJAX函式庫,跨平台支援。
  • Rico知名的開源碼的AJAX函式庫,跨平台支援。
  • DWR Web Remoting
  • qooxdoo JS UI component(C/S Style)
  • jsLINB完全OOP,帶有線程模擬的ajax RIA框架。
  • GWT Google開源框架。
  • Quicknet一個能提供安全資料傳輸的AJAX系統架構。

圖書[]

  • 《Ajax基礎教程》,Foundations Of Ajax中文版,人民郵電出版社圖靈公司出版。ISBN 7-115-14481-8
  • 《Ajax實戰》,Ajax in Action中文版,人民郵電出版社圖靈公司出版。ISBN 7-115-14717-5
  • 《Ajax高級程序設計》(第二版),Professional Ajax,人民郵電出版社圖靈公司出版。
  • 《Head First Ajax》O'Reilly出版社
  • 《Ajax實戰手冊》碁峰ISBN 986-181-036-6
  • 《Ajax技術手冊》碁峰ISBN 986-181-019-6

參見[]

  • Google Web Toolkit是一個前端使用JavaScript,後端使用Java的AJAX framework,提供WYSIWYG設計介面。
  • jQuery用於簡化AJAX開發的Javascript函式庫。
  • Prototype javascript|Prototype AJAX函式庫。
  • Yahoo! UI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
  • Xajax知名的開源碼開發AJAX用PHP函式庫。
  • ZK,開放原始碼AJAX/XUL框架,JAVA專用。
  • ASP.NET AJAX,由微軟專為ASP.NET應用程式所開發的AJAX基礎架構。
  • Web 2.0,一種新的網際網路概念
  • 推送技術,一種服務端主動通知用戶的技術
Advertisement