「Ajax」重新導向至此。關於其他用法，請見「Ajax（消歧義）」。| 編程範型 | Webapp, HTML, JavaScript, DHTML, DOM, XMLHttpRequest, JSON, XML, XSLT, XHTML, CSS |
|---|---|
| 設計者 | 傑西·詹姆士·賈瑞特 |
| 釋出時間 | 2005年2月18日 |
AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax的概念由傑西·詹姆士·賈瑞特所提出[1]。
傳統的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[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 Explorer、Chrome、Firefox、Opera、Konqueror及Mac OS的Safari。但是Opera不支援XSL格式物件，也不支援XSLT[8]。
參考文獻
- ↑ （英文）Ajax:網頁應用程式的新方法 —Jesse James Garrett，最近存取日2007年11月7日
- ↑ （英文）微軟XML Parser（MSXML）版本列表 ，最近存取日2007年11月7日
- ↑ （英文）Web設計10大錯誤（1999年） —Jakob Nielsen著
- ↑ （英文）Remote Scripting with AJAX, Part 2
- ↑ （英文）延遲必死：預讀資料以降低延遲 —JonathanBoutelle.com
- ↑ （英文）不可靠網絡下的非同步要求 —Harry Fuecks著，2005年2月
- ↑ （英文）小朋友們聽着, AJAX不怎麼酷 —Marcus Baker著，2005年6月3日
- ↑ （英文）Opera 9支援的網頁規格 —XSLT, XPath, and XSL-FO部分論及不支援XSL-FO與XSLT，最近存取日2007年11月7日
- （英文） 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，一種新的互聯網概念
- 推播技術，一種伺服器端主動通知用戶的技術