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 对象。

打印页面