JavaWeb——AJAX(1)

本系列AJAX文章均改写于IBM developerWorks 的AJAX教程。

1、 AJAX是什么

AJAX（asynchronous javascript and XML）

Ajax技术尝试在web应用程序中建立桌面应用程序的功能和交互性，与不断更新的web应用程序之间的巧玲。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件。

2、 AJAX的基础技术

Ajax应用程序用到的基本技术：

• HTML：用于建立web表单，并确定应用程序其他部分使用的字段。
• JavaScript：运行Ajax应用程序的核心代码，改进与服务器引用程序的通信。
• DHTML：用于动态更新表单。
• DOM（文档对象模型）：用于处理HTML结构和服务器返回的XML。

3、 AJAX的第一个对象——XMLHttpRequest对象

3.1 XMLHTTPRequest对象是什么

这是一个JavaScript对象，用来处理所有服务器通信的对象。通过XMLHttpRequest对象与服务器进行对话的是JavaScript技术，而不是应用程序流。

3.2 使用该对象与一般web应用程序的区别

在一般的web应用程序中，用户填写表单，点击submit，整个表单被发送到服务器，服务器将它转发给处理表单的脚本，脚本执行完后再发送给全新的页面。用户在这个过程中得不到立即反馈。

在AJAX应用程序中，JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据被发送给一些JavaScript代码而不是直接发送给服务器，JavaScript代码捕获表单数据并发送给服务器。

这样改变会有两个现象：

• 用户并不知道什么时候发送了请求，javascript代码在幕后发送请求。
• 请求是异步发送的，javascript代码和用户不用等待服务器的响应。用户可以继续输入数据、滚动屏幕和使用应用程序。

3.3 创建这个对象

现在我们知道XMLHttpRequest是Ajax应用程序的核心，创建这个对象是使用它的第一步。但是由于浏览器的不同，获得这个对象可能需要不同的方法。

3.3.1 Microsoft浏览器

在Microsoft浏览器中，IE使用的MSXML解析器处理XML，因此如果编写Ajax应用程序在IE上使用，则需要一种特殊的方式创建。另外，IE中安装的JavaScript技术版本不同，MSXML也有两种不同版本，针对这两种情况，有两种方式简历XMLHttpRequest对象。

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}

其中的核心代码是：

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
和
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

3.3.2 处理 Mozilla 和非 Microsoft 浏览器

如果选择的浏览器不是IE，那么创建一个XMLHttpRequest对象的代码为：

var xmlHttp = new XMLHttpRequest object;

3.3.3 支持多种浏览器的方式创建XMLHttpRequest对象

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

该段代码的核心：

1. 建立一个变量xmlHttp来引用即将创建的XMLHttpRequest对象。
2. 尝试在Microsoft浏览器中创建该对象（两种方式）。
3. 如果仍然没有建立xmlHttp，则以非Microsoft的方式创建该对象。

4、 AJAX的请求与响应

现在已经有一个XMLHttpRequest对象，如何使用它处理与服务器之间的通信呢？

4.1 AJAX的请求

首先一个web页面调用JavaScript方法，这个方法会将表单内容通过XMLHttpRequest对象向服务器发送请求信息。流程如下：

1. 从web表单中获取需要的数据。
2. 建立要链接的url。
3. 打开到服务器的链接。
4. 设置服务器在完成后要运行的函数。
5. 发送请求。

对应的代码如下：

    function callServer() {
      //1. Get the city and state from the web form
      var city = document.getElementById("city").value;
      var state = document.getElementById("state").value;
      // Only go on if there are values for both fields
      if ((city == null) || (city == "")) return;
      if ((state == null) || (state == "")) return;

      //2. Build the URL to connect to
      var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

      //3. Open a connection to the server
      xmlHttp.open("GET", url, true);

      //4. Setup a function for the server to run when it's done
      xmlHttp.onreadystatechange = updatePage;

      //5. Send the request
      xmlHttp.send(null);
    }

对上述代码的一些解释：

1. 通过document.getElementById()方法获得表单中某属性的属性值。
2. url中包含了这些获得的数据。
3. xmlHttp是一个XMLHttpRequest对象，open()方法建立了与服务器之间的连接。使用get发送请求。
4. updatePage()方法用来写响应的内容，当服务器处理完请求时，updatePage()的方法会被触发。
5. xmlHttp的send()函数值为null，因为在请求URL中添加了要发送给服务器的数据，因此这里不需要发送数据了。

4.2 AJAX的响应

服务器的响应，只需要知道两点：

• 什么也不用做，等待xmlHttp.readyState属性值为4。
• 服务器把响应填充到xmlHttp.responseText属性中，可以从中获得。

请求函数中，设置的响应函数为updatePage()，如下：

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

5、 如何发出请求（连接Web表单）

callServer()方法捕捉到用户输入的表单信息，并将其发送给服务器，在该方法中设置了响应函数的触发时机。响应函数updatePage()方法监听和处理响应，并在响应返回时设置字段的值。离一个完整的请求响应链只差一步，就是如何触发callServer()方法。

在一般的web应用程序中，我们点击submit按钮，提交表单，在Ajax技术中，我们利用onChange属性来触发函数。

启动一个Ajax过程：

<form>
<p>City: <input type="text" name="city" id="city" size="25" 
       onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25" 
       onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>

补充：

javascript需要做的事情：

1. 获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。
2. 修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。
3. 解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM（请参阅 下一节），处理 HTML 表单服务器返回的 XML 数据的结构。