首先，我們需要用JavaScript來建立XMLHttpRequest 類向伺服器發送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。 後來Mozilla、Netscape、Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們建立XMLHttpRequest類的方法不同。
對於Internet Explorer瀏覽器，建立XMLHttpRequest 方法如下：
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
由於在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的相容不同版本的Internet Explorer瀏覽器，因此我們需要根據不同版本的Internet Explorer瀏覽器來建立XMLHttpRequest類，上面代碼就是根據不同的Internet Explorer瀏覽器建立XMLHttpRequest類的方法。
對於Mozilla、Netscape、Safari等瀏覽器，建立XMLHttpRequest 方法如下：
xmlhttp_request = new XMLHttpRequest();
如果伺服器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。 為瞭解決這個問題，如果伺服器響應的header不是text/xml，可以調用其它方法修改該header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在實際應用中，為了相容多種不同版本的瀏覽器，一般將建立XMLHttpRequest類的方法寫成如下形式：
try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
}else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
}
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312");
break;}
catch(e){
xmlhttp_request = false;
}
}
}else if( window.XMLHttpRequest ){
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType('text/xml');
}
}
}catch(e){
xmlhttp_request = false;
}
在定義了如何處理響應後，就要發送請求了。可以調用HTTP請求類的open()和send()方法，如下所示：
xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);
open()的第一個參數是HTTP請求方式—GET，POST或任何伺服器所支援的您想調用的方式。 按照HTTP規範，該參數要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。
第二個參數是請求頁面的URL。
第三個參數佈建要求是否為非同步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待伺服器響應。這就是"AJAX"中的"A"。
用JavaScript來建立XMLHttpRequest 類向伺服器發送一個HTTP請求後，接下來要決定當收到伺服器的響應後，需要做什麼。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設定為要使用的JavaScript的函數名，如下所示：
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript建立的函數名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼建立在onreadystatechange之後，例如：
xmlhttp_request.onreadystatechange = function(){
// JavaScript程式碼片段
};
在這個函數中。首先要檢查請求的狀態。只有當一個完整的伺服器響應已經收到了，函數才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對伺服器響應進行判斷。
readyState的取值如下：
0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (互動中)
4 (完成)
所以只有當readyState=4時，一個完整的伺服器響應已經收到了，函數才可以處理該響應。具體代碼如下：
if (http_request.readyState == 4) {
// 收到完整的伺服器響應
} else {
// 沒有收到完整的伺服器響應
}
當readyState=4時，一個完整的伺服器響應已經收到了，接著，函數會檢查HTTP伺服器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP伺服器響應的值為200時，表示狀態正常。
在檢查完請求的狀態值和響應的HTTP狀態值後，就可以處理從伺服器得到的資料了。有兩種方式可以得到這些資料：
(1) 以文本字串的方式返回伺服器的響應
(2) 以XMLDocument對象方式返迴響應
執行個體一： 用文本字串的方式返回伺服器的響應來驗證網易通行證帳號是否存在
首先，我們登陸網易通行證註冊頁面，可以看到檢測使用者名稱是否存在是將使用者名稱提交給checkssn.jsp頁面進行判斷，格式為：
reg.163.com/register/checkssn.jsp?username=使用者名稱
根據上面講到的方法，我們可以利用AJAX技術對網易通行證使用者名稱進行檢測：
第一步：建立一個基於Xhtml標準的網頁，在<head>地區插入Javascript函數如下：
<script type="text/javascript" language="javascript">
function getXMLRequester( ){
var xmlhttp_request = false;
try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
}else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312");
}
break;}
catch(e){
xmlhttp_request = false;
}
}
}else if( window.XMLHttpRequest ){
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType('text/xml');
}
}
}catch(e){
xmlhttp_request = false;
}
return xmlhttp_request ;
}
function IDRequest(n) {//定義收到伺服器的響應後需要執行的JavaScript函數
url=n+document.getElementById('163id').value;//定義網址參數
xmlhttp_request=getXMLRequester();//調用建立XMLHttpRequest的函數
xmlhttp_request.onreadystatechange = doContents;//調用doContents函數
xmlhttp_request.open('GET', url, true);
xmlhttp_request.send(null);
}
function doContents() {
if (xmlhttp_request.readyState == 4) {// 收到完整的伺服器響應
if (xmlhttp_request.status == 200) {//HTTP伺服器響應的值OK
document.getElementById('message').innerHTML = xmlhttp_request.responseText;
//將伺服器返回的字串寫到頁面中ID為message的地區
} else {
alert(http_request.status);
}
}
}
</script>
在<body>地區建立一個文字框，id為163id
<input type="text" id="163id" onpropertychange="IDRequest('http://reg.163.com/register/checkssn.jsp?username=')" />
再建一個id為messsge的空白地區用來顯示返回字串(也可以通過Javascript函數截取一部分字串顯示)：
<div id="message"></div>
這樣，一個基於AJAX技術的使用者名稱檢測頁面就做好了，不過這個頁面將返回伺服器響應產生頁面的所有字串，當然還可以對返回的字串進行一些操作，便於應用到不同的需要當中。
執行個體二： 以XMLDocument對象方式返迴響應來驗證金山通行證帳號是否存在
在上面的例子中，當伺服器對HTTP請求的響應被收到後，我們會調用請求對象的reponseText屬性。該屬性包含了伺服器返迴響應檔案的內容。現在我們以XMLDocument對象方式返迴響應，此時將不再需要reponseText屬性而使用responseXML屬性。
首先登陸金山通行證註冊頁面，我們發現金山通行證使用者名稱的檢測方式為：
pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=使用者名稱,並且返回XML資料:
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<response>
<method>isExistedUid</method>
<result>-2</result>
</response>
當result值為-1時表示此使用者名稱已被註冊，當result值為-2時表示此使用者名稱尚未註冊，因此通過對result值的判斷可以知道使用者名稱是否被註冊。
對上例代碼進行修改：
首先找到
document.getElementById('message').innerHTML = xmlhttp_request.responseText;
改為:
var response = xmlhttp_request.responseXML.documentElement;
var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result節點資料
if(result ==-2){
document.getElementById('message').innerHTML = "使用者名稱"+document.getElementById('163id').value+"尚未註冊";
}
else if(result ==-1){
document.getElementById('message').innerHTML = "對不起,使用者名稱"+document.getElementById('163id').value+"已經註冊";
}
通過以上兩個執行個體說明了AJAX的用戶端基礎應用，採用的是網易和金山現成的伺服器端程式，當然為了開發合適自己頁面的程式，還需要對自己編寫伺服器端程式，這設計到程式語言及資料庫的操作，對於有一定程式基礎的讀者一定不是很難的事情，本文著重討論了用戶端AJAX的應用體驗，廣大讀者可以根據本文講的原理結合各種樣式表現手法作出絢麗多彩的應用，希望本文能夠起到拋磚引玉的作用。
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
