AJAX 指非同步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
您應當具備的基礎知識
在繼續學習之前，您需要對下面的知識有基本的瞭解： HTML / XHTML JavaScript
AJAX = 非同步 JavaScript 及 XML（Asynchronous JavaScript and XML）
AJAX 不是一種新的程式設計語言，而是一種用於建立更好更快以及互動性更強的 Web 應用程式的技術。
通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與伺服器進行通訊。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 服務器交換資料。
AJAX 在瀏覽器與 Web 服務器之間使用非同步資料轉送（HTTP 要求），這樣就可使網頁從伺服器請求少量的資訊，而不是整個頁面。
AJAX 可使網際網路應用程式更小、更快，更友好。
AJAX 是一種獨立於 Web 服務器軟體的瀏覽器技術。
AJAX 基於 Web 標準
AJAX 基於下列 Web 標準： JavaScript XML HTML CSS
在 AJAX 中使用的 Web 標準已被良好定義，並被所有的主流瀏覽器支援。AJAX 應用程式獨立於瀏覽器和平台。
AJAX 事關更優秀的應用程式
Web 應用程式較傳統型應用程式有諸多優勢；它們能夠涉及廣大的使用者，它們更易安裝及維護，也更易開發。
不過，網際網路應用程式並不像傳統的傳統型應用程式那樣完善且友好。
通過 AJAX，網際網路應用程式可以變得更完善，更友好。
AJAX 使用 Http 請求
在傳統的 JavaScript 編程中，假如您希望從伺服器上的檔案或資料庫中得到任何的資訊，或者向伺服器發送資訊的話，就必須利用一個 HTML 表單向伺服器 GET 或 POST 資料。而使用者則需要單擊“提交”按鈕來發送/擷取資訊，等待伺服器的響應，然後一張新的頁面會載入結果。
由於每當使用者提交輸入後伺服器都會返回一張新的頁面，傳統的 web 應用程式變得運行緩慢，且越來越不友好。
通過利用 AJAX，您的 JavaScript 會通過 JavaScript 的 XMLHttpRequest 對象，直接與伺服器來通訊。
通過使用 HTTP 要求，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 應用程式
為了讓您理解 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 的要點是 XMLHttpRequest 對象。
不同的瀏覽器建立 XMLHttpRequest 對象的方法是有差異的。
IE 瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內建對象。
如需針對不同的瀏覽器來建立此對象，我們要使用一條 "try and 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 對象的三個重要的屬性。 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; } }
要想把請求發送到伺服器，我們就需要使用 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>
AJAX - 伺服器端的指令碼
現在，我們要建立可顯示當前伺服器時間的指令碼。
responseText 屬性會儲存從伺服器返回的資料。在這裡，我們希望傳回當前的時間。這是 "time.asp" 的代碼：
<%response.expires=-1response.write(time)%>
注釋：Expires 屬性可設定在頁面緩衝失效前頁面被緩衝的時間（分鐘）。Response.Expires=-1 指示頁面不會被緩衝。 運行您的 AJAX 應用程式
請在下面的文字框中鍵入一些文本，然後單擊時間文字框： 使用者: 時間:
時間文字框可在不載入頁面的情況下從 "time.asp" 獲得伺服器的時間。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
