AJAX 详解

AJAX

維基百科，自由的百科全書

跳轉到: 導覽, 搜尋

「 Ajax」重定向至此。關於與其同名的其他主題，詳見「 Ajax (消歧義)」。

跳過字詞轉換說明

汉漢 ▼ ▲

為了閱讀方便，本文使用 全文手工轉換。轉換內容：

下面採用電腦和信息技術組全文轉換 [編輯]

[展開]

字詞轉換說明

字詞轉換是中文維基的一項自動轉換，目的是通過電腦程式自動消除繁簡、地區詞等不同用字模式的差異，以達到閱讀方便。字詞轉換包括全域轉換和手動轉換，本說明所使用的標題轉換和全文轉換技術，都屬於手動轉換。

如果您想對我們的字詞轉換系統提出一些改進建議，或者送出應用面更廣的轉換（中文維基百科全站乃至MediaWiki軟體），或者報告轉換系統的錯誤，請前往Wikipedia:字詞轉換請求或候選發表您的意見。

AJAX為「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），是一種廣泛應用在瀏覽器的網頁開發技術。Ajax是多項技術的綜合應用，Ajax概念由 Jesse James Garrett 所提出^[1]，AJAX：

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

類似於DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。事實上，一些基於AJAX的「衍生／合成」式（derivative/composite）的技術正在出現，如AFLAX。

AJAX的應用使用支援以上技術的Web瀏覽器作為執行平台。這些瀏覽器目前包括：Internet Explorer、Mozilla、Firefox、Opera、Konqueror及Mac OS的Safari。但是Opera不支援XSL格式物件，也不支援XSLT^[2]。

[編輯]與傳統的Web應用比較

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

與此不同，AJAX應用可以僅向伺服器發送並取回必須的資料，它使用SOAP或其它一些基於XML的頁面服務介面（介面），並在客戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少（大約只有原來的5%），結果我們就能看到回應（伺服器回應）更快的應用（結果）。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web伺服器的處理時間也減少了。

[編輯]發展史

上個世紀90年代，幾乎所有的網站都由HTML頁面實作，伺服器處理每一個使用者請求都需要重新載入網頁。這樣的處理方式效率不高，因為使用者體驗反應：所有頁面都會消失後再重新載入，即使一部分頁面元素改變也要重新載入整個頁面，不僅要重新整理改變的部分，連沒有變化的部分也要重新整理。這會加重伺服器的負擔。非同步載入能夠解決這個問題。1995年JAVA語言的第一版發行，隨之發行的的 Java applets(JAVA小程式)首次實作了非同步載入。瀏覽器透過執行嵌入網頁中的Java applets與伺服器交換資料，不必重新整理網頁。1996年，Internet Explorer將iframe元素加入到HTML，支援局部重新整理網頁。 1998年前後，允許客戶端指令碼發送HTTP請求（XMLHTTP）的第一個元件由Outlook Web Access小組寫成。該元件原屬於微軟Exchange Server，並且迅速地成為了Internet Explorer 4.0^[3]的一部分。部分觀察家認為，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最主要的批評就是，它可能破壞瀏覽器後退按鈕的正常行為^[4]。在動態更新頁面的情況下，使用者無法回到前一個頁面狀態，這是因為瀏覽器僅能記下歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；使用者通常都希望單擊後退按鈕，就能夠取消他們的前一次操作，但是在Ajax應用程式中，卻無法這樣做。不過開發者已想出了種種辦法來解決這個問題，當中大多數都是在使用者單擊後退按鈕存取歷史記錄時，透過建立或使用一個隱藏的IFRAME來重現頁面上的變更。（例如，當使用者在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜尋，然後將搜尋結果反映到Ajax元素上，以便將應用程式狀態恢復到當時的狀態。）

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

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

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

[編輯]核心

XMLHttpRequest 物件

[編輯]瀏覽器相容性問題

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應用面臨的挑戰及解決方案

此章節的中立性有爭議。內容、語調可能帶有明顯的個人觀點或地方色彩。 加上此模板的編輯者需在討論頁說明此節中立性有爭議的原因，以便讓各編輯者討論和改善。 在編輯之前請務必察看討論頁。

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

1. Ajax在本質上是一個瀏覽器端的技術，首先面臨無可避免的第一個問題即是瀏覽器的相容性問題。各家瀏覽器對於JavaScript／DOM／CSS的支援總有部分不太相同或是有Bug，甚至同一瀏覽器的各個版本間對於JavaScript／DOM／CSS的支援也有可能部分不一樣。這導致程式設計師在寫Ajax應用時花大部分的時間在偵錯瀏覽器的相容性而非在應用程式本身。因此，目前大部分的Ajax鏈結庫或開發框架大多以js鏈結庫的形式存在，以定義更高階的JavaScript API 、JavaScript物件（模板）、或者JavaScript Widgets來解決此問題。如prototype.js。
2. 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之支援。
3. Ajax是以非同步的方式向伺服器送出需求。對伺服器而言，其與傳統的送出表單需求並無不同，而且由於是以非同步之方式送出，如果同時有多個Ajax需求及表單送出需求，將無法保證哪一個需求先獲得伺服器的響應。這會造成應用程式典型的多行程（process）或多執行緒（thread）的競爭（racing）問題。程式設計師因此必須自行處理或在JavaScript裡面動手腳以避免這類競爭問題的發生（如Ajax需求未響應之前，先disable送出按鈕），這又不必要的增加了程式設計師的負擔。目前已知有自動處理此問題之開發框架似乎只有ZK。^{[來源請求]}

[編輯]參考資料

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

9.(英文) Ajax: A new approach to web applications --JJ Garrett - 2005年

[編輯]參見

• 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，一種新的網際網路概念

[編輯]外部連線

[編輯]工具

• 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中國。

[編輯]圖書

• 《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

[編輯]其他資源

• AJAX 上手篇，AJAX 上手篇
• 掌握 Ajax，掌握 Ajax
• Ajax外掛程式（英文），Hot!Ajax
• [1]，jQuery類別庫新手使用指南之AJAX方法- 第一部分
• [2]，jQuery類別庫新手使用指南之AJAX方法- 第二部分
• [3]，jQuery類別庫新手使用指南之AJAX方法- 第三部分
• [4]，jQuery類別庫新手使用指南之AJAX方法- 第四部分