AJAX教程

AJAX - Action

本章为您提供了AJAX操作的确切步骤的清晰图片.

AJAX操作的步骤

发生客户端事件.
创建XMLHttpRequest对象.
配置XMLHttpRequest对象.

'LI>的XMLHttpRequest对象的异步请求发送到网络服务器.
网络服务器返回一个包含XML文档的结果.
当XMLHttpRequest object调用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;   
   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文档的结果

您可以使用任何语言实现服务器端脚本，但其逻辑应如下所示。

从客户端获取请求
解析客户端的输入
需要处理
将输出发送到客户端

如果我们假设你要编写一个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已更新

T他是最后一步，在此步骤中，您的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对象。