xstream-1.4.4
没有更多页面刷新：使用jQuery！
这是我帮助建立的网站用户的公开道歉：“对不起，我因不必要的页面刷新而使您受苦。” 这是今年早些时候学习jQuery之后突然出现的第一件事。
jQuery是一个功能强大但不引人注目JavaScript库，名称很糟糕。 简洁，可读性强的语法让我对再次编写JavaScript感到兴奋。 毫不夸张的说来，只需很少修改现有代码，就可以轻松地向Web应用程序添加丰富的行为（例如后台表单提交）。 当您使用大型代码库时，或者在进行大规模重构无法获得资金的情况下，保持不容干扰尤其重要。 我的老板不会给我4个星期的时间回去为现有站点增加视觉效果。 但是我可能会花4个小时，这就是jQuery可以提供帮助的地方。
举一个简单的例子，想象一个汽车搜索功能，该功能基于车辆模型返回结果。 在字段中输入文本，单击提交，然后显示结果。 JSP可能看起来像：
用户输入名称并单击提交后，页面刷新时整个屏幕变为白色，然后显示结果。 这不是良好的用户体验。 现在，让我们使用jQuery通过仅刷新页面中实际需要更改的部分来改善这种体验。 对现有页面所做的修改是：
- 将搜索表单和搜索结果分成两个单独的JSP，以便可以分别显示结果，而无需重新呈现搜索表单。
- 在搜索表单JSP上添加一个占位符<div>来保存搜索结果。
- 添加一行jQuery，该行使用AJAX在后台提交搜索表单，并将结果放在占位符<div>中。
产生的代码如下所示：
该代码显示为：
第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片段 | 服务器端渲染的地方比较容易或有必要。 例如，您正在使用流行的<displaytag>标签库呈现表。 | 低 |
| JSONB { “汽车”：{ “ id”：“ 5”， “ make”：“ Acura”， “型号”：“ MDX” } } | 良好的通用数据格式，可用于大多数服务器响应。 简洁易用JavaScript。 | 高 |
| XML格式 <car id =“ 5”> <make> Ac歌</ make> <model> MDX </ model> </ car> | JSON中无法轻松表示的复杂数据。 XML的结构包含元素和属性，而JSON仅包含元素。 | 低 |
让我们看一个代码示例，其中服务器将JSON数据返回到浏览器。 让我们用同时包含品牌和型号下拉菜单的页面替换原始的汽车型号搜索页面。 当用户选择品牌时，将填充该品牌的模型。 当用户选择模型时，将列出列出可用模型年份的表。
从服务器端开始，我们将看到如何使用Spring MVC以及XStream和Jettison来提供JSON数据。 首先，我们将构建一个Spring MVC控制器：
第1行– @Controller注释告诉Spring MVC将该类用作控制器，就像您猜到的那样
第4行– @RequestMapping批注将请求URL映射到处理程序方法
第6行–创建一个ModelAndView对象，其视图名称为“ carselector”，该视图名称将映射到carselector.jsp
第7行–使用“ makeList”键将Make列表添加到ModelAndView。 该对象将在JSP中使用以下表达式提供：$ {makeList}
第11行–同样，@RequestMapping批注将请求URL映射到处理程序方法
第12行– @RequestParam批注将请求参数映射到方法参数
第13行–这个ModelAndView是使用我编写的名为JsonView的简单JSON渲染View类创建的。 Spring MVC使编写自定义视图非常容易，而JsonView是XStream的连接点。
第14行–使用JsonView期望的键将模型列表添加到ModelAndView。
总之，控制器响应两个URL“ carselector.html”和“ models.html”。 通过标准的JSP视图，它呈现HTML页面作为对“ carselector.html” URL的响应。 让我们看一下JsonView类，该类为“ models.html”请求呈现JSON结果：
第4行–使用JettisonMappedXmlDriver实例化XStream以输出JSON而不是XML
第6行-Spring MVC View类必须实现render（）方法
第9行–从控制器创建的模型中获取数据
第11行–实际生成JSON（尽管该方法名为toXML）
它真的很容易。 XStream库还包括一组批注，您可以将它们放在域上或转移对象，以提供有关如何呈现JSON的提示，但通常，该库仅需最少的配置即可工作。
现在服务器正在生成JSON，但是客户端如何使用它？ 对于该答案，我们将再次查看jQuery。 请记住，我们需要处理2个事件：从“ make”下拉列表中选择一个值将填充“ model”下拉列表。 从模型下拉列表中选择一个值将填充模型年份表。 这是设置事件处理程序的jQuery ready函数：
“ select [name ^ = make]”表达式看起来很像CSS选择器，这是因为jQuery选择器是CSS选择器的超集（就像CSS和Regex一起生孩子一样）。 这些表达式非常强大，可用于一次选择单个或多个项目。 在这种情况下，表达式将显示为“选择一个名称属性为'make'的<select>元素，并将loadModels函数绑定到更改事件”。每次用户从下拉列表中选择一个值时，更改事件都会通过以下方式生成：浏览器，然后将调用loadModels函数。
现在，让我们看一下事件处理程序之一：
第2行-getJSON方法将执行AJAX请求，并期望服务器返回JSON。 它需要3个参数：请求URL，任何请求参数以及服务器响应后要调用的回调函数。
第4行-回调函数是一个闭包。 JavaScript中的闭包类似于Java中的匿名内部类，它们用作回调非常有用。 请注意，此函数希望将从服务器返回的JSON作为参数传递。
第6行-至此，我们需要对所使用的JSON的结构有所了解。 在这个简单的示例中，模型数据的结构如下：
第6行的代码显示为“对于每个模型...”
第7和8行-从每个模型构造一个元素
第10行-选择<select>元素，其中name = model，然后用刚刚构建的选项替换选项列表。
使用最少JavaScript，我们能够：
- 注册一个事件处理程序，
- 异步获取JSON数据
- 根据该JSON更新下拉菜单中的选项。
那是功能强大的东西，也是我非常喜欢jQuery的原因之一。 现在如何缓存？ 在getJSON调用之前添加“ if”语句以查看结果是否已存在于缓存中是很平常的情况。 您可以使用一个不错的jQuery小插件jCache。
结论
jQuery + Spring MVC + XStream / Jettison提供了一个非常好的堆栈，可以快速开发Web应用程序，这些应用程序将数据和表示形式完全分离开来，为用户提供更好的体验，并有可能在此过程中提高性能。 还有其他高质量的框架可以帮助您做到这一点吗？ 可以，但是我喜欢jQuery，Spring MVC和XStream / Jettison的组合，并且我觉得它们在各自的细分市场中都是“同类最佳”的。
关于作者
自从他的第一份Java任务（使用Java 1.02打印报告）以来，Joel Confino一直迷上Java技术。 在过去的十年中，他一直致力于分布式系统，各种Web架构以及JEE设计和编程。 Confino已为许多大型金融服务和制药公司提供咨询服务，并帮助他们使用Java来扩展业务并通过复杂的基于Web的系统吸引其客户。 他目前是Chariot Solutions的Java架构师。
关于战车解决方案有限公司
Chariot Solutions是一家IT咨询公司，专门从事使用Java和开放源代码技术的应用程序开发和系统集成。 战车的顾问包括该国的一些顶级软件架构师，他们全都拥有深厚的专业技术，应用行业知识以及对他们所做工作的真挚爱的罕见结合。 战车的咨询团队使该公司成为为各种规模的公司设计，开发，部署，集成，支持和调整关键任务系统的最佳合作伙伴。 请访问网站www.chariotsolutions.com上的Chariot。
xstream-1.4.4
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
