Ajax 實(shí)戰(zhàn)

本章為你提供了一個(gè)清晰的 Ajax 操作的具體步驟。

Ajax 操作步驟

• 觸發(fā)一個(gè)客戶端事件。
• 創(chuàng)建一個(gè) XMLHttpRequest 對(duì)象。
• 配置 XMLHttpRequest 對(duì)象。
• 使用 XMLHttpRequest 對(duì)象創(chuàng)建一個(gè)到 Web 服務(wù)器的異步請(qǐng)求。
• Web 服務(wù)器返回包含 XML 文檔的結(jié)果。
• XMLHttpRequest 對(duì)象調(diào)用 callback() 函數(shù)處理結(jié)果。
• 更新 HTML DOM。

讓我們一個(gè)接一個(gè)理解這些步驟。

觸發(fā)客戶端事件

• JavaScript 函數(shù)作為事件結(jié)果被調(diào)用。
• 比如：JavaScript 函數(shù) validateUserId() 被映射為 id 為 "userid" 的表單輸入字段的 onkeyup 事件的事件處理程序。
• <input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">。

創(chuàng)建 XMLHttpRequest 對(duì)象

var AjaxRequest;  // 緩存 XMLHttpRequest 對(duì)象
function AjaxFunction(){
    try{
        // Opera 8.0+, Firefox, Safari
        AjaxRequest = new XMLHttpRequest();
    }catch (e){

        // IE 瀏覽器
        try{
            AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {

            try{
                AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                // 錯(cuò)誤處理
                alert("Your browser broke!");
                return false;
            }
        }
    }
}

配置 XMLHttpRequest 對(duì)象

在這個(gè)步驟中，我們將會(huì)編寫一個(gè)將由客戶端事件觸發(fā)的函數(shù)，然后注冊(cè)一個(gè) processRequest() 回調(diào)函數(shù)。

function validateUserId() {
    AjaxFunction();

    // 這里的 processRequest() 就是回調(diào)函數(shù)
    AjaxRequest.onreadystatechange = processRequest;

    if (!target) target = document.getElementById("userid");
    var url = "validate?id=" + escape(target.value);

    AjaxRequest.open("GET", url, true);
    AjaxRequest.send(null);
}

發(fā)起到服務(wù)器的異步請(qǐng)求

上面的代碼是有效的。加粗的代碼負(fù)責(zé)發(fā)起一個(gè)到 Web 服務(wù)器的請(qǐng)求。這是使用 XMLHttpRequest 對(duì)象 AjaxRequest 做到的。

function validateUserId() {
    AjaxFunction();

    // 這里的 processRequest() 就是回調(diào)函數(shù)
    AjaxRequest.onreadystatechange = processRequest;

    __if (!target) target = document.getElementById("userid");__
    __var url = "validate?id=" + escape(target.value);__

    __AjaxRequest.open("GET", url, true);__
    __AjaxRequest.send(null);__
}

假設(shè)我們?cè)?userid 輸入框中輸入 Zara，那么在上面的請(qǐng)求中，URL 會(huì)被設(shè)置為 "validate?id=Zara"。

Web 服務(wù)器返回包含 XML 文檔的結(jié)果

我們可以使用任意語(yǔ)言實(shí)現(xiàn)服務(wù)端腳本，但是它應(yīng)該包含如下邏輯。

• 從客戶端獲取請(qǐng)求。
• 解析來(lái)自客戶端的輸入信息。
• 做必要的處理。
• 將輸出信息發(fā)送到客戶端。

我們假設(shè)你要編寫一個(gè) servlet 程序，下面是這段程序代碼。

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
    String targetId = request.getParameter("id");

    if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        response.getWriter().write("true");
    } else {
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        response.getWriter().write("false");
    }
}

被調(diào)用的回調(diào)函數(shù) processRequest()

XMLHttpRequest 對(duì)象被配置為當(dāng) XMLHttpRequest 對(duì)象的 readyState 狀態(tài)發(fā)生變化時(shí)調(diào)用 processRequest() 函數(shù)。這個(gè)函數(shù)接受從服務(wù)端返回的結(jié)果然后做必要的處理。正如下面的示例所示，它基于從 Web 服務(wù)器返回的值將消息變量設(shè)置為 true 或 false。

function processRequest() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            var message = ...;
...
}

更新 HTML DOM

這是最后一步，在這一步中我們的 HTML 頁(yè)面會(huì)被更新。它發(fā)生在以下方式中：

• JavaScript 使用 DOM API 獲取頁(yè)面任意元素的引用。
• 獲取一個(gè)元素引用推薦的方式就是調(diào)用

document.getElementById("userIdMessage"), 
// 這里 "userIdMessage" 就是 HTML 文檔中某個(gè)元素的 ID 屬性

• 然后 JavaScript 可以用來(lái)修改元素的屬性；修改元素的樣式屬性，或者添加，移除或修改元素的子元素。這里有一個(gè)例子：

<script type="text/javascript">
<!--
function setMessageUsingDOM(message) {
    var userMessageElement = document.getElementById("userIdMessage");
    var messageText;

    if (message == "false") {
        userMessageElement.style.color = "red";
        messageText = "Invalid User Id";
    }
    else 
    {
        userMessageElement.style.color = "green";
        messageText = "Valid User Id";
    }

    var messageBody = document.createTextNode(messageText);

    // 如果 messageBody 元素已經(jīng)創(chuàng)建了，則簡(jiǎn)單的替換它，否則插入一個(gè)新的元素。 
    if (userMessageElement.childNodes[0]) {
        userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
    } 
    else
    {
        userMessageElement.appendChild(messageBody);
    }
}
-->
</script>
<body>
<div id="userIdMessage"><div>
</body>

如果理解了上述 7 步，差不多就完成 Ajax 了。下一章中，我們會(huì)看到更詳細(xì)的 XMLHttpRequest 對(duì)象。