Loading AI tools
来自维基百科,自由的百科全书
AJAX即「Asynchronous JavaScript and XML」(非同步的JavaScript與XML技術),指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax的概念由傑西·詹姆士·賈瑞特所提出[1]。
![]() |
編程範型 | Webapp, HTML, JavaScript, DHTML, DOM, XMLHttpRequest, JSON, XML, XSLT, XHTML, CSS |
---|---|
設計者 | 傑西·詹姆士·賈瑞特 |
面市時間 | 2005年2月18日 |
傳統的Web應用允許使用者端填寫表單(form),當送出表單時就向網頁伺服器傳送一個請求。伺服器接收並處理傳來的表單,然後送回一個新的網頁,但這個做法浪費了許多頻寬,因為在前後兩個頁面中的大部分HTML碼往往是相同的。由於每次應用的溝通都需要向伺服器傳送請求,應用的回應時間依賴於伺服器的回應時間。這導致了使用者介面的回應比本機應用慢得多。
與此不同,AJAX應用可以僅向伺服器傳送並取回必須的資料,並在客戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少,伺服器回應更快了。同時,很多的處理工作可以在發出請求的客戶端機器上完成,因此Web伺服器的負荷也減少了。
類似於DHTML或LAMP,AJAX不是指一種單一的技術,而是有機地利用了一系列相關的技術。雖然其名稱包含XML,但實際上資料格式可以由JSON代替以進一步減少資料量。而客戶端與伺服器也並不需要非同步。一些基於AJAX的「衍生/合成」式(derivative/composite)的技術也正在出現,如AFLAX。
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的支援使得該技術走向成熟,變得更為簡單易用。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最主要的批評就是,它可能破壞瀏覽器的後退與加入收藏書籤功能[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應用最頭痛的問題莫過於以下幾點:
Ajax是以非同步的方式向伺服器提交需求。對伺服器而言,其與傳統的提交表單需求並無不同,而且由於是以非同步之方式提交,如果同時有多個Ajax需求及表單提交需求,將無法保證哪一個需求先獲得伺服器的回應。這會造成應用程式典型的多行程(process)或多執行緒(thread)的競爭(racing)問題。程式設計師因此必須自行處理或在JavaScript裡面動手腳以避免這類競爭問題的發生(如Ajax需求未回應之前,先disable送出按鈕),這又不必要的增加了程式設計師的負擔。目前已知有自動處理此問題之開發框架似乎只有ZK。[來源請求]