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

转载 2006年06月07日 16:09:00

转自 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 开发准则。

相关文章推荐

读《JavaServer Faces 核心编程(第3版)》一书的记录—— 第1章 JSF 简介——案例 login-ajax

Ajax的核心技术XMLHttpRequest方法

整个Ajax技术紧紧围绕在XMLHttpRequest对象的周围,Ajax整个技术的过程如下:XMLHttpRequest发送请求,在与服务器交互中,其readyState状态可以监听到服务器 的响...

小博老师解析Java核心技术 ——AJAX第三弹

[引言] 前二回小傅老师给大伙讲解了AJAX的原理与底层实现,很多小伙伴发信给我说“老师,前端JS代码太多了。一个问题找了个半天,原来是个单词拼错了:-(。有没有简单点的方法实现AJAX啊?”真是应...
  • bwf_erg
  • bwf_erg
  • 2017年01月23日 22:09
  • 193

小博老师解析JavaWeb核心技术 ——AJAX第一弹

[引言] AJAX是目前Web编程中最流行的技术之一,它是Web2.0技术的核心,全称为Asynchronous JavaScript and XML 中文名称定义为异步的JavaScript和...
  • bwf_erg
  • bwf_erg
  • 2017年01月22日 20:06
  • 98

Ajax核心:XMLHTTP组件相关技术资料

Ajax核心

小博老师解析 Ajax核心技术 ——Ajax原理及优缺点

[引言] AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)。是一种创建交互式网页应用的网页开发技术。它使用: 使用XHTML+C...
  • bwf_erg
  • bwf_erg
  • 2016年12月01日 14:08
  • 84

Ajax的技术核心实现动态无刷新

Ajax实现的web交互效果跟传统的大不相同,它通过Ajax 引擎,使得应用过程很自然,操作很流畅,因为其只和服务器交换有用的数据,而页面显示等不必要的数据则不再重新加载。Ajax 引擎其实就是Jav...

小博老师解析Java核心技术 ——AJAX第二弹

[引言] 上一回小博老师和大家聊了AJAX的原理与对应前端实现代码,那服务器是怎么接收客户端的请求并作出回应的呢。这回小博老师与大伙唠唠,AJAX的完整执行流程与服务器侧代码的实现。   [执行...
  • bwf_erg
  • bwf_erg
  • 2017年01月22日 21:57
  • 74

J2EE的13种核心技术简介

  • 2012年11月22日 08:44
  • 176KB
  • 下载

ajax简介及入门基础

  • 2010年11月24日 22:53
  • 983KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX 核心基础技术 - 非宣传性简介
举报原因:
原因补充:

(最多只允许输入30个字)