Ajax詳解及用戶名重用檢測實例

本文分兩部分，前半部分詳細講解Ajax核心組件，下半部分實操Ajax異步傳輸驗證用戶名是否重複實例
四個組件：XMLHttpRequest，JavaScript,css,DOM

—-XMLHttpRequest

XMLHttpRequest是Ajax技術的核心對象，它負責將用戶請求以異步的方式提交到服務器並獲得服務器端的響應信息及數據。

—-JavaScript

是Ajax技術的重要組成部分，可以用來創建XMLHttpRequest對象並使用該對象的方法及屬性。並將獲取的信息局部更新到頁面中，實現局部刷新，作用類似於膠水

—-css

也叫層疊樣式表，可以實現多種特效

—-DOM

DOM即文檔對象模型。用於HTML和XML文檔的API，可以修改文檔的內容及視覺表現。（使用Ajax時，從服務器返回的內容需要更新到頁面局部時，就可以使用DOM對象操作瀏覽器內的內容進行局部更新）

—-XMLHttpRequest對象

1.XMLHttpRequest是ajax的核心對象，使用ajax都是從創建XMLHttpRequest對象開始的

2.XMLHttpRequest是一個瀏覽器內部對象，可以發送http請求並接收http響應。不同的瀏覽器對XMLHttpRequest的實現有所不同。在IE中，是通過ActiveXObject對象來實現XMLHttpRequest，其它瀏覽器使用本地JavaScript對象實現。

例如：
if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xmlHttp=new XMLHttpRequest();
    }

注：以上代碼中就解決了創建XMLHttpRequest對象時不同瀏覽器的兼容問題.

—-XMLHttpRequest對象封裝的屬性及方法

–readyState

–status

–StatusText

**onreadyStatechange

**responseText

**responseXML

XMLHttpRequest的屬性：

—readyState

可以返回5種請求狀態

0：“未初始化狀態”，表示已經創建但並未初始化

1：“打開的狀態，並已開始調用”，XMLHttpRequest對象的open()方法，表示已經準備好向服務器發送請求

2：“發送狀態”，表示XMLHttpRequest對象已經調用send()方法將請求發送至服務器，但是尚未收到響應

3：“接收狀態”，表示已經收到http響應頭的信息，但信息體尚未完全接收

4：“已加載狀態”，表示響應已完全接收

—status

status用來返回服務器的響應狀態碼。如：404表示請求文件未找到；500表示內部服務器錯誤；200表示一切正常.

例如：

if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
        。。。。。。
    }
}

—StatusText

表示的屬性及含義與Status類似，但是是以文本的形式，而Status是以狀態碼形式

—onreadystatechange

onreadystatechange是一個事件觸發器。其值通常是一個函數名（不加括號的）。任何狀態的變化都會觸發該事件並頂用指定的函數（一般爲JavaScript函數）

例如：

xmlHttp.onreadystatechange=callback;

意思是一旦readyState狀態發生改變，就會調用callback函數

—responseText

responseText屬性是用來接收服務器端的文本內容，以字符串的形式存在。在使用responseText可以直接將返回的內容輔助給某個域的innerHTML值。顯示到客戶端

例如：

if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
        document.getElementById("unamemsg").innerHTML=xmlHttp.responseText;
    }
}

以上代碼的意思是：當加載狀態完成時，且服務器一切正常，就通過id獲取節點元素並將該元素對應的值改爲xmlHttp從服務器端收到的文本

—responseXML

responseXML用來接收服務器端響應，以XML形式存在。這個對象可以解析爲一個DOM對象，進而使用DOM的API更新到客戶端頁面

例如：

var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var passed=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;

XMLHttpRequest的方法：

–open(DOMString method,DOMString url,boolean async,DOMString username,DOMString password);

注：method指定http請求方法，如post、get等，URL用來指定XMLHttpRequest對象請求的具體的URL，可以是相對URL，也可以是絕對的，async用來指定是否異步，默認值是true。對於需要認證的服務器，可以提供可選的用戶名和密碼，在調用open（）方法後，XMLHttpRequest的readyState屬性值將設定爲1，並把responseText、responseXML、status的屬性設爲初始值；

1.例如：

var url="check?uname="+escape(username.value);
xmlHttp.open("GET",url,true);

注：check是指向了servlet並且將uname傳遞走了

2.又例如:

var url="check?uname="+escape(username.value);
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlenCoded");

–send()

調用open（）方法後，就已經準備好了一個XMLHttpRequest對象，接下來需要調用send（）方法將請求發送給服務器。當async爲true時，send（）方法立即返回，其他腳本語言可以繼續使用。無需等待服務器響應。send（）方法有一個可選參數，該參數是用來發送post形式的一些內容。如果不需要，就可以寫成send()或send(null)

