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("true");   } else {      response.setContentType("text/xml");      response.setHeader("Cache-Control", "no-cache");      response.getWriter().write("false");   }}

回调函数调用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来修改元素的属性; 修改元素的样式属性; 或添加，删除或修改子元素。 这是一个例子:

如果你已经理解了上面提到的七个步骤，那么你几乎已经完成了AJAX。 在下一章中，我们将更详细地看到XMLHttpRequest对象。