注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

庄庄的家

庄庄的家-网易博客

 
 
 

日志

 
 

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

2008-02-29 18:17:15|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

首先,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 = 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];

分析更为复杂的 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 开发准则。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=778284

  评论这张
 
阅读(203)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017