AJAX 基礎
AJAX 指非同步 JavaScript 及 XML （Asynchronous JavaScript And XML ）。
AJAX 是一種在 2005 年由 Google 推廣開來的編程模式。
AJAX 不是一種新的程式設計語言，而是一種使用現有標準的新方法。
通過 AJAX ，你可以建立更好、更快以及更友好的 WEB 應用程式。
AJAX 基於 JavaScript 和 HTTP 要求（HTTP requests ）。
AJAX 簡介
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 ，網際網路應用程式可以變得更完善，更友好。（想看更多就到topic.alibabacloud.comAJAX開發手冊欄目中學習）
AJAX Http 請求
A JAX 使用 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 - 瀏覽器支援
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){ 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 。
AJAX - XMLHttpRequest 對象
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 - 請求伺服器
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>
AJAX - 伺服器端的指令碼
現在，我們要建立可顯示當前伺服器時間的指令碼。
responseText 屬性會儲存從伺服器返回的資料。在這裡，我們希望傳回當前的時間。這是 "time.asp" 的代碼：
<%response.expires=-1response.write(time)%>
注釋：Expires 屬性可設定在頁面緩衝失效前頁面被緩衝的時間（分鐘）。Response.Expires=-1 指示頁面不會被
緩衝。
運行您的 AJAX 應用程式
請在下面的文字框中鍵入一些文本，然後單擊時間文字框：
使用者 : 時間 :
時間文字框可在不載入頁面的情況下從 "time.asp" 獲得伺服器的時間！
本篇文章到這就結束了（想看更多就到topic.alibabacloud.comAJAX使用手冊欄目中學習），有問題的可以在下方留言提問。
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
