【IT168知识库】
 

[转]AJAX 核心基础技术 - 非宣传性简介

转自

作者：Chris Schalk

 

AJAX 核心基础技术的真实概述。

2006 年 4 月发布

迄今为止，您可能已经听过太多有关 AJAX 的宣传报道，而且很多产品都宣称它们支持或“兼容”AJAX。但是，很多人可能一直无法从技术角度对 AJAX 的实质进行简单、严谨的阐释。本文将摈弃所有华丽词藻，从平实的角度对构成 AJAX 的核心基础进行概述。

 

首先，AJAX 是个新事物吗？

并非如此。远程 Javascript 在最近掀起了一轮热潮。利用它，开发人员能够使用 XML 数据与服务器交互。而 AJAX 就是一种远程 Javascript。AJAX 之所以成为可能，是因为现在许多主要的浏览器都提供可进行独立 XML HTTP 请求的对象。Internet Explorer 5 以及更高版本提供了一个 XMLHTTP 对象，而基于 Mozilla 的浏览器则提供了一个 XMLHttpRequest 对象。这些对象都能够从服务器请求 XML 数据，并以类似的方式处理这些数据。所有能够动态提供 XML 的技术都可以使用服务器端 AJAX 组件。任何动态 Web 技术（从 PHP 到 Servlet）都可以充当 AJAX 服务器。

 

远程 Javascript 与 AJAX 的缺点之一是，页面作者（设计最终页面的人员）必须编写相当数量的 Javascript 代码来管理 XMLHTTP 交互。幸好，JavaServer Faces (JSF) 为此提供了一个解决方案，从而使 AJAX 更加易于使用。

Ajax Under The Hood

只有了解了 AJAX 客户端-服务器事务中涉及的核心 AJAX 体系结构后，方可进一步理解与其他技术（如 JSF）集成的更为高级的 AJAX 示例。

AJAX 目前可以提供以下两种核心技术：

支持 Javascript 和支持 XMLHTTP 和 XMLHttpRequest 对象的浏览器

能够以 XML 响应的 HTTP 服务器技术

因为所有流行的浏览器都支持 Javascript 和必要的 XMLHTTP 请求对象，且几乎所有 Web 服务器技术均可生成 XML（或任何标记），所以核心 AJAX 技术普遍适用。

最简单的 AJAX 应用程序实质上就是一个带有 Javascript 函数的标准 HTML 用户界面，该界面可与能动态生成 XML 的 HTTP 服务器进行交互。任何动态 Web 技术（从 CGI 到 Servlet，以及本文稍后将谈到的 JSF）都可充当服务器端 AJAX 技术。

核心 AJAX 应用程序的主要组件包括：

HTML 页面，其中包含：

与 AJAX Javascript 函数交互的 UI 元素

与 AJAX 服务器交互的 Javascript 函数

可处理 HTTP 请求并以 XML 标记响应的服务器端 Web 技术。

这些元素如图 1 所示。

图 1 核心 AJAX 体系结构

了解了关键元素后，我们就可以设计一个包含输入域、按钮或任何可链接至 Javascript 的元素的 HTML 用户界面了。例如，按下按钮可激活某个 Javascript 函数，或者更深入些，在用户向输入域键入内容时可激活某个 Javascript 函数。为此，您可以将 onkeyup= 赋予 Javascript 函数的值来处理输入域中的数据。例如，当发生 onkeyup 事件（即键入内容）时，输入域“searchField”将调用 Javascript 函数 lookup( )。

<input type="text"size="20" onkeyup="lookup('searchField');">

除了响应用户界面交互（例如键入）外，AJAX Javascript 函数还可根据自己的计时器进行独立操作。（可以使用该方法执行 AJAX autosave（自动保存）特性。）

如何发出 XML HTTP 请求

现在，我们来了解如何调用 AJAX Javascript 代码。请看以下 Javascript 代码，该代码可发出一个 XML HTTP 请求：

if (window.XMLHttpRequest) { req = new XMLHttpRequest();}else if (window.ActiveXObject) { req = newActiveXObject("Microsoft.XMLHTTP");}

利用该代码断，主要的浏览器（Internet Explorer 和 Mozilla/Safari）都可向服务器发出独立的 HTTP 请求。该代码首先检查浏览器是否支持上文提及的两个支持的 XMLHTTP 对象，然后对其中之一进行实例化。

一旦对 XMLHttpRequest（或 Microsoft 的 XMLHTTP）进行了实例化，即可以通过完全相同的方式对其进行操作。

要初始化到服务器的连接，需使用以下 open 方法：

req.open("GET", url, true);

第一个参数是 HTTP 方法（GET 或 POST）。第二个参数是服务器（或使用 POST 的表单操作）的 URL；第三个参数为 true，则表明可进行异步调用（“A”代表 AJAX）。这意味着该浏览器可以在实现请求的同时继续执行其他操作。open 方法中若为 false 值，则表明为非异步处理或顺序处理。我们不建议如此，这是因为您的浏览器会在返回响应前停止操作。

使用 open 初始化连接后，可进行 onreadystatechange 调用（只适用于异步调用）。这将注册一个回调函数，一旦请求完成就会调用该函数：

req.onreadystatechange = processXMLResponse;

在完成请求后，将调用处理 XML 响应的 processXMLResponse( ) 函数。可以通过 onreadystatechange 语句以内联方式声明回调函数：

req.onreadystatechange = processXMLResponse() { // process request };

还可使用 req.setRequestHeader 指定任何标题内容，如：

req.setRequestHeader("Cookie", "someKey=true");

一旦完全初始化了 XMLHTTP 请求对象 (req)，就可使用 send( ) 初始化对服务器的调用：

req.send(null);

对于 GET 请求，使用 null 值或空字符串“”。

POST 请求包含一个带有表单数据的字符串参数。它们也要求在请求的标题中设置 Content-Type。以下两行演示了如何执行 AJAX POST 请求：

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"; req.send("name=scott&email=stiger@foocorp.com");

完成请求后调用的回调函数通常具有确保请求不会发生错误的代码。这可通过检查 readyState 以及 HTTP 请求的整体状态来实现。（readystate 为 4 表示 XMLHTTP 请求完整，而 200 表示请求成功（404 含义正好相反）。

function processXMLResponse() { if (req.readyState == 4) { if (request.status != 200) {// Process the XML response } } }

XML 响应的处理是通过使用标准 Javascript DOM 方法完成的。例如，要从输入的 XML 流中抽取员工姓名：

<employee> Chris </employee>

您可以使用以下代码：

var name = req.responseXML.getElementsByTagName("employee")[0];