文档章节

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

李长春
 李长春
发布于 2011/09/15 16:53
字数 2805
阅读 328
收藏 1

不再有页面刷新:使用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的组合,而且我认为它们都是各自领域的佼佼者。

你可以从这下载到完整的范例代码。

本文转载自:

李长春
粉丝 81
博文 249
码字总数 117406
作品 0
海淀
私信 提问
HTML我帮您-Java EE快速开发平台

HTML580是基于多个优秀的开源项目,高度整合封装而成的高效,高性能,强安全性的Java EE快速开发平台。 HTML580TML580开发平台主要采用SpringMVC + MyBatis + EasyUI + Apache Shiro + Ehcac...

luck332
2016/06/12
49
0
jeesite框架思维导图

工欲善其事,必先利其器!工匠想要使他的工作做好,一定要先让工具锋利。要做好一件事,准备工作非常重要。刚刚接触jeesite,觉得还不错,可其技术涉及 1、后端 * 核心框架:Spring Framewor...

zerov
2016/06/27
7.6K
8
JavaWeb15-HTML篇笔记(三)

1.1 案例三:使用JQuery完成仿百度的信息提示:1.1.1 需求: 在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的). 1.1.2 分析:1.1.2.1 步骤分析: ...

我是小谷粒
2018/06/01
0
0
基于mongodb实现的java CMS系统

[平台介绍] JeeMongoCms是基于多个优秀的开源项目,高度整合封装而成的高效,高性能,强安全性的 Java EE快速建站及开发平台。传统关系型数据库 Mysql 及 非关系型数据库 Mongodb 相结合的,...

曾韬
2016/09/13
96
0
使用java开发SDK你可能会用的4个库

使用java开发SDK你可能会用的4个库 xstream okhttp fastjson spring boot xstream https://github.com/x-stream/xstream/ 用法特别简单 定义javabean 然后写个简单的测试 返回结果 xstream ...

i5ting
2015/08/12
2.3K
2

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部