從現在開始，我把自己學習AJAX的一些心得體會寫出來。打算以短小的實例爲主，用實例來說明問題。對於AJAX的瞭解肯定是需要不少理論的，這裏我就不會多說了，網上有很多資料。一些好的資料，我會以參考或引用的方式給列出來。
好了，首先來看看XML HTTP Request 的用法。看實例：
例1：顯示本地文件內容
兩個文件： ajax1.html和hello.txt。
| ajax1.html |
|
<HTML>
<HEAD> <TITLE>實例1：XMLHTTP的簡單使用 </TITLE> <script type = "text/javascript">
function HelloAjax(localfile){ var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("Get", localfile, false); xmlhttp.send(null); alert(xmlhttp.responseText); } </script> </HEAD>
<BODY>
<INPUT TYPE="button" VALUE="實例1" onClick="HelloAjax('hello.txt')"> </BODY> </HTML>
|
用記事本新建一個 hello.txt 文件，內容就一句：“ Hello AJAX! ”。
將ajax1.html和hello.txt這兩個文件放在同一目錄下，在IE瀏覽器中打開ajax1.htm，點擊“實例1”按鈕，可以看到如下所示：
例2：獲取網頁源代碼
| ajax2.html |
|
<HTML>
<HEAD> <TITLE>實例2：獲取網頁源代碼 </TITLE> <script type = "text/javascript">
function getSourceCode(){ var myUrl = document.getElementById("urlInput").value; var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("GET", myUrl); xmlhttp.send(null); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { document.getElementById("sourceCode").value = xmlhttp.responseText; } } } } </script> </HEAD>
<BODY>
請輸入URL: <INPUT TYPE="text" id="urlInput" value="http://blog.csdn.net/javamxj/" size="40" > <INPUT TYPE="button" value="查看源代碼" onClick="getSourceCode()"></br> <textArea id="sourceCode" style="width:50%; height:200;"></textArea> </BODY> </HTML>
|
在IE瀏覽器中打開這個網頁，點擊“查看源代碼”，如果網絡正常，應該如下顯示。
說明：
爲了簡單，以上兩個例子都只能在IE瀏覽器中打開，對於FireFox瀏覽器不適用。
在例1中，ajax1.html中的函數HelloAjax把從hello.txt中的內容用alert方法顯示出來，我們所要了解的是它如何做到的。
關鍵是XML HTTP Request ，有篇經典的文章的可以參考《Using the XML HTTP Request object》，如果不習慣英文，可以看看相關的翻譯《 [翻譯]使用
XML HTTP Request 對象(2006.1) 》，還有一箇中文站點：XMLHttp中文參考，也是比較不錯的。
IE中使用ActiveX控件方式創建XmlHttp對象，如 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 如果你使用的是IE6，可以使用XMLHTTP的更高級版本，如 "Msxml2.XMLHTTP.7.0",
"Msxml2.XMLHTTP.6.0"等等，版本越高，也許速度更快、性能更好，反正具體如何我不清楚。
而在非IE的瀏覽器中，是用 new XMLHttpRequest() 來創建一個對象的（據說在IE 7中，XMLHTTP 將作爲本地 Javascript 對象，也許也可以這樣創建了）。
在創建一個XMLHttp對象後，就可以使用它的open方法了，其參數爲 open(http-method, Url, boolAsync, userID, password)。前兩個是必要的，後兩個是可選的(在服務器需要進行身份驗證時提供)。參數的含義如下所示：
http-method： HTTP的通信方式，比如GET, HEAD, POST, PUT, DELETE, CONNECT等，常用GET，POST。
url： 接收XML數據的服務器的URL地址。URL可帶QueryString
boolAsync： 一個布爾標識，說明請求是否爲異步的。如果是異步通信方式(true)，客戶機就不等待服務器的響應；如果是同步方式(false)，客戶機就要等到服務器返回消息後纔去執行其他操作，默認爲 true。
userID: 用戶ID，用於服務器身份驗證
password: 用戶密碼，用於服務器身份驗證
url： 接收XML數據的服務器的URL地址。URL可帶QueryString
boolAsync： 一個布爾標識，說明請求是否爲異步的。如果是異步通信方式(true)，客戶機就不等待服務器的響應；如果是同步方式(false)，客戶機就要等到服務器返回消息後纔去執行其他操作，默認爲 true。
userID: 用戶ID，用於服務器身份驗證
password: 用戶密碼，用於服務器身份驗證
在例1中，使用的Get方式，獲取的url是一個本地文件，使用的是同步方式。注意：一般很少使用同步方式，如果處理的是本地文件且文件不大，也可以使用同步方式，但如果處理的是網絡上的文件，網絡性能不好的話，看起來就像死機一樣。
在例2中，使用的還是Get方式，獲取的是一個網頁文件的源代碼，使用的異步方式。
因爲使用的是異步方式，瀏覽器向服務器發出請求後，不必等待服務器的響應。那麼在服務器完成請求後，就需要告訴請求者（瀏覽器）工作已經完成。這種方法的使用就引出了下面這個函數。
“xmlhttp.onreadystatechange=function(){...}”是關鍵，onreadystatechange 屬性的字面上的意思就是狀態改變時準備做什麼，它將註冊一個回調函數，一旦請求完成就會調用該函數。這個函數是在異步方式下使用的，如果採用的同步方式，那麼就沒有必要使用這個函數了。
再看看如何處理服務器的相應。當xmlhttp的就緒狀態等於4，並且Http狀態碼等於200時，將從服務器中得到的響應以文本方式顯示在網頁的TextArea中。
readyState的五種狀態：
0：請求沒有發出（在調用 open() 之前）。
1：請求已經建立但還沒有發出（調用 send() 之前）。
2：請求已經發出正在處理之中（這裏通常可以從響應得到內容頭部）。
3：請求已經處理，響應中通常有部分數據可用，但是服務器還沒有完成響應。
4：響應已完成，可以訪問服務器響應並使用它。
1：請求已經建立但還沒有發出（調用 send() 之前）。
2：請求已經發出正在處理之中（這裏通常可以從響應得到內容頭部）。
3：請求已經處理，響應中通常有部分數據可用，但是服務器還沒有完成響應。
4：響應已完成，可以訪問服務器響應並使用它。
一些常見的狀態碼爲：
200 - 服務器成功返回網頁
404 - 請求的網頁不存在
503 - 服務器超時
404 - 請求的網頁不存在
503 - 服務器超時
注：
由於使用的是Get方式提交數據，可以通過URL本身發送數據，這裏send()方法的參數爲null或“”，如果使用Post方式提交數據，那麼send()方法的參數就是要提交的數據。
編碼
現在，hello.txt文件中增加一行漢字，如：“歡迎來到javamxj的Blog”，保存。刷新ajax1.html，然後點擊“實例1”按鈕，這個時候彈出的窗口中的第二行應該是亂碼。用“記事本”打開hello.txt，點擊“文件 －>另存爲”，注意這時彈出的“另存爲”窗口中的文件編碼應該是“ANSI”，現在要改變它，選擇編碼爲“Unicode”或“UTF-8”，保存。然後再次點擊“實例1”按鈕，可以看到漢字已經正確顯示出來了。
將ajax2.html中的輸入URL改爲“http://www.baidu.com”,點擊“查看源代碼”按鈕，可以看到也出現了亂碼，注意到：其源代碼中含有 <meta http-equiv=Content-Type content="text/html; charset=gb2312"> ，而
“http://blog.csdn.net/javamxj/”中含有 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ,這兩個網頁的編碼是不同的。因爲XMLHTTP默認將響應數據的編碼定爲UTF-8，所以csdn網站的數據被正確解析了，而百度的數據卻不能正確解析。
//原創地址:http://blog.csdn.net/javamxj/article/details/1051210