`
love19820823
  • 浏览: 928105 次
文章分类
社区版块
存档分类
最新评论

AJAX介绍--上手篇

 
阅读更多
这篇文章说明 AJAX 相关技术的基础,并提供实例供您上手。




AJAX 是啥?



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 则即使伺服器尚未传回资料也会继续执行其余的程式,这也就是 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() 将文件内容列出。


<SPAN
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('test.html')">
Make a request
</SPAN />

在此范例中:

* 首先使用者按下「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,内容如下:



I'm a test.
</ROOT />


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

...
onclick="makeRequest('test.xml')">
...

接着在 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站点证明,这些理由再也站不住脚了:

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

定义Ajax

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

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

  • 基于XHTMLCSS标准的表示;
  • 使用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)。

参考资料

分享到:
评论

相关推荐

    AJAX初体验之上手篇

    AJAX是这两年蛮热的东西,我也凑凑热闹,前些天去找了些教程学学,下面就按整个处理过程把自己学的东西写写,不过,因为是初学,所以 有错误就请见谅啦,也欢迎指正,vipxjw#163.com。 PS.写完了之后看了下,结果...

    AJAX 初学者的资料

    这篇文章说明 AJAX 相关技术的基础,并提供实例供您上手。

    AJAX初体验之实战篇——打造博客无刷新搜索

    如果你对AJAX不是很了解,可以先看看这篇教程的前篇《AJAX初体验之上手篇》。 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友,可能更喜欢自己去...

    AJAX打造博客无刷新搜索

    如果你对AJAX不是很了解,可以先看看这篇教程:《AJAX初体验之上手篇》。 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友,可能更喜欢自己去下载一...

    Java Web整合开发实战:基于Struts 2+Hibernate+Spring(PDF)

    9章 在Struts中应用Ajax技术 10章 Struts之项目实战 3篇 持久层框架Hibernate技术 11章 Hibernate快速上手 12章 精解Hibernate之核心文件 13章 探究Hibernate之核心接口 14章 Hibernate之项目实战 4篇 业务层...

    开源技术选型手册--为技术人员提供参考

    本迷你书是《开源技术选型手册》 的精选版,包括Web框架篇、动态语言篇、Ajax开发篇、版本控制篇、项目管理篇(AOP)、面向方面编程篇和面向服务架构篇(SOA)等,作者均为 InfoQ中文站编辑。《开源技术选型手册》由...

    21天学通ASP.NET 光盘

    第三篇主要分析了ASP.NET高级应用的内容,包括角色及成员资格管理、Web用户控件、Web服务应用、ASP.NET AJAX和站点的调试和发布等。第四篇ASP.NET实例开发篇重点讲解了三个ASP.NET实例,包括在线音乐网站、博客站点...

    21天学通ASP.NET 光盘part02

    第三篇主要分析了ASP.NET高级应用的内容,包括角色及成员资格管理、Web用户控件、Web服务应用、ASP.NET AJAX和站点的调试和发布等。第四篇ASP.NET实例开发篇重点讲解了三个ASP.NET实例,包括在线音乐网站、博客站点...

    21天学通ASP.NET 光盘part01

    第三篇主要分析了ASP.NET高级应用的内容,包括角色及成员资格管理、Web用户控件、Web服务应用、ASP.NET AJAX和站点的调试和发布等。第四篇ASP.NET实例开发篇重点讲解了三个ASP.NET实例,包括在线音乐网站、博客站点...

    21天学通ASP.NET 光盘part04

    第三篇主要分析了ASP.NET高级应用的内容,包括角色及成员资格管理、Web用户控件、Web服务应用、ASP.NET AJAX和站点的调试和发布等。第四篇ASP.NET实例开发篇重点讲解了三个ASP.NET实例,包括在线音乐网站、博客站点...

    21天学通ASPNET 光盘part05

    第三篇主要分析了ASP.NET高级应用的内容,包括角色及成员资格管理、Web用户控件、Web服务应用、ASP.NET AJAX和站点的调试和发布等。第四篇ASP.NET实例开发篇重点讲解了三个ASP.NET实例,包括在线音乐网站、博客站点...

    21天学通ASP.NET 光盘part06

    第三篇主要分析了ASP.NET高级应用的内容,包括角色及成员资格管理、Web用户控件、Web服务应用、ASP.NET AJAX和站点的调试和发布等。第四篇ASP.NET实例开发篇重点讲解了三个ASP.NET实例,包括在线音乐网站、博客站点...

    21天学通JavaScript 源代码1(还有10章在源代码2文件)

    第三篇讲解的是JavaScript的高级技术,主要讲解了JavaScript与XML技术、正则表达式、Ajax基础、Ajax高级应用、JavaScript与插件和JavaScript的调试与优化等。最后一篇综合案例篇用一个完整的例子讲解了如何使用...

    21天学通JavaScript 源代码2(有一部分在源码1文件中)

    第三篇讲解的是JavaScript的高级技术,主要讲解了JavaScript与XML技术、正则表达式、Ajax基础、Ajax高级应用、JavaScript与插件和JavaScript的调试与优化等。最后一篇综合案例篇用一个完整的例子讲解了如何使用...

    【JavaScript】4.初识 jQuery

    本来这一篇要写JavaScript的事件处理的,但是内容好多啊,这一套那一套的,看得有点晕……查资料的时候发现好些东西大家都是用 jQuery 实现的,据说挺好上手的,那我就先看看 jQuery,之后和JS对照着学吧。...

    Lerx 网站内容管理系统 v5.5.zip

    是一个能快速上手的开源的网站建设CMS。 SpringMVC Hibernate ORM MySQL Hibernate Search(Apache Lucence) IK中文分词 Log4J ... 主要采用Jquery 1.9.1,使用Layui 2模块化前端框架。 Jquery Layui JSON Ajax ...

    经典JAVA.EE企业应用实战.基于WEBLOGIC_JBOSS的JSF_EJB3_JPA整合开发.pdf

     本书是《轻量级java ee企业应用实战》的姊妹篇,《轻量级java ee企业应用实战》主要介绍以spring+hibernate为基础的java ee应用;本书则主要介绍以ejb 3+jpa为基础的java ee应用。ejb 3、jpa规范都属于sun公司所...

    搜一次CMS电影程序 PHP版 v1.6 build 20130129.rar

    2、添加了视频、文章内容模板中上一篇、下一篇的两个标签 3、核心代码调用方式优化 4、修复了视频分页的BUG 5、修复了用户中心注册以及其它信息展示BUG 6、修复了上版本部分后台功能的BUG &gt;&gt;程序结构优化,...

Global site tag (gtag.js) - Google Analytics