理解Ajax技术-优快云博客

XMLHttpRequest Object
参考
http://developer.apple.com/internet/webcontent/xmlhttpreq.html
http://www.crackj2ee.com/Article/ShowArticle.asp?ArticleID=407

1）一般的处理过程
在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的组件或者程序，执行完成后再发送回整个全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。在这个处理过程中，用户必须等待。屏幕形成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。

2）AJAX的处理过程
Ajax 把 javascript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送到 javascript 代码或者功能函数，而不直接发送给服务器，通过javascript 功能函数获得表单数据，再向服务器发送请求，同时用户屏幕上的表单保持原来的状态，不会出现闪烁、消失或延迟的情况。用户请求和javascript 代码发送请求是异步的，后台的，用户不必被强制等待服务器的响应，可以继续输入数据、滚动屏幕和使用应用程序界面。
然后，服务器将数据返回 javascript 功能函数（预先定义好的），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉表单没有经过提交或刷新而用户得到了新数据和新的界面。 javascript 功能函数可以对收到的数据执行某种计算或者过滤，然后在不需要用户干预情况下发送另一个请求，这就是XMLHttpRequest 的强大特点。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。界面处理和通信交互相互独立工作。

3）基本知识
XMLHttpRequest
XMLHttpRequest是一个 javascript 对象，通过 XMLHttpRequest 对象与服务器进行对话的是属于 javascript 技术范畴的，创建该对象可以通过下面的方式：

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest()；
</script>
getElementById()
获得XMLHttpRequest对象以后，可以通过该句柄

获取表单数据，通过getElementById() 方法
修改表单上的数据，通过etElementById() 方法
解析 HTML 和 XML

DOM
DOM，即文档对象模型。大量使用 DOM 的是复杂的 Java 和 C/C++ 程序，在 javascript 技术中使用 DOM 很容易，也非常直观。当需要在 javascript 代码和服务器之间传递 XML 和改变 HTML 表单的时候，需要使用DOM。

XMLHttpRequest 是 Ajax 应用程序的核心，不同浏览器获得 XMLHttpRequest 对象可能需要采用不同的方法。

Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML，因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道，那么必须用一种特殊的方式创建对象，根据 Internet Explorer 中安装的 javascript 技术版本不同，MSXML 实际上有两种不同的版本，必须对这两种情况分别编写代码。参考如下：

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

建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。
尝试在 Microsoft 浏览器中创建该对象：
- 尝试使用 Msxml2.XMLHTTP 对象创建它。
- 如果失败，再尝试 Microsoft.XMLHTTP 对象。
如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。

最后，xmlHttp 应该引用一个有效的 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();
}

Ajax 的基本请求/响应模型。

首先需要一个 Web 页面能够调用的 javascript 方法（比如当用户输入文本或者从菜单中选择一项时）。
接下来就是在所有 Ajax 应用程序中基本的流程：

从 Web 表单中获取需要的数据。
建立要连接的 URL。
打开到服务器的连接。
设置服务器在完成后要运行的函数。
发送请求。

function callServer() {
  // 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;

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

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

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

  // Send the request
  xmlHttp.send(null);
}
首先使用基本 javascript 代码获取几个表单字段的值。
然后设置一个 PHP 脚本作为链接的目标。
然后打开一个连接，连接方法（GET）和要连接的 URL。最后一个参数如果设为 true，那么将请求一个异步连接（这就是 Ajax 的由来）。如果使用 false，那么代码发出请求后将等待服务器返回的响应。如果设为 true，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 javascript 方法）。
xmlHttp的 onreadystatechange 属性可以告诉服务器在运行完成 后执行的任务，例如 updatePage() 的方法将被触发。
最后，使用值 null 调用 send()。

学习

您可以参阅本文在 developerWorks 全球站点上的英文原文。
Adaptive Path 是一家领先的用户界面设计公司，仔细阅读他们的网站可以更多地了解 Ajax。
如果关心 Ajax 一词的来历，请看一看 Jesse James Garrett 和他的 Ajax 文章（比如这一篇）。
可以先了解下一期文章的主题 XMLHttpRequest 对象，请阅读关于 XMLHttpRequest 对象的这篇文章。
如果使用 Internet Explorer，可以访问 Microsoft Developer Network 的 XML Developer Center。
面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序（developerWorks，2005 年 9 月）介绍了这种革新方法，它解决了页面重新加载难题，可以创建动态的 Web 应用程序体验。
面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化（developerWorks，2005 年 10 月）介绍了在 Ajax 应用程序中对数据进行序列化的五种方法。
Using Ajax with PHP and Sajax（developerWorks，2005 年 10 月），这篇教程针对那些对开发丰富 Web 应用程序感兴趣的人，介绍了使用 Ajax 和 PHP 动态更新内容。
Call SOAP Web services with AJAX, Part 1: Build the Web services client（developerWorks，2005 年 10 月）介绍了如何使用 Ajax 设计模式实现基于 Web 浏览器的 SOAP Web 服务客户机。
XML 问题: 超越 DOM（developerWorks，2005 年 5 月）详细阐述了如何使用文档对象模型来构建动态 Web 应用程序。
Build apps with Asynchronous JavaScript with XML, or AJAX（developerWorks，2005 年 11 月）演示了如何使用 Ajax 构造支持实时检验的 Web 应用程序。
面向 Java 开发人员的 Ajax: 结合 Direct Web Remoting 使用 Ajax （developerWorks，2005 年 11 月）演示了如何实现 Ajax 的繁琐细节的自动化处理。
OSA Foundation 有一个 wiki 调查了 AJAX/JavaScript 库。
XUL Planet 的对象参考部分详细介绍了 XMLHttpRequest 对象（更不用说其他各种 XML 对象了，如 DOM、CSS、HTML、Web Service 以及 Windows 和 Navigation 对象）。
关于 AJax 的基本原理，请阅读策略白皮书。
请看看 Flickr.com 上展示的一些很棒的 Ajax 应用程序。
Google 的 GMail 是另一个利用 Ajax 的革命性 Web 应用程序的例子。
Head Rush Ajax （O'Reilly Media, Inc.，2006 年 2 月）包含了本文以及本系列文章所述的内容（还有更多），并采用了创新的获奖格式 Head First。
JavaScript: The Definitive Guide，第 4 版（O'Reilly Media, Inc.，2001 年 11 月）是关于 JavaScript 语言和使用动态网页的好资料。
developerWorks Web 体系结构专区专门发表关于各种基于 Web 的解决方案的文章。