從現在開始，我把自己學習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: 使用者密碼，用於伺服器身分識別驗證 在
例1中，使用的Get方式，擷取的url是一個本地檔案，使用的是同步方式。
注意：一般很少使用同步方式，如果處理的是本地檔案且檔案不大，也可以使用同步方式，但如果處理的是網路上的檔案，網路效能不好的話，看起來就像死機一樣。 在
例2中，使用的還是Get方式，擷取的是一個網頁檔案的原始碼，使用的非同步方式。 因為使用的是非同步方式，瀏覽器向伺服器發出請求後，不必等待伺服器的響應。那麼在伺服器完成請求後，就需要告訴要求者（瀏覽器）工作已經完成。這種方法的使用就引出了下面這個函數。 “xmlhttp.
onreadystatechange=function(){...}”是關鍵，onreadystatechange 屬性的字面上的意思就是狀態改變時準備做什麼，它將註冊一個回呼函數，一旦請求完成就會調用該函數。這個函數是在非同步方式下使用的，如果採用的同步方式，那麼就沒有必要使用這個函數了。 再看看如何處理伺服器的相應。當xmlhttp的就緒狀態等於4，並且Http狀態代碼等於200時，將從伺服器中得到的響應以文本方式顯示在網頁的TextArea中。
readyState的五種狀態： 0：請求沒有發出（在調用 open() 之前）。
1：請求已經建立但還沒有發出（調用 send() 之前）。
2：請求已經發出正在處理之中（這裡通常可以從響應得到內容標題部）。
3：請求已經處理，響應中通常有部分資料可用，但是伺服器還沒有完成響應。
4：響應已完成，可以訪問伺服器響應並使用它。
一些常見的狀態代碼為： 200 - 伺服器成功返回網頁
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網站的資料被正確解析了，而百度的資料卻不能正確解析。
