你的第一杯Web 2.0 —— 快速浏览jQuery、Spring MVC和XStream/J...

再也不有页面刷新：使用jQuery
相关厂商内容

免费迷你书下载：Flex入门指南——PHP开发者

Flash Builder 4 Beta和FlexUnit下的测试驱动开发

下载Flex 4 SDK，构建超级棒的Flex应用

使用Pixel Bender Toolkit制做特效——建立vintage tone过滤器(Part 2)

在Flash Builder4 beta中使用网络监测器跟踪网络流量
相关赞助商

聚集最新RIA技术相关资源，提供Flash开发平台相关工具高速下载，免费得到Adobe软件的产品序列号。

在我参与建立的一些Web网站应用中，一直存在有对用户理所固然的抱歉：“哦，对不起，我不得不让你经受一些没必要要的页面刷新。”哈，这就是我在今年年初据说jQuery后，个人脑子里一下闪过的念头。

jQuery是个强大而非侵入式的JavaScript库，但它的名字起得不好劲。它的简洁而高可读性的语法再次激发了我编写JavaScript代码的兴趣。它的非侵入性能让它只须要对既有代码作小小的修改，就能很容易为web应用添加一些丰富的功能——好比后台表单提交。当你工做在一个很大的代码库，或者扩展性的重构没法取得成效时，非侵入的特性显得尤为重要。个人老板不会给我四周的时间推倒重来，为一个已经存在的网站添加一些视觉效果。但我也许能够有四个小时的时间，而这对jQuery来讲足够了。

做为一个简单的例子，咱们假设有一个汽车搜索功能，它会基于一个交通工具型号来返回结果。向文本框输入文本，点击提交，而后显示结果。JSP看起来会是这样：

 

在用户输入名称并点击提交后，在页面刷新时整个屏幕会变白，而后就会显示出结果来。这不是一个好的用户体验。如今，让咱们用jQuery来改善一下用户的体验，只刷新页面中那部分的确须要改变的部分。对这个既有页面所作的修改是：
把搜索表单和搜索结果分红两个单独的JSP页面，这样结果也能够独立的显示，而不须要从新渲染搜索的表单。
在搜索表单JSP上添加一个占位符，来存放搜索的结果。
添加一行jQuery代码，来在后台使用AJAX提交搜索表单内容，并把结果存放在占位符 中。

修改后的代码是这样的：

 

 

当用户输入名称并点击了提交时，只有搜索结果的会刷新。这样用户体验就获得了改善，而咱们也不须要编写太多的JavaScript代码。让咱们来深刻一点研究下这段jQuery脚本：

 

这段代码的意思是：

第2行——“当页面加载完成时……”

第3行——“找到一个id为searchForm的表单，并让它变成具有AJAX功能的表单（在后台提交）”

第4行——“使用POST方法而不是GET”

第5行——“把搜索的结果放在一个id为searchResults的DIV中”

这几行jQuery代码以$()开始，并老是会选择某个元素来进行操做，好比“document”或者“#searchForm”。jQuery就像是个装饰器，可让你为元素添加各类各样有趣的行为，好比具有AJAX提交功能的表单、可视化效果、拖拽等等。

这个例子演示出几行代码所包含的众多功能，也表达了为何我会喜欢jQuery：使用装饰器方法来加强既有的web应用，是很是理想而完美的。不须要重写既有的HTML，你使用jQuery就能够添加新的行为。
使用Spring MVC和XStream/Jettison返回数据而不是HTML

第一个例子中，jQuery是用在了客户端，而在服务器端没有什么显著的变化。咱们仍然保留基本的流程，用户在浏览器上点击某个元素，建立一个服务器请求，而后返回HTML内容。当若是服务器端能返回JSON或者XML格式的数据，而不是HTML，会怎样呢？

返回数据而不是能够展示的HTML，这可让客户端缓存结果，从而减小服务器请求的次数。数据自己要比HTML简洁不少——这样也减少了返回结果的尺寸。请看下面的这个例子：

 

在标准的流程中，三次用户与浏览器的交互会带来三次服务器请求。如今让咱们看看一个优化事后，服务器只返回数据而不是HTML的流程：

 

在优化后的流程中，三次用户交互只会产生一次服务器请求。

还有许多潜在的能够由服务器返回的数据格式。具体选择哪一种，能够根据状况而定。下面是一些选项以及选择的缘由：服务器请求格式 什么时候使用 使用频率
完整HTML页面 初始页面加载 低
HTML片断 在服务器端展示更加容易并且有必要。好比使用流行的标签库来显示一个table。 低
JSONB

 {
  "car": {
     "id": "5",
     "make": "Acura",
     "model": "MDX"
   }
 }  在大多数服务器响应中均可以使用的数据格式。简洁，而且很容易跟JavaScript配合工做。 高
