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

转自 http://www.oracle.com/technology/global/cn/pub/articles/schalk-ajax.html

作者：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 函数。为此，您可以将 οnkeyup= 赋予 Javascript 函数的值来处理输入域中的数据。例如，当发生 onkeyup 事件（即键入内容）时，输入域“searchField”将调用 Javascript 函数 lookup( )。

<input type="text" id="searchField"
size="20" οnkeyup="lookup('searchField');">

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

如何发出 XML HTTP 请求

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

if (window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
   req = new
ActiveXObject("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];

分析更为复杂的 XML 会使用如下代码迭代元素：

for (i=0;i<elements.length;i++) {
for (j=0;j<elements[i].childNodes.length;j++) {
var ElementData = elements[i].childNodes[j].firstChild.nodeValue; 
  }  
} 

结合使用 XMLHttpRequest 和 HTML

请注意，通过 XMLHttpRequest 获得 XML 响应无需总是格式良好和有效。因此，AJAX 服务器端组件可以直接将 HTML 内容发送至客户端。然后，JavaScript 可使用 req.responseText 方法/属性（它只是将内容作为字符串进行检索）检索该 HTML 内容。可以使用该 HTML 字符串文本以任何方式更改页面。例如，对于以下 HTML 流：

<h2>Hello there!</h2>

<p> This is <b>HTML</b></p>

可使用以下语句检索至一个字符串中：

var HTMLcontent = req.responseText;

之后通过 id="div1" 添加至指定的 HTML DIV。

document.getElementById("div1").innerHTML += HTMLcontent;

 

JSF 如何支持 AJAX

JSF 及其以组件为中心的体系结构通过允许 JSF 组件全权处理 Javascript 和嵌入式 AJAX“管件”解决了 AJAX 的固有难题。JSF 页面作者甚至无需关注客户端与服务器之间的 AJAX 交互。它们只需像使用其他 JSF 组件那样使用支持 AJAX 的 JSF 组件即可，而且感觉更好。JSF 与 AJAX 的结合使用前途光明！

保持关注！

---

Chris Schalk [ 网志] 是 Oracle 应用服务器和开发工具部门的首席产品经理和 Java 推广者。Chris 主攻 Web 应用程序开发，并负责为 Oracle JDeveloper 制定 Web 开发准则。