WEB2.0中AJAX應用的詳細探討

最近互聯網上比較火熱的話題當然是關於WEB2.0的應用，其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫。它並不是一門新的語言或技術，它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用，它包括
　　使用XHTML和CSS標準化呈現；
　　使用DOM實現動態顯示和交互；
　　使用XML和XSLT進行數據交換與處理；
　　使用XMLHttpRequest進行異步數據讀取；
　　最後用JavaScript綁定和處理所有數據；
　　Ajax的工作原理相當於在用戶和服務器之間加了?箇中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利於客戶端閒置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。

我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：

(1) 用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在；
(2) 以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在；

首先，我們需要用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頁面進行判斷，格式爲：
http://reg.163.com/register/checkssn.jsp?username=用戶名

根據上面講到的方法，我們可以利用AJAX技術對網易通行證用戶名進行檢測：

第一步：新建一個基於Xhtml標準的網頁，在<head>區域插入Javascript函數如下：

在<body>區域建立一個文本框，id爲163id

再建一個id爲messsge的空白區域用來顯示返回字符串(也可以通過Javascript函數截取一部分字符串顯示)：

<div id="message"></div>

這樣，一個基於AJAX技術的用戶名檢測頁面就做好了，不過這個頁面將返回服務器響應生成頁面的所有字符串，當然還可以對返回的字符串進行一些操作，便於應用到不同的需要當中。

實例二：以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在

在上面的例子中，當服務器對HTTP請求的響應被收到後，我們會調用請求對象的reponseText屬性。該屬性包含了服務器返回響應文件的內容。現在我們以XMLDocument對象方式返回響應，此時將不再需要reponseText屬性而使用responseXML屬性。

首先登陸金山通行證註冊頁面，我們發現金山通行證用戶名的檢測方式爲：
http://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的應用體驗，廣大讀者可以根據本文講的原理結合各種樣式表現手法作出絢麗多彩的應用，希望本文能夠起到拋磚引玉的作用。

演示地址:

說明:我已經將製作好的文件上傳到我的Blog,大家可以進行測試,由於Ajax和Xmlhttp不能跨域請求,所以測試時請調整IE的安全級別或者將xiacong.com暫時加入信任站點.
網易通行證查詢演示(AJAX): http://www.xiacong.com/test/163.htm
金山通行證查詢演示(AJAX): http://www.xiacong.com/test/j3.htm

附錄

(一) HTTP 1.1支持的狀態代碼

100 Continue 初始的請求已經接受，客戶應當繼續發送請求的其餘部分
101 Switching Protocols 服務器將遵從客戶的請求轉換到另外一種協議
200 OK 一切正常，對GET和POST請求的應答文檔跟在後面。
201 Created 服務器已經創建了文檔，Location頭給出了它的URL。
202 Accepted 已經接受請求，但處理尚未完成。
203 Non-Authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，因爲使用的是文檔的拷貝
204 No Content 沒有新文檔，瀏覽器應該繼續顯示原來的文檔。如果用戶定期地刷新頁面，而Servlet可以確定用戶文檔足夠新，這個狀態代碼是很有用的
205 Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容
206 Partial Content 客戶發送了一個帶有Range頭的GET請求，服務器完成了它
300 Multiple Choices 客戶請求的文檔可以在多個位置找到，這些位置已經在返回的文檔內列出。如果服務器要提出優先選擇，則應該在Location應答頭指明。
301 Moved Permanently 客戶請求的文檔在其他地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。
302 Found 類似於301，但新的URL應該被視爲臨時性的替代，而不是永久性的。
303 See Other 類似於301/302，不同之處在於，如果原來的請求是POST，Location頭指定的重定向目標文檔應該通過GET提取
304 Not Modified 客戶端有緩衝的文檔併發出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩衝的文檔還可以繼續使用。
305 Use Proxy 客戶請求的文檔應該通過Location頭所指明的代理服務器提取
307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即使原來的請求是POST，即使它實際上只能在POST請求的應答是303時才能重定向。由於這個原因，HTTP 1.1新增了307，以便更加清除地區分幾個狀態代碼：當出現303應答時，瀏覽器可以跟隨重定向的GET和POST請求；如果是307應答，則瀏覽器只能跟隨對GET請求的重定向。
400 Bad Request 請求出現語法錯誤。
401 Unauthorized 客戶試圖未經授權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示用戶名字/密碼對話框，然後在填寫合適的Authorization頭後再次發出請求。
403 Forbidden 資源不可用。
404 Not Found 無法找到指定位置的資源
405 Method Not Allowed 請求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）對指定的資源不適用。
406 Not Acceptable 指定的資源已經找到，但它的MIME類型和客戶在Accpet頭中所指定的不兼容
407 Proxy Authentication Required 類似於401，表示客戶必須先經過代理服務器的授權。
408 Request Timeout 在服務器許可的等待時間內，客戶一直沒有發出任何請求。客戶可以在以後重複同一請求。
409 Conflict 通常和PUT請求有關。由於請求和資源的當前狀態相沖突，因此請求不能成功。
410 Gone 所請求的文檔已經不再可用，而且服務器不知道應該重定向到哪一個地址。它和404的不同在於，返回407表示文檔永久地離開了指定的位置，而404表示由於未知的原因文檔不可用。
411 Length Required 服務器不能處理請求，除非客戶發送一個Content-Length頭。
412 Precondition Failed 請求頭中指定的一些前提條件失敗
413 Request Entity Too Large 目標文檔的大小超過服務器當前願意處理的大小。如果服務器認爲自己能夠稍後再處理該請求，則應該提供一個Retry-After頭
414 Request URI Too Long URI太長
416 Requested Range Not Satisfiable 服務器不能滿足客戶在請求中指定的Range頭
500 Internal Server Error 服務器遇到了意料不到的情況，不能完成客戶的請求
501 Not Implemented 服務器不支持實現請求所需要的功能。例如，客戶發出了一個服務器不支持的PUT請求
502 Bad Gateway 服務器作爲網關或者代理時，爲了完成請求訪問下一個服務器，但該服務器返回了非法的應答
503 Service Unavailable 服務器由於維護或者負載過重未能應答。例如，Servlet可能在數據庫連接池已滿的情況下返回503。服務器返回503時可以提供一個Retry-After頭
504 Gateway Timeout 由作爲代理或網關的服務器使用，表示不能及時地從遠程服務器獲得應答
505 HTTP Version Not Supported 服務器不支持請求中所指明的HTTP版本

(二) XMLHttpRequest 對象方法

abort()        停止當前請求
getAllResponseHeaders()    作爲字符串返問完整的headers
getResponseHeader("headerLabel")    作爲字符串返問單個的header標籤
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])    設置未決的請求的目標 URL, 方法, 和其他參數
send(content)    發送請求
setRequestHeader("label", "value")        設置header並和請求一起發送

(三) XMLHttpRequest 對象屬性

onreadystatechange            狀態改變的事件觸發器
readyState                對象狀態(integer):
                0 = 未初始化
                1 = 讀取中
                2 = 已讀取
                3 = 交互中
                4 = 完成
responseText        服務器進程返回數據的文本版本
responseXML        服務器進程返回數據的兼容DOM的XML文檔對象
status            服務器返回的狀態碼, 如：404 = "文件末找到" 、200 ="成功"
statusText            服務器返回的狀態文本信息

轉：Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1378208

WEB2.0中AJAX應用的詳細探討

如何使用 JS 判斷用戶是否處於活躍狀態

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

WEB2.0中AJAX應用的詳細探討

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結