AJAX簡介：
AJAX 指異步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
JAX 不是一種新的編程語言，而是一種用于創(chuàng)建更好更快以及交互性更強的 Web 應用程序的技術(shù)。
通過 AJAX，你可以創(chuàng)建更好、更快以及更友好的 WEB 應用程序。
AJAX 基于 JavaScript 和 HTTP 請求（HTTP requests）。
----------------------------------------------------------------------------------------------
AJAX = 異步 JavaScript 及 XML（Asynchronous JavaScript and XML）
通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與服務器進行通信。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 服務器交換數(shù)據(jù)。
AJAX 在瀏覽器與 Web 服務器之間使用異步數(shù)據(jù)傳輸（HTTP 請求），這樣就可使網(wǎng)頁從服務器請求少量的信息，而不是整個頁面。
AJAX 可使因特網(wǎng)應用程序更小、更快，更友好。
AJAX 是一種獨立于 Web 服務器軟件的瀏覽器技術(shù)。
----------------------------------------------------------------------------------------------
AJAX 使用 Http 請求
在傳統(tǒng)的 JavaScript 編程中，假如您希望從服務器上的文件或數(shù)據(jù)庫中得到任何的信息，或者向服務器發(fā)送信息的話，就必須利用一個 HTML 表單向服務器 GET 或 POST 數(shù)據(jù)。而用戶則需要單擊“提交”按鈕來發(fā)送/獲取信息，等待服務器的響應，然后一張新的頁面會加載結(jié)果。
由于每當用戶提交輸入后服務器都會返回一張新的頁面，傳統(tǒng)的 web 應用程序變得運行緩慢，且越來越不友好。
通過利用 AJAX，您的 JavaScript 會通過 JavaScript 的 XMLHttpRequest 對象，直接與服務器來通信。
通過使用 HTTP 請求，web 頁可向服務器進行請求，并得到來自服務器的響應，而不加載頁面。用戶可以停留在同一個頁面，他或她不會注意到腳本在后臺請求過頁面，或向服務器發(fā)送過數(shù)據(jù)。
----------------------------------------------------------------------------------------------XMLHttpRequest 對象
通過使用 XMLHttpRequest 對象，web 開發(fā)者可以做到在頁面已加載后從服務器更新頁面！
在 2005 年 AJAX 被 Google 推廣開來（Google Suggest）。
Google 建議使用 XMLHttpRequest 對象來創(chuàng)建一種動態(tài)性極強的 web 界面：當您開始在 Google 的搜索框中輸入查詢時，JavaScript 會向某個服務器發(fā)出這些字詞，然后服務器會返回一系列的搜索建議。
----------------------------------------------------------------------------------------------
您的第一個 AJAX 應用程序
AJAX - 瀏覽器支持
AJAX 的要點是 XMLHttpRequest 對象。
不同的瀏覽器創(chuàng)建 XMLHttpRequest 對象的方法是有差異的。
IE 瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內(nèi)建對象。
1 <html>
2 <body>
3
4 <script type="text/javascript">
5
6 function ajaxFunction()
7 {
8 var xmlHttp;
9
10 try
11 {
12 // Firefox, Opera 8.0+, Safari
13 xmlHttp=new XMLHttpRequest();
14 }
15 catch (e)
16 {
17
18 // Internet Explorer
19 try
20 {
21 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
22 }
23 catch (e)
24 {
25
26 try
27 {
28 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
29 }
30 catch (e)
31 {
32 alert("您的瀏覽器不支持AJAX！");
33 return false;
34 }
35 }
36 }
37 }
38 </script>
39
40 <form name="myForm">
41 用戶: <input type="text" name="username" />
42 時間: <input type="text" name="time" />
43 </form></body>
44 </html>
45
例子解釋：
首先聲明一個保存 XMLHttpRequest 對象的 xmlHttp 變量。
然后使用 XMLHttp=new XMLHttpRequest() 來創(chuàng)建此對象。這條語句針對 Firefox、Opera 以及 Safari 瀏覽器。假如失敗，則嘗試針對 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，則嘗試針對 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
假如這三種方法都不起作用，那么這個用戶所使用的瀏覽器已經(jīng)太過時了，他或她會看到一個聲明此瀏覽器不支持 AJAX 的提示。
----------------------------------------------------------------------------------------------
XMLHttpRequest 對象的三個重要的屬性
onreadystatechange 屬性
onreadystatechange 屬性存有處理服務器響應的函數(shù)。下面的代碼定義一個空的函數(shù)，可同時對 onreadystatechange 屬性進行設置：
1 xmlHttp.onreadystatechange=function(){
2 //我們需要在這里寫一些代碼
3 }
4
readyState 屬性
readyState 屬性存有服務器響應的狀態(tài)信息。每當 readyState 改變時，onreadystatechange 函數(shù)就會被執(zhí)行。
這是 readyState 屬性可能的值：
0 請求未初始化（在調(diào)用open（）之前）
1 請求已提出（調(diào)用send（）之前）
2 請求已發(fā)送（這里通常可以從響應得到內(nèi)容頭部）
3 請求處理中（響應中通常有部分數(shù)據(jù)可用，但是服務器還沒有完成響應）
4 請求已完成（可以訪問服務器響應并使用它）
我們要向這個 onreadystatechange 函數(shù)添加一條 If 語句，來測試我們的響應是否已完成（意味著可獲得數(shù)據(jù)）：
1 xmlHttp.onreadystatechange=function(){
2 if (xmlHttp.readyState == 4){
3 //從服務器的response獲得數(shù)據(jù)
4 }
5 }
6
responseText 屬性
可以通過 responseText 屬性來取回由服務器返回的數(shù)據(jù)。
----------------------------------------------------------------------------------------------
向服務器發(fā)送一個請求
要想把請求發(fā)送到服務器，我們就需要使用 open() 方法和 send() 方法。
open() 方法需要三個參數(shù)。第一個參數(shù)定義發(fā)送請求所使用的方法（GET 還是 POST）。第二個參數(shù)規(guī)定服務器端腳本的 URL。第三個方法規(guī)定應當對請求進行異步地處理。
send() 方法可將請求送往服務器。如果我們假設 HTML 文件和 ASP 文件位于相同的目錄，那么代碼是這樣的：
xmlHttp.open("GET","time.jsp",true);
xmlHttp.send(null);
1 <html>
2 <body>
3
4 <script type="text/javascript">
5
6 function ajaxFunction()
7 {
8 var xmlHttp;
9
10 try
11 {
12 // Firefox, Opera 8.0+, Safari
13 xmlHttp=new XMLHttpRequest();
14 }
15 catch (e)
16 {
17
18 // Internet Explorer
19 try
20 {
21 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
22 }
23 catch (e)
24 {
25
26 try
27 {
28 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
29 }
30 catch (e)
31 {
32 alert("您的瀏覽器不支持AJAX！");
33 return false;
34 }
35 }
36 }
37
38 xmlHttp.onreadystatechange=function()
39 {
40 if(xmlHttp.readyState==4)
41 {
42 document.myForm.time.value=xmlHttp.responseText;
43 }
44 }
45 xmlHttp.open("GET","time.asp",true);
46 xmlHttp.send(null);
47
48 }
49 </script>
50
51 <form name="myForm">
52 用戶: <input type="text" name="username" onkeyup="ajaxFunction();" />
53 時間: <input type="text" name="time" />
54 </form>
55
56 </body>
57 </html>
58
----------------------------------------------------------------------------------------------
AJAX - 服務器端的腳本
現(xiàn)在，我們要創(chuàng)建可顯示當前服務器時間的腳本。
responseText 屬性會存儲從服務器返回的數(shù)據(jù)。在這里，我們希望傳回當前的時間。這是 "time.asp" 的代碼：
1 <%
2 response.expires=-1
3 response.write(time)
4 %>
5
注釋：Expires 屬性可設置在頁面緩存失效前頁面被緩存的時間（分鐘）。Response.Expires=-1 指示頁面不會被緩存。