Ajax有哪些操作步驟

本篇文章給大家分享的是有關Ajax有哪些操作步驟，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

1、調(diào)用客戶端事件

2、創(chuàng)建XMLHttpRequest對象

3、配置XMLHttpRequest對象。

4、XMLHttpRequest對象向Web服務器發(fā)出異步請求。

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

6、XMLHttpRequest對象調(diào)用callback（）函數(shù)并處理結果。

7、更新HTML DOM。

下面我們來一步步實現(xiàn)這些步驟實現(xiàn)Ajax的操作。

調(diào)用客戶端事件

JavaScript函數(shù)作為事件的結果被調(diào)用。

示例 ：

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

說明：

JavaScript函數(shù)validateUserId（）作為事件處理程序映射到輸入表單字段上的onkeyup事件，其id設置為“userid”。

創(chuàng)建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對象

在這一步中，我們將編寫一個將由客戶端事件觸發(fā)的函數(shù)，并將注冊一個回調(diào)函數(shù)processRequest（）。

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

對Web服務器進行異步請求

源代碼可在上面的代碼中找到。以粗體字體編寫的代碼負責向Web服務器發(fā)出請求。這都是使用XMLHttpRequest對象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);
}

假設在用戶ID框中輸入了“Zara”，然后在上述請求中，URL將會設置為“validate？id = Zara”。

Webserver返回包含XML文檔的結果

可以使用任何語言實現(xiàn)服務器端腳本，但其邏輯應如下所示。

1、從客戶端獲取請求。

2、解析客戶端的輸入。

3、需要處理。

4、將輸出發(fā)送到客戶端。

如果我們假設你要編寫一個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>");
   }
}

回調(diào)函數(shù)調(diào)用processRequest（）

XMLHttpRequest對象配置為在XMLHttpRequest對象的readyState狀態(tài)發(fā)生更改時調(diào)用processRequest（）函數(shù)?，F(xiàn)在，此函數(shù)將從服務器接收結果，并將執(zhí)行所需的處理。如下例所示，它根據(jù)Webserver的返回值設置變量消息的true或false。

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

更新HTML DOM

這是最后一步，在此步驟中，HTML頁面將會更新。它會以下列方式來發(fā)生：

1、JavaScript使用DOM API獲取對頁面中任何元素的引用。

2、獲取元素來引用的推薦方法是調(diào)用。

document.getElementById("userIdMessage"),

3、現(xiàn)在可以使用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);
      
      // 如果消息體元素已簡單創(chuàng)建
      // 需要替換它，否則追加新元素
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->

html代碼：

<div id = "userIdMessage"><div>

以上就是Ajax有哪些操作步驟，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。