AJAX 基础知识

XMLHttpRequest Object参考 http://developer.apple.com/internet/webcontent/xmlhttpreq.html http://www.crackj2ee.com/Article/ShowArticle.asp?ArticleID=4071）一般的处理过程 在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的组件或者程序，执行完成后再发送回整个全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。在这个处理过程中，用户必须等待。屏 幕形成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。2）AJAX的处理过程 Ajax 把 javascript 技术和

XMLHttpRequest

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

XMLHttpRequest

的强大特点。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。界面处理和通信交互相互独立工作。

3）基本知识

XMLHttpRequest

XMLHttpRequest

是一个 javascript 对象，通过

XMLHttpRequest

对象与服务器进行对话的是 属于javascript 技术范畴的，创建该对象可以通过下面的方式：

[code]<script language="javascript" type="text/javascript">var xmlHttp = new XMLHttpRequest()；</script>

getElementById()

获得

XMLHttpRequest对象以后

，可以通过该句柄

获取表单数据，

通过getElementById()

方法 修改表单上的数据，

通过etElementById()

方法 解析 HTML 和 XMLDOM 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 实际上有两种不同的版本，必须对这两种情况分别编写代码。参考如下：

[code]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

对象，无论运行什么样的浏览器。

[code]/* 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();}

[/code] Ajax 的基本请求/响应模型。首先需要一个 Web 页面能够调用的 javascript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有 Ajax 应用程序中基本的流程： 从 Web 表单中获取需要的数据。 建立要连接的 URL。 打开到服务器的连接。 设置服务器在完成后要运行的函数。 发送请求。

[code]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()

。[/code]学习 您可以参阅本文在 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 的解决方案的文章。 讨论 参与论坛讨论。 Ajax.NET Professional 是关于 Ajax 各个方面的很好的 blog。 通过参与 developerWorks blog 加入 developerWorks 社区。