XML

     Acura
     MDX

 复杂的没法轻松使用JSON表示的数据。XML的结果包括元素和属性，而JSON只包含元素。 低

 

让咱们来看一个服务器返回JSON数据到浏览器的例子。咱们把原来的汽车型号搜索页替换成一个新的页面，它包含一个制造商（make）和型号（model）的下拉列表。当用户选择制造商时，对应那个制造商的全部模型就会自动更新。若是用户选择了一个型号，下面就会显示一张列满该可用型号年代的表格。

由服务器端开始，咱们会看到咱们如何使用Spring MVC以及XStream和Jettison来建立JSON数据。首先咱们会构建一个Spring MVC控制器：

 

第1行——@Controller注解告诉Spring MVC把这个类用做一个控制器。

第4行——@RequestMapping注解将请求URL映射处处理方法上。

第6行——建立ModelAndView对象，其中view名称为carselector，它将会映射到carselector.jsp。

第7行——使用键值makeList将一个制造商（Make）列表添加到ModelAndView中。这个对象能够在JSP中经过${makeList}来取到。

第11行——再一次，@RequestMapping注解将请求URL映射处处理方法上。

第12行——@RequestParam将一个请求参数对应到一个方法参数上。

第13行——经过我写的叫作JsonView的JSON视图类来建立ModelAndView对象。Spring MVC让编写自定义视图类变得很是简单，而JsonView中就包含了XStream的逻辑。

第14行——使用JsonView所指望的键值将型号（Model）的列表添加到ModelAndView。

总的来讲，控制器会响应两个URL，“carselector.html”和“models.html”。它经过一个标准的JSP视图针对 “carselector.html”返回一个HTML页面。让咱们来看看JsonView类，它针对“models.html”返回JSON结果：

 

第4行——使用JettisonMappedXmlDriver来初始化XStream，从而输出JSON而不是XML。

第6行——Spring MVC视图类必须实现render()方法。

第9行——从model中取出以前由控制器建立的数据。

第11行——实际生成JSON（尽管方法叫作toXML）。

它就是那么简单。XStream库也包含一套注解，你能够将其放在你本身的域中或者传输对象上，来提示如何展示JSON，但通常来讲这个库基本不须要什么配置。

如今服务器端就生成了JSON，但客户端如何使用它呢？针对这个问题，咱们须要再次来利用jQuery。请记住，咱们须要处理两个事件：从“制造商（make）”下拉列表中选择数值会更新“型号（model）”下拉列表中的数据。而选择型号（model）下拉列表中的数值会填充型号（model）年表明格中的数据。下面是用jQuery的ready方法来绑定事件处理方法：

 

“select[name^=make]”表达式看起来很是像CSS选择器，那是由于jQuery选择器是CSS选择器的一个超集（就好像CSS和 Regex有一个共同的孩子）。这些表达式至关强大，能够用来同时选择一个或多个对象。在这个例子中，表达式的意思是，“选择一个名字叫‘make’ 的select元素，并把loadModels函数绑定到它的change事件上”。每次用户从这个下拉列表中选择数值时，浏览器就会产生change事件，而后loadModels函数就会被调用。

让咱们来看一下其中一个事件处理器：

 

第2行——getJSON方法将会执行AJAX请求，并指望从服务器返回JSON数据。它须要三个参数：请求的URL，任何请求参数，以及一个一旦获得服务器响应就被调用的回调函数。

第4行——回调函数是个闭包。JavaScript中的闭包相似于Java中的匿名内部类，它们能够很方便地做为回调函数来使用。要注意，这个函数指望从服务器返回的JSON数据是做为一个参数传入的。

第6行——在这一点上，咱们须要了解一点咱们使用到的JSON的结构。在这个简单的例子中，model数据的结构是：

 

第6行的代码意思是，“针对每个型号（model）……”

第7和第8行——从每个型号（model）构建一个元素

第10行——选择name=model的select元素，并使用刚刚构建的options来代替select元素的option列表。

只需少许的JavaScript代码，咱们就能够作到：
注册一个事件处理器
异步获取JSON数据
基于JSON数据更新下拉列表的选项

这就是其强大之处，也是我很是喜好jQuery的缘由之一。那关于缓存呢？你能够简单地在getJSON调用以前添加一个“if”语句来检查结果是否已经存在了。另外也有一个很好的叫作jCache的jQuery插件你可使用。
结论

jQuery + Spring MVC + XStream/Jettison提供了一个很棒的快速开发web应用的全栈式框架，能够清晰地分离数据和表现层，为用户提供更加友好的体验，并潜在地提 升性能。还有其余什么高质量框架能够帮你作到这些吗？固然也许有，但我喜欢jQuery、Spring MVC和XStream/Jettison的组合，并且我认为它们都是各自领域的佼佼者。

你能够从这下载到完整的范例代码。