AJAX

Ajax」重定向至此。關於與此名稱相似的其他條目,詳見「Ajax (消歧義)」。
Ajax
編程範型 Webapp, HTML, JavaScript, DHTML, DOM, XMLHttpRequest, JSON, XML, XSLT, XHTML, CSS
設計者 傑西·詹姆士·賈瑞特
面市時間 2005年2月18日,​11年前​(2005-02-18

AJAX即「Asynchronous JavaScript and XML」(非同步的JavaScriptXML技術),指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax的概念由傑西·詹姆士·賈瑞特所提出[1]

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

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

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

應用

  • 運用XHTML+CSS來表達資訊;
  • 運用JavaScript操作DOM(Document Object Model)來執行動態效果;
  • 運用XMLXSLT操作資料
  • 運用XMLHttpRequest或新的Fetch API與網頁伺服器進行非同步資料交換;
  • 注意: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應用程式中,卻無法這樣做。不過開發者已想出了種種辦法來解決這個問題,HTML5 之前的方法大多是在用戶單擊後退按鈕存取歷史記錄時,通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。(例如,當用戶在Google Maps中單擊後退時,它在一個隱藏的IFRAME中進行搜尋,然後將搜尋結果反映到Ajax元素上,以便將應用程式狀態取消復原到當時的狀態)。

關於無法將狀態加入收藏或書籤的問題,HTML5之前的一種方式是使用URL片斷識別元(通常被稱為錨點,即URL中#後面的部分)來保持追蹤,允許用戶回到指定的某個應用程式狀態。(許多瀏覽器允許JavaScript動態更新錨點,這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點。)HTML5 以後可以直接操作瀏覽歷史,並以字串形式儲存網頁狀態,將網頁加入網頁收藏夾或書籤時狀態會被隱形地保留。上述兩個方法也可以同時解決無法後退的問題。

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

相容性

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 ExplorerChromeFirefoxOperaKonqueror及Mac OS的Safari。但是Opera不支援XSL格式物件,也不支援XSLT[8]

開發挑戰及解決方案

對程式設計師而言,開發Ajax應用最頭痛的問題莫過於以下幾點:

  • Ajax在本質上是一個瀏覽器端的技術,首先面臨無可避免的第一個問題即是瀏覽器的相容性問題。各家瀏覽器對於JavaScript/DOM/CSS的支援總有部分不太相同或是有Bug,甚至同一瀏覽器的各個版本間對於JavaScript/DOM/CSS的支援也有可能部分不一樣。這導致程式設計師在寫Ajax應用時花大部分的時間在偵錯瀏覽器的相容性而非在應用程式本身。因此,目前大部分的Ajax連結庫或開發框架大多以js連結庫的形式存在,以定義更高階的JavaScript API、JavaScript物件(模板)、或者JavaScript Widgets來解決此問題。如prototype.js。
  • Ajax技術之主要目的在於局部交換用戶端及伺服器之間的資料。如同傳統之主從架構,無可避免的會有部分的業務邏輯會實現在用戶端,或部分在用戶端部分在伺服器。由於業務邏輯可能分散在用戶端及伺服器,且以不同之程式語言實現,這導致Ajax應用程式極難維護。如有使用者介面或業務邏輯之更動需求,再加上前一個JavaScript/DOM/CSS之相容性問題,Ajax應用往往變成程式設計師的夢魘。針對業務邏輯分散的問題,Ajax開發框架大致可分為兩類:
  • 將業務邏輯及表現層放在瀏覽器,資料層放在伺服器:因為所有的程式以JavaScript執行在用戶端,只有需要資料時才向伺服器要求服務,此法又稱為胖用戶端(fat client)架構。伺服器在此架構下通常僅用於提供及儲存資料。此法的好處在於程式設計師可以充分利用JavaScript搭配業務邏輯來做出特殊的使用者介面,以符合終端使用者的要求。但是問題也不少,主因在第一,JavaScript語言本身之能力可能不足以處理複雜的業務邏輯。第二,JavaScript的執行效能一向不好。第三,JavaScript存取伺服器資料,仍需適當的伺服器端程式之配合。第四,瀏覽器相容性的問題又出現。有些Ajax開發框架如DWR企圖以自動生成JavaScript之方式來避免相容的問題,並開立通道使得JavaScript可以直接叫用伺服器端的Java程式來簡化資料的存取。但是前述第一及第二兩個問題仍然存在,程式設計師必須費相當的力氣才能達到應用程式之規格要求,或可能根本無法達到要求。
  • 將表現層、業務邏輯、及資料層放在伺服器,瀏覽器僅有使用者介面引擎(User Interface engine);此法又稱為瘦用戶端(thin client)架構,或中心伺服器(server-centric)架構。瀏覽器的使用者介面引擎僅用於反映伺服器的表現層以及傳達使用者的輸入回到伺服器的表現層。由瀏覽器所觸發之事件亦送回伺服器處理,根據業務邏輯來更新表現層,然後反映回瀏覽器。因為所有應用程式完全在伺服器執行,資料及表現層皆可直接存取,程式設計師只需使用伺服器端相對較成熟之程式語言(如Java語言)即可,不需再學習JavaScript/DOM/CSS,在開發應用程式時相對容易。缺點在於使用者介面引擎以及表現層通常以標準元件的形式存在,如需要特殊元件(使用者介面)時,往往須待原框架之開發者提供,緩不濟急。如開源碼Ajax開發框架ZK目前支援XUL及XHTML元件,尚無XAML之支援。

Ajax是以異步的方式向伺服器提交需求。對伺服器而言,其與傳統的提交表單需求並無不同,而且由於是以異步之方式提交,如果同時有多個Ajax需求及表單提交需求,將無法保證哪一個需求先獲得伺服器的回應。這會造成應用程式典型的多行程(process)或多執行緒(thread)的競爭(racing)問題。程式設計師因此必須自行處理或在JavaScript裡面動手腳以避免這類競爭問題的發生(如Ajax需求未回應之前,先disable送出按鈕),這又不必要的增加了程式設計師的負擔。目前已知有自動處理此問題之開發框架似乎只有ZK

參考文獻

  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.usRuby 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 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,一種新的網際網路概念
  • 推播技術,一種伺服端主動通知用戶的技術