AJAX:Getting Started (http://developer.mozilla.o... 的翻译。原文的作者与编修历史可在它的历史页 (http://developer.mozilla.o..">

AJAX介绍－－上手篇

80酷酷网    80kuku.com

　　ajaxFrom MoztwWiki
本文章为 Mozilla Developer Center 的 javascript:void(0);">AJAX:Getting Started (http://developer.mozilla.o... 的翻译。原文的作者与编修历史可在它的历史页 (http://developer.mozilla.o... action=history)上看到。

这篇文章说明 javascript:void(0);">AJAX 相关技术的基础，并提供实例供您上手。




javascript:void(0);">AJAX 是啥？



javascript:void(0);">AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。

这两个 JavaScript 功能 是：

   * 在不重新读取页面的情况下对伺服器送出要求（request）
   * 解析、使用 XML 文件



第一步 – 怎么发出 XMLHttpRequest



为了用 JavaScript 对伺服器发送 HTTP 要求，你必须先以相关的类别（class）制出实体（instance）。Internet Explorer 首先以 ActiveX 物件方式提供 XMLHTTP 类别，而 Mozilla、Safari 及其他浏览器则随后以 XMLHttpRequest 类别支援此 ActiveX 物件中的类别及属性。

因此，如果想跨浏览器，那么可以这么写：

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
   http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
   http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

(由于这段程式仅供说明，所以是采最简方式写出。本文第三步中有另一种我们比较常用的写法。)

有些版本的 Mozilla 浏览器在伺服器送回的资料未含 XML mime-type 档头（header）时会出错。为了避免这个问题，你可以用下列方法覆写伺服器传回的档头，以免传回的不是 text/xml。

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

接下来是要决定伺服器传回资料后的处理方式，此时你只要以 onreadystatechange 这个属性指明要处理传回值的 JavaScript 函式名称即可，例如：

http_request.onreadystatechange = nameOfTheFunction;

注意，指定的函式名称后不加括号也没有参数。除了指定函式名称外，你也能用 Javascript 即时定义函式的方法来定一个新的处理函式，如下：

http_request.onreadystatechange = function(){
   // 做些事
};

决定处理方式之后你得确实发出 request，此时需叫用 HTTP request 类别的 open() 及 send() 方法，如下：

http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

   * open() 的第一个参数是 HTTP request 的方法，也就是从 GET、POST、HEAD 中择一使用，亦可用你主机上支援的方式。为遵循 HTTP 标准，请记得这些方法都是大写，不然有的浏览器（如 Firefox）或许不会理你。其它 HTTP request 可以支援的方法列表请参考 W3C 规格书 (http://www.w3.org/Protocol...。
   * 第二个参数是目标 URL。基于安全考量，你不能叫用同网域以外的网页。如果网域不同，则叫用 open() 时会出现「权限不足，拒绝存取」那类的错误。通常大伙会犯的错误多为在 domain.tld 网的网站下呼叫 www.domain.tld 中的网页，仅是一点点差别都不行。
   * 第三个参数决定此 request 是否不同步进行，如果设定为 TRUE 则即使伺服器尚未传回资料也会继续执行其余的程式，这也就是 javascript:void(0);">AJAX 中第一个 A 代表的意义。

send() 的参数在以 POST 发出 request 时可以是任何想传给伺服器的东西，而资料则以查询字串的方式列出，例如：

name=value&anothername=othervalue&so=on

不过如果你想要以 POST 方式传送资料，则必须先将 MIME 型态改好，如下：

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

否则伺服器就不会理你传过来的资料了。


第二步 – 处理伺服器传回的资料



传出 request 时必须提供处理传回值的函式名称。

http_request.onreadystatechange = nameOfTheFunction;

那么来看看这个函式该做些什么。首先，它必须检查 request 目前的状态：如果状态值为 4 代表伺服器已经传回所有资讯了，便可以开始解析所得资讯。

if (http_request.readyState == 4) {
   // 一切 ok, 继续解析
} else {
   // 还没完成
}

readyState 所有可能的值如下：

   * 0 (还没开始)
   * 1 (读取中)
   * 2 (已读取)
   * 3 (资讯交换中)
   * 4 (一切完成)

(资料来源: MSDN (http://msdn.microsoft.com/...

接下来要检查伺服器传回的 HTTP 状态码。所有状态码列表可于 W3C 网站 (http://www.w3.org/Protocol...上查到，但我们要管的是 200 OK 这种状态。

if (http_request.status == 200) {
   // 万事具备
} else {
   // 似乎有点问题，或许伺服器传回了 404 (查无此页) 或者 500 (内部错误) 什么的
}

检查传回的 HTTP 状态码后，要怎么处理传回的资料就由你决定了。有两种存取资料的方式：

   * http_request.responseText – 这样会把传回值当字串用
   * http_request.responseXML – 这样会把传回值视为 XMLDocument 对象，而后可用 JavaScript DOM 相关函式处理


第三步 - 万事俱备 - 简单范例



好，接着就做一次简单的 HTTP 范例，演示方才的各项技巧。这段 JavaScript 会向伺服器要一份里头有「I'm a test.」字样的 HTML 文件(test.html)，而后以 alert() 将文件内容列出。


    pointer; text-decoration: underline"
   >
       Make a request


在此范例中：

   * 首先使用者按下「Make a request」
   * 这么一来就会呼叫 makeRequest() 函式，亦传入参数值 test.html (也就是那份 HTML 档的名称，放在同目录下)
   * 接着发出 request，而后会将主导权交给 onreadystatechange 指定的 alertContents() 函式
   * alertContents() 检查回应是否正常，而后以 alert() 将 test.html 的内容列出

你可以由此测试本例 (http://www.w3clubs.com/moz...，也可以参考测试档案 (http://www.w3clubs.com/moz...。


第四步 – 处理 XML 回应值



前面的例子中，在收到 HTTP 传回值后我们以物件的 reponseText 属性使用 test.html 档案的内容，接着来试试 responseXML 属性的方法。

首先，我们得做个格式正确的 XML 文件，以便稍后取用。此档名唤 test.xml，内容如下：

<--l version="1.0"-->

   I'm a test.


在程式中，我们叫用档案的地方只须略事修改如下：

...
>
...

接着在 alertContents() 中，我们必须将 alert(http_request.responseText); 改成这样：

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

这样一来我们便可取得 responseXML 所传回的 XMLDocument 对象，而后以 DOM 相关的方法取用 XML 文件内容。你可以参考 test.xml 的原始码 (http://www.w3clubs.com/moz... 以及修改过后的测试程式 (http://www.w3clubs.com/moz...。

其他与 DOM 相关的方法，请参考 Mozilla DOM (http://www.mozilla.org/doc... 文件。 作为J2EE开发人员，我们似乎经常关注“后端机制（backend mechanics）”。我们通常会忘记，J2EE的主要成功之处在Web应用程序方面；许多原因使得人们喜欢利用Web开发应用程序，但主要还是因为其易于部署的特点允许站点以尽可能低的成本拥有上百万的用户。遗憾的是，在过去几年中，我们在后端投入了太多的时间，而在使我们的Web用户界面对用户自然和响应灵敏方面却投入不足。

　　本文介绍一种方法，Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么简单：利用一个Ajax框架（指DWR）构造一个应用程序，它直接从浏览器与后端服务进行通信。如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏，从而提升用户的浏览体验。

　　该应用程序中所使用的示例代码已打包为单独的WAR文件，可供下载。

简介

　　术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。

　　虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。

　　通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：

  • BackPack
  • Google Suggest
  • Google Maps
  • PalmSphere

　　所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。

定义Ajax

　　Adaptive Path公司的Jesse James Garrett这样定义Ajax：

　　Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

  • 基于XHTML和CSS标准的表示；
  • 使用Document Object Model进行动态显示和交互；
  • 使用XMLHttpRequest与服务器进行异步通信；
  • 使用JavaScript绑定一切。

　　这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。

Ajax的工作原理

　　Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

  • 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
  • 提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
  • 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
  • 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

　　一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。

Ajax可用于那些场景？——一个例子：MSN Money页面

　　前几天，在浏览MSN Money页面的时候，有一篇关于房地产投资的文章引起了我的好奇心。我决定使用站点的“Rate this article”（评价本文）功能，鼓励其他的用户花一点时间来阅读这篇文章。在我单击vote按钮并等待了一会儿之后，整个页面被刷新，在原来投票问题所在的地方出现了一个漂亮的感谢画面。

　　而Ajax能够使用户的体验更加愉快，它可以提供响应更加灵敏的UI，并消除页面刷新所带来的闪烁。目前，由于要刷新整个页面，需要传送大量的数据，因为必须重新发送整个页面。如果使用Ajax，服务器可以返回一个包含了感谢信息的500字节的消息，而不是发送26,813字节的消息来刷新整个页面。即使使用的是高速Internet，传送26K和1/2K的差别也非常大。同样重要的是，只需要刷新与投票相关的一小节，而不是刷新整个屏幕。

　　让我们利用Ajax实现自己的基本投票系统。

原始的Ajax：直接使用XmlHttpRequest

　　如上所述，Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识：http://tearesolutions.com/ajax-demo/raw-ajax.html。注：如果您已经在本地WebLogic容器中安装了ajax-demo.war，可以导航到http://localhost:7001/ajax-demo/raw-ajax.html，

　　浏览应用程序，参与投票，并亲眼看它如何运转。熟悉了该应用程序之后，继续阅读，进一步了解其工作原理细节。

　　首先，您拥有一些简单的定位点标记，它连接到一个JavaScriptcastVote(rank)函数。 
function castVote(rank) {  var url = "/ajax-demo/static-article-ranking.html";  var callback = processAjaxResponse;  executeXhr(callback, url);}

　　该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr，提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行。由于我希望它运行在一个简单的Apache环境中，“cast vote URL”只是一个简单的HTML页面。在实际情况中，被调用的URL将记录票数并动态地呈现包含投票总数的响应。

　　下一步是发出一个XmlHttpRequest请求： 
function executeXhr(callback, url) {  // branch for native XMLHttpRequest object  if (window.XMLHttpRequest) {    req = new XMLHttpRequest();    req.onreadystatechange = callback;    req.open("GET", url, true);    req.send(null);  } // branch for IE/Windows ActiveX version  else if (window.ActiveXObject) {    req = new ActiveXObject("Microsoft.XMLHTTP");    if (req) {      req.onreadystatechange = callback;      req.open("GET", url, true);      req.send();    }  }}

　　如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，这样就要使用所提供的ActiveX实现。

executeXhr()方法中最关键的部分是这两行： 

req.onreadystatechange = callback;req.open("GET", url, true);

　　第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。

　　一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。 
function processAjaxResponse() {  // only if req shows "loaded"  if (req.readyState == 4) {    // only if "OK"    if (req.status == 200) {      502 502'votes').innerHTML = req.responseText;    } else {      alert("There was a problem retrieving the XML data:" +      req.statusText);    }  }}

　　该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列举了常用的XmlHttpRequest对象属性。

属性

描述

onreadystatechange

每次状态改变所触发事件的事件处理程序

readyState

对象状态值：

  • 0 = 未初始化（uninitialized）
  • 1 = 正在加载（loading）
  • 2 = 加载完毕（loaded）
  • 3 = 交互（interactive）
  • 4 = 完成（complete）

responseText

从服务器进程返回的数据的字符串形式

responseXML

从服务器进程返回的DOM兼容的文档数据对象

status

从服务器返回的数字代码，比如404（未找到）或200（就绪）

statusText

伴随状态码的字符串信息

　　现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成（readyStatus == 4），然后根据服务器的设定询问请求状态。如果一切正常（status == 200）,就使用innerHTML属性重写DOM的“votes”节点的内容。

　　既然您亲眼看到了XmlHttpRequest对象是如何工作的，就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。

Ajax: DWR方式

　　按照与文章评价系统相同的流程，我们将使用Direct Web Remoting（DWR）框架实现同样的功能。

　　假定文章和投票结果存储在一个数据库中，使用某种对象/关系映射技术来完成抽取工作。为了部署起来尽可能地简单，我们不会使用数据库进行持久性存储。此外，为使应用程序尽可能通用，也不使用Web框架。相反，应用程序将从一个静态HTML文件开始，可以认为它由服务器动态地呈现。除了这些简化措施，应用程序还应该使用Spring Framework关联一切，以便轻松看出如何在一个“真实的”应用程序中使用DWR。

　　现在应该下载示例应用程序并熟悉它。该应用程序被压缩为标准的WAR文件，因此您可以把它放置到任何一个Web容器中——无需进行配置。部署完毕之后，就可以导航到http://localhost:7001/ajax_demo/dwr-ajax.html来运行程序。

　　可以查看HTML 源代码，了解它如何工作。给人印象最深的是，代码如此简单——所有与服务器的交互都隐藏在JavaScript对象ajaxSampleSvc的后面。更加令人惊讶的是，ajaxSampleSvc服务不是由手工编写而是完全自动生成的！让我们继续，看看这是如何做到的。

引入DWR

　　如同在“原始的Ajax”一节所演示的那样，直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长，而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作，并将结果封送到浏览器。

　　设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架，可以很轻松地将它插入到Web应用程序中，以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成，从而允许用户直接向Web客户机公开bean。

　　DWR真正的巧妙之处是，在用户配置了要向客户机公开的服务之后，它使用反射来生成JavaScript对象，以便Web页面能够使用这些对象来访问该服务。然后Web页面只需接合到生成的JavaScript对象，就像它们是直接使用服务一样；DWR无缝地处理所有有关Ajax和请求定位的琐碎细节。

　　让我们仔细分析一下示例代码，弄清它是如何工作的。

应用程序细节：DWR分析

　　关于应用程序，首先要注意的是，它是一个标准的Java应用程序，使用分层架构（Layered Architecture）设计模式。使用DWR通过JavaScript公开一些服务并不影响您的设计。

　　下面是一个简单的Java服务，我们将使用DWR框架直接将其向JavaScript代码公开：

package com.tearesolutions.service;public interface AjaxSampleSvc {   Article castVote(int rank);}

　　这是一个被简化到几乎不可能的程度的例子，其中只有一篇文章可以投票。该服务由Spring管理，它使用的bean名是ajaxSampleSvc，它的持久性需求则依赖于ArticleDao。详情请参见applicationContext.xml。

　　为了把该服务公开为JavaScript对象，需要配置DWR，添加dwr.xml文件到WEB-INF目录下： 

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN" "http://www.getahead.ltd.uk/dwr/dwr.dtd"><dwr> <allow>  <create creator="spring" javascript="ajaxSampleSvc">   <param name="beanName" value="ajaxSampleSvc" />  </create>  <convert converter="bean" match="com.tearesolutions.model.Article"/>  <exclude method="toString"/>  <exclude method="setArticleDao"/> </allow></dwr>

　　dwr.xml文件告诉DWR哪些服务是要直接向JavaScript代码公开的。注意，已经要求公开Spring bean ajaxSampleSvc。DWR将自动找到由应用程序设置的SpringApplicationContext。为此，必须使用标准的servlet过滤器ContextLoaderListener来初始化Spring ApplicationContext。

　　DWR被设置为一个servlet，所以把它的定义添加到web.xml： 
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD  Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"><web-app> <display-name>Ajax Examples</display-name> <listener>  <listener-class>      org.springframework.web.context.ContextLoaderListener  </listener-class> </listener> <servlet>  <servlet-name>ajax_sample</servlet-name>  <servlet-class>com.tearesolutions.web.AjaxSampleServlet</servlet-class>  <load-on-startup>1</load-on-startup> </servlet> <servlet>  <servlet-name>dwr-invoker</servlet-name>  <display-name>DWR Servlet</display-name>  <description>Direct Web Remoter Servlet</description>  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>  <init-param>   <param-name>debug</param-name>   <param-value>true</param-value>  </init-param> </servlet> <servlet-mapping>  <servlet-name>ajax_sample</servlet-name>  <url-pattern>/ajax_sample</url-pattern> </servlet-mapping> <servlet-mapping>  <servlet-name>dwr-invoker</servlet-name>  <url-pattern>/dwr/*</url-pattern> </servlet-mapping></web-app>

　　做完这些之后，可以加载http://localhost:7001/ajax-demo/dwr，看看哪些服务可用。结果如下：

图3. 可用的服务

　　单击ajaxSampleSvc链接，查看有关如何在HTML页面内直接使用服务的示例实现。其中包含的两个JavaScript文件完成了大部分的功能： 
<script type='text/javascript'    src='/ajax-demo/dwr/interface/ajaxSampleSvc.js'></script><script type='text/javascript'    src='/ajax-demo/dwr/engine.js'></script>

ajaxSampleSvc.js是动态生成的：

function ajaxSampleSvc() { }ajaxSampleSvc.castVote = function(callback, p0){   DWREngine._execute(callback, '/ajax-demo/dwr',  'ajaxSampleSvc', 'castVote', p0);}

　　现在可以使用JavaScript对象ajaxSampleSvc替换所有的XmlHttpRequest代码，从而重构raw-ajax.html文件。可以在dwr-ajax.html文件中看到改动的结果；下面是新的JavaScript函数：

function castVote(rank) {  ajaxSampleSvc.castVote(processResponse, rank);}function processResponse(data) { var voteText = "
Thanks for Voting!
"    + "
Current ranking: " + data.voteAverage     + " out of 5
"     + "
Number of votes placed: "     + data.numberOfVotes + "
"; 502 502'votes').innerHTML = voteText;       }

　　惊人地简单，不是吗？由ajaxSampleSvc对象返回的Article域对象序列化为一个JavaScript对象，允许在它上面调用诸如numberOfVotes()和voteAverage()之类的方法。在动态生成并插入到DIV元素“votes”中的HTML代码内使用这些数据。

下一步工作

　　　在后续文章中，我将继续有关Ajax的话题，涉及下面这些方面：

  • Ajax最佳实践

　　像许多技术一样，Ajax是一把双刃剑。对于一些用例，其应用程序其实没有必要使用Ajax，使用了反而有损可用性。我将介绍一些不适合使用的模式，突出说明Ajax的一些消极方面，并展示一些有助于缓和这些消极方面的机制。例如，对Netflix电影浏览器来说，Ajax是合适的解决方案吗？或者，如何提示用户确实出了一些问题，而再次单击按钮也无济于事？

  • 管理跨请求的状态

　　在使用Ajax时，最初的文档DOM会发生一些变化，并且有大量的页面状态信息存储在客户端变量中。当用户跟踪一个链接到应用程序中的另一个页面时，状态就丢失了。当用户按照惯例单击Back按钮时，呈现给他们的是缓存中的初始页面。这会使用户感到非常迷惑！

  • 调试技巧

　　使用JavaScript在客户端执行更多的工作时，如果事情不按预期方式进行，就需要一些调试工具来帮助弄清出现了什么问题。

结束语

　　本文介绍了Ajax方法，并展示了如何使用它来创建一个动态且响应灵敏的Web应用程序。通过使用DWR框架，可以轻松地把Ajax融合到站点中，而无需担心所有必须执行的实际管道工作。

　　特别感谢Getahead IT咨询公司的Joe Walker和他的团队开发出DWR这样神奇的工具。感谢你们与世界共享它！

下载

　　本文中演示的应用程序源代码可供下载：ajax-demo.war（1.52 MB）。

参考资料

  • http://www.getahead.ltd.uk/dwr——Getahead IT咨询公司。
  • Jesse James Garrett所撰写的“Ajax: A New Approach to Web Applications”（Adaptive Path，2005年二月）。
  • “Dynamic HTML and XML: The XMLHttpRequest Object”（Apple Developer Connection）。

原文出处

An Introduction To Ajax

http://dev2dev.bea.com/pub/a/2005/08/ajax_introduction.html

<

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间

上一篇浅谈在网页上显示当前日期的两种方法

下一篇AJAX技术如何节省应用的带宽：多次交互，每次少量更新

相关文章

点击：