當前位置：首頁 » Ajax » Ajax操作

Ajax操作

Ajax操作：本節將給你AJAX操作的具體步驟讓你清楚地了解。
本節將給你AJAX操作的具體步驟讓你清楚地了解.

AJAX操作的步驟

  1. 一個客戶端事件發生

  2. 創建一個XMLHttpRequest對象

  3. XMLHttpRequest對象配置

  4. XMLHttpRequest對象異步請求到Web服務器.

  5. Web服務器返回的結果包含XML文檔.

  6. XMLHttpRequest對象調用callback()函數和處理結果。

  7. HTML DOM更新

讓我們逐一采取以下步驟

1. 一個客戶端事件發生

  • 一個JavaScript函數被稱為事件的結果

  • 例如：validateUserId()是JavaScript函數被映射為一個事件處理程序上輸入表單域的onkeyup事件，其ID設置為“用戶ID”

  • <input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">

2. 創建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;
      }
   }
 }
}

3. 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);
}

4. 使異少請求的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框中mohammad在上述請求的URL，然後設置tovalidate?ID=mohammad

5. 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("true");
   } 
   else 
   {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("false");
   }
}

6. 被稱為回調函數processRequest()

配置XMLHttpRequest對象調用processRequest（）函數，當有一個狀態變化到XMLHttpRequest對象的readyState。現在，這個函數將收到從服務器的結果，將不所需處理。在下麵的例子，它設置一個真或假的變量的消息返回值是從網絡服務器上的. 

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

7. 更新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對象.

極客書 © 2012-2014 . .