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;
  }
}

1. 建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。
2. 尝试在 Microsoft 浏览器中创建该对象：
   • 尝试使用 Msxml2.XMLHTTP 对象创建它。
   • 如果失败，再尝试 Microsoft.XMLHTTP 对象。
3. 如果仍然没有建立 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 应用程序中基本的流程：

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

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 的解决方案的文章。
  
  

讨论

• 参与论坛讨论。
  
  
• Ajax.NET Professional 是关于 Ajax 各个方面的很好的 blog。
  
  
• 通过参与 developerWorks blog 加入 developerWorks 社区。