关闭

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

标签: ajaxjavascriptxmlhttprequest服务器jsfxml
2566人阅读 评论(0) 收藏 举报
分类:

转自 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

图 1 核心 AJAX 体系结构

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

<input type="text" id="searchField"
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 = 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 开发准则。
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:479922次
    • 积分:5494
    • 等级:
    • 排名:第4809名
    • 原创:32篇
    • 转载:182篇
    • 译文:1篇
    • 评论:111条
    文章分类
    最新评论