Asynchronous JavaScript and XML”是指一種創建互動式網頁套用的網頁開發技術。
基本介紹
- 中文名：Asynchronous JavaScript And XML
- 讀音：e:j^ks
- 簡稱：AJAX
- 創建：互動式網頁套用的網頁開發技術
術語解釋,名稱來源,套用優勢,套用案例,開發模式,開發框架,JSer,兼容調試,調試問題,瀏覽器,示例程式,優缺點,優點,缺點,基礎套用,程式架構,實例展示,問題對策,
術語解釋
讀音：e:j^ks 。AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，AJAX並非縮寫詞，而是由Jesse James Gaiiett創造的名詞，是指一種創建互動式網頁套用的網頁開發技術。
名稱來源
國內翻譯常為“阿賈克斯”和阿賈克斯足球隊同音。Web套用的互動如Flickr,Backpack和Google在這方面已經有質的飛躍。這個術語源自描述從基於Web的套用到基於數據的套用的轉換。在基於數據的套用中，用戶需求的數據如聯繫人列表，可以從獨立於實際網頁的服務端取得並且可以被動態地寫入網頁中，給緩慢的Web套用體驗著色使之像桌面套用一樣。
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理回響，而不阻塞用戶。
套用優勢
通過 AJAX，您的 JavaScript 可使用JavaScript的XMLHttpRequest對象來直接與伺服器進行通信。通過這個對象，您的 JavaScript 可在不重載頁面的情況與Web伺服器交換數據。
AJAX 在瀏覽器與 Web 伺服器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從伺服器請求少量的信息，而不是整個頁面。
AJAX 可使網際網路應用程式更小、更快，更友好。
AJAX 是一種獨立於 Web 伺服器軟體的瀏覽器技術。 AJAX 基於下列 Web 標準：
Web 應用程式較桌面應用程式有諸多優勢；它們能夠涉及廣大的用戶，它們更易安裝及維護，也更易開發。
不過，網際網路應用程式並不像傳統的桌面應用程式那樣完善且友好。
通過 AJAX，網際網路應用程式可以變得更完善，更友好。
套用案例
建議、Gmail等。Ajax這個詞由《Ajax: A New Approach to Web Applications》一文所創，該文的迅速流傳提高了人們使用該項技術的意識。另外，對Mozilla/Gecko的支持使得該技術走向成熟，變得更為易用。
AJAX前景非常樂觀，可以提高系統性能，最佳化用戶界面。AJAX現有直接框架AjaxPro，可以引入AjaxPro.2.dll檔案，可以直接在前台頁面JS調用後台頁面的方法。但此框架與FORM驗證有衝突。另外微軟也引入了AJAX組件，需要添加AjaxControlToolkit.dll檔案，可以在控制項列表中出現相關控制項。
開發模式
許多
重要的技術和AJAX開發模式可以從現有的知識中獲取。例如，在一個傳送請求到服務端的套用中，必須包含請求順序、優先權、逾時回響、錯誤處理及回調，其中許多元素已經在Web服務中包含了，就像現在的SOA。AJAX開發人員擁有一個完整的系統架構知識。同時，隨著技術的成熟還會有許多地方需要改進，特別是UI部分的易用性。
AJAX開發與傳統的CS開發有很大的不同。這些不同引入了新的編程問題，最大的問題在於易用性。由於AJAX依賴瀏覽器的JavaScript和XML，瀏覽器的兼容性和支持的標準也變得和JavaScript的運行時性能一樣重要了。這些問題中的大部分來源於瀏覽器、伺服器和技術的組合，因此必須理解如何才能最好的使用這些技術。
綜合各種變化的技術和強耦合的客戶服務端環境，AJAX提出了一種新的開發方式。AJAX開發人員必須理解傳統的MVC架構，這限制了套用層次之間的邊界。同時，開發人員還需要考慮CS環境的外部和使用AJAX技術來重定型MVC邊界。最重要的是，AJAX開發人員必須禁止以頁面集合的方式來考慮Web套用而需要將其認為是單個頁面。一旦UI設計與服務架構之間的範圍被嚴格區分開來後，開發人員就需要更新和變化的技術集合了。
開發框架
隨著AJAX迅速地引人注目起來，我想開發人員對這種技術的期待也迅速地增加。就像任何新技術，AJAX的興旺也需要一整個開發工具/程式語言及相關技術系統來支撐。
JSer
JSer是國人開發的一款全功能的開源腳本框架，使用JSer可以極其方便的進行AJAX操作。
以下代碼演示了如何使用JSer傳送一個異步的AJAX POST請求：
JSer.url("save.jsp").set({
key:"test",
name:"book" /*向save.jsp程式傳送兩個POST參數，分別是key=test, name=book*/
}).ajax({ //執行AJAX請求
method:'post', //POST方式傳送請求
success:function(d){ //AJAX請求成功時執行此回調函式
alert(d); //彈出返回提示
}
});
主要技術
web標準（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）進行動態顯示及互動；
使用 XML 和 XSLT 進行數據交換及相關操作；
使用 XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript 將所有的東西綁定在一起。英文參見Ajax的提出者Jesse James Garrett的原文,原文題目（Ajax: A New Approach to Web Applications）。
類似於DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。事實上，一些基於AJAX的“派生/合成”式（derivative/composite）的技術正在出現，如“AFLAX”。
AJAX的套用使用支持以上技術的web瀏覽器作為運行平台。這些瀏覽器目前包括：
JavaScript
如名
字所示，AJAX的概念中最重要而最易被忽視的是它也是一種JavaScript程式語言。JavaScript是一種粘合劑使AJAX套用的各部分集成在一起。在大部分時間，JavaScript通常被服務端開發人員認為是一種企業級套用不需要使用的東西應該盡力避免。這種觀點來自以前編寫JavaScript代碼的經歷：繁雜而又易出錯的語言。類似的，它也被認為將套用邏輯任意地散布在服務端和客戶端中，這使得問題很難被發現而且代碼很難重用。在AJAX中JavaScript主要被用來傳遞用戶界面上的數據到服務端並返回結果。XMLHttpRequest對象用來回響通過HTTP傳遞的數據，一旦數據返回到客戶端就可以立刻使用DOM將數據放到網面上。
XMLHttpRequest
XMLHttpRequest對象在大部分瀏覽器上已經實現而且擁有一個簡單的接口允許數據從客戶端傳遞到服務端，但並不會打斷用戶當前的操作。使用XMLHttpRequest傳送的數據可以是任何格式，雖然從名字上建議是XML格式的數據。
開發人員應該已經熟悉了許多其他XML相關的技術。XPath可以訪問XML文檔中的數據，但理解XML DOM是必須的。類似的，XSLT是最簡單而快速的從XML數據生成HTML或XML的方式。許多開發人員已經熟悉Xpath和XSLT，因此AJAX選擇XML作為數據交換格式是有意義的。XSLT可以被用在客戶端和服務端，它能夠減少大量的用JavaScript編寫的套用邏輯。
CSS
為了正確的瀏覽AJAX套用，CSS是一種AJAX開發人員所需要的重要武器。CSS提供了從內容中分離套用樣式和設計的機制。雖然CSS在AJAX套用中扮演至關重要的角色，但它也是構建跨瀏覽器套用的一大阻礙，因為不同的瀏覽器廠商支持各種不同的CSS級別。
伺服器端
但不像在客戶端，在服務端AJAX套用還是使用建立在如Java,.Net和PHP語言基礎上機制；並沒有改變這個領域中的主要方式。
既然如此，我們對Ruby on Rails框架的興趣也就迅速增加了。在一年多以前，Ruby on Rails已經吸引了大量開發人員基於其強大功能來構建Web和AJAX套用。雖然目前還有很多快速套用開發工具存在，Ruby o n Rails看起來已經儲備了簡化構建AJAX套用的能力。
兼容調試
調試問題
在實際構建AJAX套用中，你需要的不只是文本編輯器。既然JavaScript是非編譯的，它可以容易地編寫和運行在瀏覽器中。然而，許多工具提供了有用的擴展如語法高亮和智慧型完成。
不同的IDE提供了對JavaScript支持的不同等級。來自JetBrains的IntelliJ IDEA是一個用來JavaScript開發的更好的IDE，雖然許多開發人員也喜歡Microsoft’s Visual Studio產品（允諾會在最新的版本中改善對AJAX的支持）。Eclipse包含了兩個免費的JavaScript編輯器外掛程式和一個商業的來自ActiveStat的Komodo IDE。
另一個JavaScript和AJAX開發中的問題是調試困難。不同的瀏覽器提供不同的通常是隱藏的運行時錯誤信息，而JavaScript的缺陷如雙重變數賦值（通常是由於缺少數據類型）使得調試更加困難。在AJAX的開發中，調試就更複雜了，因為其需要標識究竟是客戶端還是服務端產生的錯誤。在過去，JavaScript調試的方法是刪除所有代碼然後一行行的增加直到錯誤出現。現在，更多開發人員回到為IE準備的Microsoft Script Debugger和為Mozilla瀏覽器準備的Venkman。
瀏覽器
JavaScript編程的最大問題來自不同的瀏覽器對各種技術和標準的支持。構建一個運行在不同瀏覽器（如IE和火狐）是一個困難的任務。因此幾種AJAX JavaScript框架或者生成基於服務端邏輯或標記庫的JavaScript，或者提供符合跨瀏覽器AJAX開發的客戶端JavaScript庫。一些流行的框架包括：Jquery,Backbase,Bitkraft,Django,DOJO,DWR,MochiKit,Prototype,Rico,Sajax,Sarissa,and Script.
這些框架給開發人員更多的空間使得他們不需要擔心跨瀏覽器的問題。雖然這些框架提升了開發人員構建套用的能力，但由於廠商已經開發了更細節的用戶界面的打包組件解決方案，因此在AJAX組件市場中需要考慮一些其他因素。例如提供通用用戶界面的組件如組合框和數據柵格的幾個廠商，都可以被用來在套用中創建良好的通過類似電子數據表方式來查看和編輯數據的體驗。但這些組件不僅是封裝了組件的用戶界面而且包括與服務端數據的通訊方式，這些組件通常使用基於標記方式來實現如或JSF控制項。
示例程式
將以下文本放入一個HTML頁面即可看到效果，將會有兩次彈出提示，最後在頁面上顯示YES，表示完成
<SCRIPT LANGUAGE="JavaScript">
function ajaxByJyking(){
var xmlhttp_request = "";
try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Charset","gb2312"); }
break;}
catch(e){
xmlhttp_request = false; } } }
else if( window.XMLHttpRequest )
{ xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{ xmlhttp_request.override.MimeType('text/xml'); } } }
catch(e){ xmlhttp_request = false; }
xmlhttp_request.send(null);
xmlhttp_request.onreadystatechange = function(){
if (xmlhttp_request.readyState == 4) {
// 收到完整的伺服器回響
document.write("yes")
} else{
alert(1)
}
}
}
ajaxByJyking();
</SCRIPT>
優缺點
優點
傳統的web套用允許用戶填寫表單(form），當提交表單時就向web伺服器傳送一個請求。伺服器接收並處理傳來的表單，然後返回一個新的網頁。這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分HTML代碼往往是相同的。由於每次套用的互動都需要向伺服器傳送請求，套用的回響時間就依賴於伺服器的回響時間。這導致了用戶界面的回響比本地套用慢得多。
與此不同，AJAX套用可以僅向伺服器傳送並取回必需的數據，它使用SOAP或其它一些基於XML的web service接口，並在客戶端採用JavaScript處理來自伺服器的回響。因此在伺服器和瀏覽器之間交換的數據大量減少，結果我們就能看到回響更快的套用。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web伺服器的處理時間也減少了。
使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護數據。這使得Web應用程式更為迅捷地回套用戶動作，並避免了在網路上傳送那些沒有改變過的信息。
Ajax不需要任何瀏覽器外掛程式，但需要用戶允許JavaScript在瀏覽器上執行。就像DHTML應用程式那樣，Ajax應用程式必須在眾多不同的瀏覽器和平台上經過嚴格的測試。隨著Ajax的成熟，一些簡化Ajax使用方法的程式庫也相繼問世。同樣，也出現了另一種輔助程式設計的技術，為那些不支持JavaScript的用戶提供替代功能。
缺點
對套用Ajax最主要的批評就是，它可能破壞瀏覽器後退按鈕的正常行為。在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，這是因為瀏覽器僅能記下歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；用戶通常都希望單擊後退按鈕，就能夠取消他們的前一次操作，但是在Ajax應用程式中，卻無法這樣做。不過開發者已想出了種種辦法來解決這個問題，當中大多數都是在用戶單擊後退按鈕訪問歷史記錄時，通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。（例如，當用戶在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜尋，然後將搜尋結果反映到Ajax元素上，以便將應用程式狀態恢復到當時的狀態。）
一個相關的觀點認為，使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中。該問題的解決方案也已出現，大部分都使用URL片斷標識符（通常被稱為錨點，即URL中#後面的部分）來保持跟蹤，允許用戶回到指定的某個應用程式狀態。（許多瀏覽器允許JavaScript動態更新錨點，這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點。）這些解決方案也同時解決了許多關於不支持後退按鈕的爭論。
進行Ajax開發時，網路延遲——即用戶發出請求到伺服器發出回響之間的間隔——需要慎重考慮。不給予用戶明確的回應 ，沒有恰當的預讀數據 ，或者對XMLHttpRequest的不恰當處理，都會使用戶感到延遲，這是用戶不願看到的，也是他們無法理解的。通常的解決方案是，使用一個可視化的組件來告訴用戶系統正在進行後台操作並且正在讀取數據和內容。
一些手持設備（如手機、PDA等）現在還不能很好的支持Ajax;
用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是讓人頭痛的事；
Ajax的無刷新重載，由於頁面的變化沒有刷新重載那么明顯，所以容易給用戶帶來困擾――用戶不太清楚現在的數據是新的還是已經更新過的；現有的解決有：在相關位置提示、數據更新的區域設計得比較明顯、數據更新後給用戶提示等；
對串流媒體的支持沒有FLASH、Java Applet好；
基礎套用
創建XMLHttpRequest 方法
XMLHttpRequest類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。後來Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創建XMLHttpRequest類的方法不同。
對於Internet Explorer瀏覽器：
Internet 5.0-6.0:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
Internet 7.0及以上:
xmlhttp_request = new XMLHttpRequest();
自動判斷的代碼:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
由於在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的兼容不同版本的Internet Explorer瀏覽器，因此我們需要根據不同版本的Internet Explorer瀏覽器來創建XMLHttpRequest類，上面代碼就是根據不同的Internet Explorer瀏覽器創建XMLHttpRequest類的方法。
對於Mozilla﹑Netscape﹑Safari等瀏覽器
創建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest();
如果伺服器的回響沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。為了解決這個問題，如果伺服器回響的header不是text/xml，可以調用其它方法修改該header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在實際套用中，為了兼容多種不同版本的瀏覽器，一般將創建XMLHttpRequest類的方法寫成如下形式：
try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Charset","gb2312"); }
break;}
catch(e){
xmlhttp_request = false; } } }
else if( window.XMLHttpRequest )
{ xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{ xmlhttp_request.overrideMimeType('text/xml'); } } }
catch(e){ xmlhttp_request = false; }
傳送請求
可以調用HTTP請求類的open（）和send（）方法，如下所示：
xmlhttp_request.open('GET',URL,true);
xmlhttp_request.send(null);
open（）的第一個參數是HTTP請求方式—GET，POST或任何伺服器所支持的您想調用的方式。按照HTTP規範，該參數要大寫；否則，某些瀏覽器（如Firefox）可能無法處理請求。
第二個參數是請求頁面的URL。
第三個參數設定請求是否為異步模式。如果是TRUE，JavaScript函式將繼續執行，而不等待伺服器回響。這就是"AJAX"中的"A"。
伺服器的回響
這需要告訴HTTP請求對象用哪一個JavaScript函式處理這個回響。可以將對象的onreadystatechange屬性設定為要使用的JavaScript的函式名，如下所示：
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript創建的函式名，注意不要寫成FunctionName（），當然我們也可以直接將JavaScript代碼創建在onreadystatechange之後，例如：
xmlhttp_request.onreadystatechange = function(){
// JavaScript代碼段
};
首先要檢查請求的狀態。只有當一個完整的伺服器回響已經收到了，函式才可以處理該回響。XMLHttpRequest 提供了readyState屬性來對伺服器回響進行判斷。
readyState的取值如下：
0 （未初始化）
1 （正在裝載）
2 （裝載完畢）
3 （互動中）
4 （完成）
所以只有當readyState=4時，一個完整的伺服器回響已經收到了，函式才可以處理該回響。具體代碼如下：
if (http_request.readyState == 4) { // 收到完整的伺服器回響 }
else { // 沒有收到完整的伺服器回響 }
當readyState=4時，一個完整的伺服器回響已經收到了，接著，函式會檢查HTTP伺服器回響的狀態值。完整的狀態取值可參見W3C文檔。當HTTP伺服器回響的值為200時，表示狀態正常。
處理從伺服器得到的數據
有兩種方式可以得到這些數據：
(1) 以文本字元串的方式返回伺服器的回響
(2) 以XMLDocument對象方式返迴響應
程式架構
應用程式框架
1.1 Bindows（自從2003年）
它，通過強力聯合DHTML，JavaScript，CSS和XML等技術，能生成高度互動的網際網路應用程式-成為現代的桌面應用程式的強有力對手。Bindows應用程式不要求下載和也不需要在用戶端安裝-僅要求有一個瀏覽器（也不需要Java，Flash或者ActiveX）。Bindows有可能領導面向對象開發的AJAX應用程式的平台。
1.2 BackBase（自從2003年）
網址是：，是一個全面的瀏覽器端框架，支持豐富的瀏覽器功能以及與.NET和Java的集成。
·商業化，來自於Backbase B.V（總部在Amsterdam，成立於2003年）。
1.3 DOJO（開發中；自從2004年9月）
網址是：/，提供全面視窗小組件和瀏覽器-伺服器訊息支持。
·為創建定製的Javascript視窗小組件提供框架支持。
1.4 Open Rico（開發中；自從2005年5月；基於早期的私有框架）
網址是：，是一多用途框架，支持Ajax基礎結構和用戶互動。
1.5 qooxdoo（開發中；自從2005年5月）
網址是：，是另一個雄心勃勃的框架，提供寬範圍的UI支持和正在開發中的基礎結構特性。
1.6 Tibet（開發中；自從2005年6月）
網址是：，目的是提供高度可移植的和全面的Javascript API，結果是，可能自動生成大量的客戶端代碼。自稱是"企業級Ajax"。
基礎結構框架
2.1 AjaxCaller(Alpha版本；自從2005年5月）
網址是：，是一基本的執行緒安全的XMLHttpRequest包裝器，主要針對Ajax新手，仍處於原始的alpha開發階段，
2.2 Flash JavaScript集成包
網址是：，允許JavaScript和Flash內容的集成
2.3 Google AJAXSLT（發行於2005年6月）
網址是：，是一個Javascript框架，用來執行XSLT轉換以及XPath查詢。
2.4 HTMLHttpRequest(Beta版；始於2005年）
HtmlHttpRequest（），它使用了XMLHttpRequest和Iframes以改進兼容性。
2.5 互動式網站框架（自從2005年5月）
互動式網站框架，是一個項目，目的是從瀏覽器端對Ajax基礎結構的多方面予以支持。自描述為"使用javascript，css，xml，和html來創造高度互動網站的框架。包括一個定製的針對高度可讀的javascript的xml分析器。實質上，是建立基於AJAX的網站的基礎，還有另外一些通用腳本"。
2.6 LibXMLHttpRequest（發行於2003年6月）
/connector?file=reference/2003/06/17/libXmlRequest.html），是XMLHttpRequest的一個瘦包裝器。
2.7 RSLite(x)
網站是：http/rs/main.htm，是一個針對XMLHttpRequest的瘦包裝器。
2.8 Sack（在開發中，自從2005年5月）
網站是：/2005/05/sack-of-ajax/，是一個針對XMLHttpRequest的瘦包裝器。
2.9 Sarissa（發行於2003年，2月）
網站是：http，是一種Javascript API，它封裝了在瀏覽器端可以獨立調用XML的功能。
2.10 XHConn（發行於自從2005年，4月）
網站是：/javascript/XHConn/，是一個對XMLHttpRequest的瘦包裝器。
2.11 Jquery
簡潔的思想：幾乎所有操作都是以選擇DOM元素（有強大的Selector）開始，然後是對其的操作（Chaining等特性）。
伺服器端：多種語言
3.1 跨平台異步的接口工具箱(2005年5月）
CPAINT：，是一真正的支持PHP和ASP/Vbscript的Ajax實現和JSRS(JavaScript遠程腳本）實現。CPAINT提供給你需求的代碼在後台實現AJAX和JSRS，而返回的數據以JavaScript形式在前台操作，格式化和顯示。這允許你創建能提供接近實時的反饋給用戶的web應用程式。
3.2 SAJAX（可用，但是不是1.0版本；自從2005年3月）
網站是：http:///sajax/，直接把調用從Javascript傳送到你的伺服器端語言並再次回返。
3.3 Javascipt對象標誌（JSON）和JSON-RPC
JSON(http/index.html），是一個"胖的自由的XML選擇"，而JSON-RPC(/）是一種遠程過程協定，類似於XML-RPC，強有力支持Javascript客戶。
3.4 Javascript遠程腳本（JSRS）（自從2000年）
網址是：http/test.htm，直接把調用從Javascript傳送到你的伺服器端語言並再次回返。
伺服器端：Java
4.1 WebORB for Java（自從2005年8月）
網址：http://weborb/aboutWeborb.htm，是一個平台，支持開發AJAX和基於Flash的胖客戶端應用程式，並可以把它們與Java對象和XML Web服務相系起來。線上舉例（http)
4.2 Echo 2（自從2005年3月）
網址是：http:///，允許你用純Java代碼編寫Ajax套用軟體（範例（http://demo./ia））。
4.3 Direct Web Remoting (DWR)(2005年）
網址是：http/，是一個框架，用於直接從Javascript代碼中調用Java方法。
4.4 SWATO(2005年）
網址是/，是一套可重用的和良好集成的Java/JavaScript庫，它實現了一種更容易的方式來改變你的web應用程式的互動，它是通過AJAX方式實現。
伺服器端：Lisp
5.1 CL-Ajax
網址，實現Javascript直接調用伺服器端Lisp函式。
伺服器端：.NET
6.1 WebORB（自從2005年8月）
網址：/aboutWeborb.htm，是一個平台，用於開發AJAX和基於Flash的胖客戶端應用程式，並能把它們連線到.NET對象和XML Web服務。（線上舉例（http://))
6.2（自從2005年3月)
網址是：http/，是一個庫，實現從Javascript到伺服器端.NET的存取。
伺服器端：PHP
7.1 AjaxAC（自從2005年4月）
網址是：/，用單個的PHP類封裝了完整的應用程式。
7.2 JPSpan
網址是：http，直接把Javascript調用傳遞到PHP函式。
7.3 XAJAX
網址是：http，直接把Javascript調用傳遞到PHP函式。
伺服器端：Ruby
Ruby On Rails/）是一個通常的強力支持Ajax的web框架：
實例展示
XMLHttpRequest 對象
通過使用 XMLHttpRequest 對象，web 開發者可以做到在頁面已載入後從伺服器更新頁面！
在 2005 年 AJAX 被 Google 推廣開來（Google Suggest）。
Google 建議使用 XMLHttpRequest 對象來創建一種動態性極強的 web 界面：當您開始在 Google 的搜尋框中輸入查詢時，JavaScript 會向某個伺服器發出這些字詞，然後伺服器會返回一系列的搜尋建議。
XMLHttpRequest 對象得到下列瀏覽器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。
AJAX Http 請求
Previous PageNext Page
AJAX 使用 Http 請求 在傳統的 JavaScript 編程中，假如您希望從伺服器上的檔案或資料庫中得到任何的信息，或者向伺服器傳送信息的話，就必須利用一個 HTML 表單向伺服器 GET 或 POST 數據。而用戶則需要單擊“提交”按鈕來傳送/獲取信息，等待伺服器的回響，然後一張新的頁面會載入結果。
由於每當用戶提交輸入後伺服器都會返回一張新的頁面，傳統的 web 應用程式變得運行緩慢，且越來越不友好。
通過利用 AJAX，您的 JavaScript 會通過 JavaScript 的XMLHttpRequest對象，直接與伺服器來通信。
通過使用 HTTP 請求，web 頁可向伺服器進行請求，並得到來自伺服器的回響，而不載入頁面。用戶可以停留在同一個頁面，他或她不會注意到腳本在後台請求過頁面，或向伺服器傳送過數據。
您的第一個 AJAX 應用程式
為了讓您理解 AJAX 的工作原理，我們將創建一個小型的 AJAX 應用程式。
首先，我們需要一個帶有兩個文本框的 HTML 表單：用戶名和時間。用戶名文本框由用戶填寫，而時間文本框使用 AJAX 進行填寫。
此 HTML 檔案名稱為 "testAjax.htm"（請注意這個 HTML 表單沒有提交按鈕！）：
<html>
<body>
<form name="myForm">
用戶： <input type="text" name="username" />
時間： <input type="text" name="time" />
</form>
</body>
</html>；我們將在下一節解釋 AJAX 的基本原理。
AJAX 瀏覽器支持
Previous PageNext Page
AJAX - 瀏覽器支持 AJAX 的要點是 XMLHttpRequest 對象。
不同的瀏覽器創建 XMLHttpRequest 對象的方法是有差異的。
IE 瀏覽器使用ActiveXObject，而其他的瀏覽器使用名為XMLHttpRequest的 JavaScript 內建對象。
如需針對不同的瀏覽器來創建此對象，我們要使用一條 "try and catch" 語句。您可以在我們的 JavaScript 教程中閱讀更多有關try 和 catch 語句的內容。
讓我們用這段創建 XMLHttpRequest 對象的 JavaScript 來更新一下我們的 "testAjax.htm" 檔案：<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的瀏覽器不支持AJAX！");
return false;
}
}
}
}
</script>
<form name="myForm">
用戶： <input type="text" name="username" />
時間： <input type="text" name="time" />
</form></body>
</html>
例子解釋：
首先聲明一個保存 XMLHttpRequest 對象的 xmlHttp 變數。
然後使用 XMLHttp=new XMLHttpRequest() 來創建此對象。這條語句針對 Firefox、Opera 以及 Safari 瀏覽器。假如失敗，則嘗試針對 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，則嘗試針對 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
假如這三種方法都不起作用，那么這個用戶所使用的瀏覽器已經太過時了，他或她會看到一個聲明此瀏覽器不支持 AJAX 的提示。
注釋：上面這些瀏覽器定製的代碼很長，也很複雜。不過，每當您希望創建 XMLHttpRequest 對象時，這些代碼就能派上用場，因此您可以在任何需要使用的時間拷貝貼上這些代碼。上面這些代碼兼容所有的主流瀏覽器：Internet Explorer、Opera、Firefox 以及 Safari。
下一節為您展示如何使用 XMLHttpRequest 對象與伺服器進行通信。
AJAX - XMLHttpRequest 對象
Previous PageNext Page
AJAX - 更多有關 XMLHttpRequest 對象的知識
在向伺服器傳送數據之前，我們有必要解釋一下 XMLHttpRequest 對象的三個重要的屬性。
onreadystatechange 屬性
onreadystatechange 屬性存有處理伺服器回響的函式。下面的代碼定義一個空的函式，可同時對 onreadystatechange 屬性進行設定：
xmlHttp.onreadystatechange=function()
{
// 我們需要在這裡寫一些代碼
}
readyState 屬性
readyState 屬性存有伺服器回響的狀態信息。每當 readyState 改變時，onreadystatechange 函式就會被執行。
這是 readyState 屬性可能的值：
? | ? |
0 | 請求未初始化（在調用 open() 之前） |
1 | 請求已提出（調用 send() 之前） |
2 | 請求已傳送（這裡通常可以從回響得到內容頭部） |
3 | 請求處理中（回響中通常有部分數據可用，但是伺服器還沒有完成回響） |
4 | 請求已完成（可以訪問伺服器回響並使用它） |
我們要向這個 onreadystatechange 函式添加一條 If 語句，來測試我們的回響是否已完成（意味著可獲得數據）：
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // 從伺服器的response獲得數據 } }
responseText 屬性
可以通過 responseText 屬性來取回由伺服器返回的數據。
在我們的代碼中，我們將把時間文本框的值設定為等於 responseText：
xmlHttp.onreadystatechange=function()
{ if(xmlHttp.readyState==4)
{ document.myForm.time.value=xmlHttp.responseText; }
}
下一節，我們會介紹如何向伺服器請求數據！
AJAX - 請求伺服器
Previous PageNext Page
AJAX - 向伺服器傳送一個請求
要想把請求傳送到伺服器，我們就需要使用 open() 方法和 send() 方法。
open() 方法需要三個參數。第一個參數定義傳送請求所使用的方法（GET 還是 POST）。第二個參數規定伺服器端腳本的 URL。第三個參數規定應當對請求進行異步地處理。
send() 方法可將請求送往伺服器。如果我們假設 HTML 檔案和 ASP 檔案位於相同的目錄，那么代碼是這樣的：
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
現在，我們必須決定何時執行 AJAX 函式。當用戶在用戶名文本框中鍵入某些內容時，我們會令函式“在幕後”執行。
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的瀏覽器不支持AJAX！");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
用戶： <input type="text" name="username" onkeyup="ajaxFunction();" />
時間： <input type="text" name="time" />
</form>
</body>
</html>
下一節介紹 "time.asp" 的腳本，這樣我們完整的 AJAX 應用程式就搞定了。
AJAX -伺服器端的腳本
Previous PageNext Page
AJAX - 伺服器端的腳本
現在，我們要創建可顯示當前伺服器時間的腳本。
responseText 屬性會存儲從伺服器返回的數據。在這裡，我們希望傳回當前的時間。
這是 "time.asp" 的代碼：
<% response.expires=-1;response.write(time)%>
注釋：Expires 屬性可設定在頁面快取失效前頁面被快取的時間（分鐘）。Response.Expires=-1 指示頁面不會被快取。
運行您的 AJAX 應用程式
請在下面的文本框中鍵入一些文本，然後單擊時間文本框：
用戶： 時間：
時間文本框可在不載入頁面的情況下從 "time.asp" 獲得伺服器的時間！
問題對策
瀏覽器兼容性問題
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開發框架大致可分為兩類：
[1]將業務邏輯及表現層放在瀏覽器，數據層放在伺服器：因為所有的程式以JavaScript執行在客戶端，只有需要數據時才向伺服器要求服務，此法又稱為胖客戶端（fat client）架構。伺服器在此架構下通常僅用於提供及儲存數據。此法的好處在於程式設計師可以充分利用JavaScript搭配業務邏輯來做出特殊的用戶接口，以符合終端用戶的要求。但是問題也不少，主因在第一，JavaScript語言本身之能力可能不足以處理複雜的業務邏輯。第二，JavaScript的執行效能一向不好。第三，JavaScript訪問伺服器數據，仍需適當的伺服器端程式之配合。第四，瀏覽器兼容性的問題又出現。有些Ajax開發框架如DWR企圖以自動生成JavaScript之方式來避免兼容的問題，並開立通道使得JavaScript可以直接調用伺服器端的Java程式來簡化數據的訪問。但是前述第一及第二兩個問題仍然存在，程式設計師必須費相當的力氣才能達到應用程式之規格要求，或可能根本無法達到要求。
[2]將表現層、業務邏輯、及數據層放在伺服器，瀏覽器僅有用戶接口引擎（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中文傳值亂碼問題解決方法
在瀏覽器端對要傳遞的中文參數進行編碼處理.代碼如下:
xmlhttp.open("POST","AjaxServlet",true); //請求參數初始化
xmlhttp.send("str="+encodeURI(encodeURI("安安DIY創作室"))); //向伺服器端傳送參數
在伺服器端代碼:
PrintWriter out = response.getWriter(); //得到response的輸出流對象
String str = request.getParameter("str"); //得到頁面上名字為str的參數
String str2 = URLDecoder.decode(str,"utf-8"); //對得到的參數進行解碼
out.print(str); //向瀏覽器端傳送數據
