Ajax如何使用？ Ajax的操作步驟

Ajax如何使用？本篇文章就跟大家介紹Ajax操作，讓大家了解Ajax的操作步驟。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

首先我們來總結Ajax的操作步驟，然後在詳細介紹一下每步具體是如何操作的。

1、呼叫客戶端事件

2、建立XMLHttpRequest物件

3、設定XMLHttpRequest物件。

4、XMLHttpRequest物件向Web伺服器發出非同步請求。

5、Web伺服器傳回包含XML文件的結果。

6、XMLHttpRequest物件呼叫callback（）函數並處理結果。

7、更新HTML DOM。

下面我們來一步步實作這些步驟實作Ajax的操作。

呼叫客戶端事件

JavaScript函數作為事件的結果被呼叫。

範例 ：

<input type =“text”size =“20”id =“userid”name =“id”onkeyup =“validateUserId（）;”>

 說明：

 JavaScript函數validateUserId（）作為事件處理程序對應到輸入表單欄位上的onkeyup事件，其id設定為「userid」。

建立XMLHttpRequest物件

var ajaxRequest;  // 使Ajax成为可能的变量！
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer浏览器
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            alert("Your browser broke!");
            return false;
         }
      }
   }}

設定XMLHttpRequest物件

在這一步驟中，我們將編寫一個將由客戶端事件觸發的函數，並將註冊一個回呼函數processRequest（）。

function validateUserId() {
   ajaxFunction();
   
   // 这里的processRequest（）是回调函数。
   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();
   
   // 这里的processRequest（）是回调函数。
   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框中輸入了“Zara”，然後在上述請求中，URL將會設為“validate？id = Zara”。

Webserver傳回包含XML文件的結果

#可以使用任何語言實作伺服器端腳本，但其邏輯應如下所示。 1、從客戶端取得請求。

2、解析客戶端的輸入。

3、需要處理。 4、將輸出傳送到客戶端。 如果我們假設你要寫一個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頁面將會更新。它會以下列方式來發生：

1、JavaScript使用DOM API來取得頁面中任何元素的參考。 2、取得元素來引用的建議方法是呼叫。

document.getElementById("userIdMessage"),

3、現在可以使用JavaScript來修改元素的屬性、 修改元素的樣式屬性、 或新增，刪除或修改子元素。 ######舉個例子：######js程式碼：###

   <!--
   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 (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->

###html程式碼：######

<div id = "userIdMessage"><div>

###如果已經理解了上面提到的七個步驟，那麼你幾乎已經完成了Ajax的操作了。大家可以自己動手試試，加深理解，希望能對大家的學習有所幫助，相關影片教學推薦：###Ajax教學###，###JavaScript教學###！ ###

以上是Ajax如何使用？ Ajax的操作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！