AJAX操作流程 - tw511教學網

本章提供了AJAX操作過程步驟的清晰流程。

AJAX操作的步驟

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

下面我們進一步了解這些步驟。

發生用戶端事件

JavaScript函式作為事件的結果被呼叫。
範例 - JavaScript validateUserId()函式被對映為輸入表單欄位上的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;

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

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

假設在使用者ID框中輸入Maxsu，然後在上述請求中，URL設定為「validate?id=Maxsu」。

Webserver返回包含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()函式。現在，此函式將從伺服器接收結果，並將執行所需的處理。如下例所示，它根據Webserver返回的值設定變數訊息為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來修改元素的屬性; 修改元素的樣式屬性; 或新增，刪除或修改子元素。下面是一個例子(index.html) -

<html>
<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>
</html>

如果已經理解了上面的幾個步驟，那麼你已經可以理解並可以使用AJAX了。