Web 2.0 —— 快速浏览jQuery、Spring MVC和XStream/Jettison

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

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

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

    在用户输入名称并点击提交后，在页面刷新时整个屏幕会变白，然后就会显示出结果来。这不是一个好的用户体验。现在，让我们用jQuery来改善一下用户的体验，只刷新页面中那部分的确需要改变的部分。对这个既有页面所做的修改是：

    1、把搜索表单和搜索结果分成两个单独的JSP页面，这样结果也可以独立的显示，而不需要重新渲染搜索的表单。

    2、在搜索表单JSP上添加一个占位符，来存放搜索的结果。

    3、添加一行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就可以添加新的行为。