AJAX

  「Ajax」重新導向至此。關於其他用法，請見「Ajax (消歧義)」。

Ajax

編程範型	Webapp, HTML, JavaScript, DHTML, DOM, XMLHttpRequest, JSON, XML, XSLT, XHTML, CSS
設計者	傑西·詹姆士·賈瑞特
面市時間	2005年2月18日​（2005-02-18）

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

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

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

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

應用

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

發展史

20世紀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的一部分。部分觀察家認為，Outlook Web Access是第一個應用了Ajax技術的成功的商業應用程序，並成為包括Oddpost的網絡郵件產品在內的許多產品的領頭羊。但是，2005年初，許多事件使得Ajax被大眾所接受。Google在它著名的交互應用程序中使用了異步通訊，如Google討論組、Google地圖、Google搜索建議、Gmail等。Ajax這個詞由《Ajax: A New Approach to Web Applications》一文所創，該文的迅速流傳提高了人們使用該項技術的意識。另外，對Mozilla/Gecko的支持使得該技術走向成熟，變得更為簡單易用。2006 年 4 月 5 日，萬維網聯盟 (W3C) 發布了 XMLHttpRequest 對象的第一個規範草案，試圖創建正式的 Web standard 標準。XMLHttpRequest 對象的最新草案於 2016 年 10 月 6 日發布，XMLHttpRequest 規範現已成為現行標準。

Ajax 前景非常樂觀，可以提高系統性能，優化用戶界面。Ajax 現有直接框架 AjaxPro，可以引入 AjaxPro.2.dll 文件，可以直接在前台頁面 JavaScript 調用後台頁面的方法。但此框架與表單驗證有衝突。另外微軟也引入了 Ajax 組件，需要添加 AjaxControlToolkit.dll 文件，可以在控件列表中出現相關控件。

優缺點

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

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

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

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

進行Ajax開發時，網絡延遲——即用戶發出請求到服務器發出響應之間的間隔——需要慎重考慮。如果不給予用戶明確的回應，沒有恰當的預讀數據，或者對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支持的瀏覽器有：Internet Explorer、Chrome、Firefox、Opera、Konqueror及Mac OS的Safari。但是Opera不支持XSL格式對象，也不支持XSLT。

開發挑戰及解決方案

對程序員而言，開發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。

參考文獻

• （英文） Ajax: A new approach to web applications --JJ Garrett - 2005年

外部連結

工具

• 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 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，一種新的互聯網概念
• 推送技術，一種服務端主動通知用戶的技術