例如：

xmlHttp.open("GET",url,true);
xmlHttp.send(null);
再例如：
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlenCoded");
xmlHttp.send("uname="+escape(username.value));

XMLHttpRequest對象的其他方法

—setRequestHeader(DOMString header,DOMString value)

設置請求頭信息，必須寫在open（）之後執行

—getResponseHeader(DOMString header)

根據響應頭的名字獲取對應的值，若響應頭信息未能返回到客戶端，則返回null值

—getAllResponseHeader()

返回所有頭信息和對應的value值，以鍵值對的形式表示

—abort()

可以用來暫停一個與XMLHttpRequest對象相聯繫的HTTP請求，從而使該對象恢復到初始化狀態

DOM模型

三個部分：核心，HTML，XML

—核心部分：是比較底層的對象接口。適用於任何格式的結構化文檔，HTML和XML部分定義了訪問和操作HTML與XML的標準方法

—DOM獨立於編程語言，很多語言都實現了DOM的API，在Ajax中，主要使用js來使用DOM模型

—Ajax爲客戶端技術，在Ajax中既可能使用HTML DOM操作HTML，也可能使用XML DOM操作XML

HTML DOM常用方法及屬性

–getElementById（）

可以根據HTML文檔中元素的id的值返回相關的元素
例如：
document.getElementById("unamemsg");

—getElementsByTagName（）

可用於HTML文檔中的任何元素，通過標籤名返回所有元素
例如：
1.getElementsByTagName（"h1"）；
2.document.getElementById("unamemsg").getElementsByTagName("h1");
解釋說明：   1：返回頁面中所有h1元素
        2：返回id爲"unamemsg"的元素下面的所有h1元素

—parentNode,firstChild及lastChild

parentNode：返回某個節點元素的父節點
firstChild：返回某個節點的第一個子節點
lastChild：返回某個節點的最後一個子節點

—nodeName、nodeValue及nodeType

節點名，節點值，節點類型
例如：
var x=document.getElementById("unamemsg");
var text=x.firstChild.nodeValue；

XML DOM常用方法及屬性

—getElementsByTagName（）

返回該標籤所有元素的集合
例如：
titles=xmlDom.getElementsByTagName（"student"）;
解釋：獲取所有名爲"student"的元素

—appendChild(node)

向節點中插入子節點
例如：
age=xmlDom.createElement("age");
xmlDom.getElementsByTagName（"student").appendChild(age);
解釋：創建了一個age節點，並將其作爲子節點加入文檔中第一個student節點

—e.getAttribute()

可獲取節點e的指定名字的屬性值
例如
sex=xmlDom.getElementsByTagName（"student")[0].getAttribute("sex");

Ajax 實現用戶名重用實例

jsp關鍵代碼：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

var xmlHttp;

function createXMLHttpRequest(){

    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xmlHttp=new XMLHttpRequest();
    }

}

function validate(){

    createXMLHttpRequest();
    var username=document.getElementById("uname");
    var url="check?uname="+escape(username.value);
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=callback;
    xmlHttp.send(null);

}

function callback(){

    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
            var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
            var passed=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
            setMessage(message,passed);
        }
    }

    }

function setMessage(message,passed){

    var validateMessage =document.getElementById("unamemsg");
    var fontColor="red";
    if(passed=="true"){
        fontColor="green";
    }
    validateMessage.innerHTML="<font color="+fontColor+">"+message+"</font>"

}

</script>

</head>

<body>

<form action="regist" method="post">

用戶名：<input type="text" id="uname" name="uname" value="${param.uname }" onblur="validate()" />

<div id="unamemsg"></div>

密碼：<input type="password" id="pwd" name="pwd" ><br>

<div id="pwdmsg"></div>

<input type="submit" value="註冊">

</form>

</body>

驗證用戶名關鍵servlet代碼

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("進入ajax");
    //返回xml到客戶端
    boolean flag=true;
    String message="";
    UserDaoImpl u=new UserDaoImpl();
    User user=u.selectByName(request.getParameter("uname"));
    if(user==null){
        message="用戶名可以使用";
    }else{
        flag=false;
        message="用戶名已存在，請選擇其他用戶名";
    }
    System.out.println(message);
    response.setContentType("text/xml;charset=utf-8");
    PrintWriter out=response.getWriter();
    response.setHeader("Cache-Control", "no-cache");
    out.println("<?xml version='1.0' encoding='utf-8'?>");
    out.println("<response>");
    out.println("<passed>"+Boolean.toString(flag)+"</passed>");
    out.println("<message>"+message+"</message>");
    out.println("</response>");
    out.close();
    }