AJAX - 操作

本章將為您清晰地展示 AJAX 操作的具體步驟。

AJAX 操作步驟

客戶端事件發生。
建立一個 XMLHttpRequest 物件。
配置 XMLHttpRequest 物件。
XMLHttpRequest 物件向 Web 伺服器發出非同步請求。
Web 伺服器返回包含 XML 文件的結果。
XMLHttpRequest 物件呼叫 callback() 函式並處理結果。
更新 HTML DOM。

讓我們一步一步地來看這些步驟。

客戶端事件發生

作為事件結果，呼叫 JavaScript 函式。
示例 - validateUserId() JavaScript 函式被對映為輸入表單欄位的 onkeyup 事件的事件處理程式，該欄位的 id 設定為 "userid"
<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId();">.

建立 XMLHttpRequest 物件

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

配置 XMLHttpRequest 物件

在此步驟中，我們將編寫一個由客戶端事件觸發的函式，並註冊一個回撥函式 processRequest()。

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

向 Web 伺服器發出非同步請求

上述程式碼片段中提供了原始碼。用粗體表示的程式碼負責向 Web 伺服器發出請求。所有這些都是使用 XMLHttpRequest 物件 ajaxRequest 完成的。

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   <b>if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);</b>
}

假設您在 userid 框中輸入 Zara，則在上述請求中，URL 設定為“validate?id = Zara”。

Web 伺服器返回包含 XML 文件的結果

您可以使用任何語言實現您的伺服器端指令碼，但是其邏輯應如下所示。

從客戶端獲取請求。
解析來自客戶端的輸入。
執行必要的處理。
將輸出傳送到客戶端。

如果我們假設您將編寫一個 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("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

呼叫回撥函式 processRequest()

XMLHttpRequest 物件被配置為在 XMLHttpRequest 物件的 readyState 狀態發生變化時呼叫 processRequest() 函式。現在此函式將接收來自伺服器的結果並執行必要的處理。如以下示例所示，它根據 Web 伺服器返回的值將變數 message 設定為 true 或 false。

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

更新 HTML DOM

這是最後一步，在此步驟中，您的 HTML 頁面將被更新。它是以下面的方式發生的 -

JavaScript 使用 DOM API 獲取頁面中任何元素的引用。
獲取元素引用的推薦方法是呼叫。

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

現在可以使用 JavaScript 修改元素的屬性；修改元素的樣式屬性；或新增、刪除或修改子元素。這是一個例子 -

<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);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>
<body>
   <div id = "userIdMessage"><div>
</body>

如果您已經理解了上述七個步驟，那麼您幾乎完成了 AJAX。在下一章中，我們將更詳細地瞭解 XMLHttpRequest 物件。

列印頁面