Ajax 简明教程

AJAX - Action

本章使你清楚了解 AJAX 操作的确切步骤。

Steps of AJAX Operation

A client event occurs.
创建 XMLHttpRequest 对象。
对 XMLHttpRequest 对象进行配置。
XMLHttpRequest 对象对 Web 服务器发出异步请求。
Web 服务器返回包含 XML 文档的结果。
XMLHttpRequest 对象调用 callback() 函数并处理结果。
更新 HTML DOM。

让我们逐一完成这些步骤。

A Client Event Occurs

以事件为结果，调用 JavaScript 函数。
例如，将 validateUserId() JavaScript 函数映射为事件处理程序，使其成为输入表单域上的 onkeyup 事件，该输入表单域的 id 设置为 "userid"
<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId();">.

The XMLHttpRequest Object is Created

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

The XMLHttpRequest Object is Configured

在此步骤中，我们将编写一个函数，将由客户端事件触发，并且将注册回调函数 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);
}

Making Asynchronous Request to the Webserver

源代码在上面的代码段中可用。用粗体字书写的代码负责向 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"。

Webserver Returns the Result Containing XML Document

你可以在任何语言中实现自己的服务器端脚本，但其逻辑应如下所示。

获取来自客户端的请求。
从客户端解析输入。
Do required processing.
将输出发送到客户端。

如果我们假设你要编写一个 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>");
   }
}

Callback Function processRequest() is Called

XMLHttpRequest 对象被配置为在 XMLHttpRequest 对象的 readyState 发生状态更改时调用 processRequest() 函数。现在这个函数将从服务器接收结果，然后执行所需的处理。正如以下示例所示，它根据 Web 服务器返回的值将变量 message 设置为 true 或 false。

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

The HTML DOM is Updated

这是最后一步，在这一步中，你的 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 对象。