软件项目实训及课程设计指导——应用AJAX技术提高Web应用系统的整体响应性能

1、软件应用系统的性能指标是衡量软件应用系统优劣程度的一个重要指标

Web应用系统由于是基于HTTP协议产生请求、并由Web服务器端程序处理对应的请求、最后再次通过HTTP响应向Web浏览器端输出处理后的结果，该过程一般要经过多个不同的环节和由不同的程序加工处理——参看如下示例图所示。

这将导致对请求处理的最终响应的性能是比较低效的，因此，有必要提高Web应用系统的整体响应性能。在Web应用系统的开发实现中，性能指标是衡量应用系统本身优劣程度的一个主要指标——但提高软件应用系统的整体性能是一个"系统工程"，需要设计和开发实现人员共同努力并从各个不同的层次和方面对软件应用系统进行性能优化。

作者将在本文及后续几篇文章中为读者详细介绍提高Web应用系统响应性能的主要方法，如利用AJAX技术减少客户端和服务器端交互的数据量、应用Web页面静态化技术以及应用FreeMarker静态模板框架技术实现对不同类型的Web应用系统中的页面静态化等。

这些技术都是提高Web应用系统响应性能的行之有效的良策。当然，读者不仅要了解和掌握如何提高软件应用系统性能的各种方法，也还应该要掌握如何对Web应用系统的性能进行测试和监控，以客观地评估所采用的性能优化方法的最终效果。

因此，在本系列文章中作者还要介绍开源的JMeter性能测试工具、和如何利用JProfiler工具监控软件应用系统的性能等方面的内容。

2、应用AJAX技术能够减少客户端和服务器端交互的数据量

（1）AJAX代表异步JavaScript和XML技术

AJAX技术的全称为Asynchronus JavaScript And XML——异步JavaScript和XML技术，应用AJAX技术能够让Web应用的操作界面产生出应用程序客户端窗口界面的效果。另外也不需要刷新整个Web页面就可以实现提交——因为AJAX技术能够提供客户端浏览器程序与Web服务器端程序进行异步通信的能力，从而使Web用户从请求/响应中解脱出来并提高了Web应用系统的响应效率。

（2）应用AJAX技术能够减轻Web服务器的负担

由于AJAX技术在返回响应输出的数据时的基本原则是"按需获得目标数据"，从而最大程度地减少了请求响应输出的数据量，当然也就减少了对Web服务器所造成的性能消耗——因为在Web应用系统的各个页面中基本上都存在有相同的HTML标签内容，比如页面结构、格式、页面顶部的Logo图像、页面底部的版权和联系方式信息等，而不同的只是页面中所需要更新显示的一小部分变化的数据内容。在传统的Web应用系统请求响应的应用中，每次Web服务器都要生成一个独立而又完整的Web页面文件内容，再返回给客户端的Web浏览器程序。

目前在Google Maps站点、Google Suggest站点和Gmail邮件系统中都大量地应用了AJAX技术来改进用户的界面操作效果。在示例项目银行账户信息管理系统中也大量地应用了AJAX技术改进软件应用系统的用户界面操作体验——比如，在用户注册功能页面中应用AJAX技术实现实时检测用户输入的用户名称是否存在重名现象，请见如下示图所示的注册页面的局部截图——当用户输入"admin"用户名称时，软件应用系统后台程序及时查询和报告出该"admin"用户名称已经被其它用户占用的提示信息。

3、应用AJAX技术的Web应用系统所具有的技术特性

（1）实现Web界面向桌面应用程序界面转化

Ajax技术可以使Web应用系统尽管是运行在Web浏览器的环境中，但操作使用却具有类似于桌面应用程序的界面交互效果，从而给基于Web浏览器环境中的应用系统在加载动态化和操作客户端化两方面带来了革命性的突破。

（2）不需要刷新整个页面就可以实现提交

因为Ajax能够提供让客户端程序与服务器端程序进行异步通信的能力，从而使用户从请求/响应中解脱出来并提高了响应的效率。

如下示图为某个在线编辑软件实现类似于微软Word办公应用程序排版操作效果，使用者并没有感觉到是在Web浏览器中操作Web应用，而更多的是采用桌面应用程序的界面交互效果，每次编辑文档和文档数据保存都没有出现屏幕闪烁的现象，而且响应速度快和性能高。

（3）减轻服务器的负担（只返回必须的有效数据），最终提高了系统的响应速度

（4）AJAX是标准化的并被广泛支持的技术 不需要再下载插件或者其它的小程序等安装到客户端，而其它的RIA（Rich Internet Applications，富因特网应用程序）技术实现如Web Start和MS ClickOnce、Flash FLEX 等都需要安装客户端的插件。

4、为什么应用AJAX技术后能够提高Web应用系统的响应速度

（1）基于AJAX技术的请求响应的原则是"按需取数据"

用户在Web页面中产生数据改变的请求提交操作后，Web应用系统程序都只返回客户端所需要的数据而不是整个Web页面。因此，可以最大程度地减少HTTP请求响应过程中的数据量，也就相应地降低了对Web服务器端系统所造成的负担。

（2）在大多数Web网站的页面中至少90%都是重复一样的

比如结构、格式、页头、页尾、广告等，所不同的只是一小部分的内容；但每次Web服务器都会生成完整的页面数据再返送给Web客户端浏览器，这无形之中是一种浪费。

如下示图为Web页面结构设计中通用布局设计效果的示例图，相关的一组Web页面之间的差别在于其中的"Center"中间模块，而其它部分都是相对固定不变化的——如Logo、Left导航条、Footer页脚区中的版权和联系方式等。

5、为什么要提出AJAX技术和为什么要应用AJAX技术

（1）B/S体系架构改进了C/S体系架构在技术应用方面的不足

基于C/S（Client/Serve，客户机/服务器模式）体系架构的胖客户端的软件应用系统所存在的主要问题：

1）部署问题

2）升级困难

3）维护困难

4）安全问题等等。

为了解决上述这些问题，在软件体系架构设计中相应地产生了B/S（Browser/Server，浏览器/服务器模式）体系架构技术及基于B/S体系架构的廋客户端的软件应用系统。

（2）随着应用的深入和技术不断地更新，B/S体系架构同样也面临如下的一些问题

1）表现能力方面比较贫乏，比如Web UI的技术实现也只有Web表单中的一些简单的交互控件，如单选框、按钮、下拉列表框等；

2）响应速度等性能方面，不断地处于请求/响应的循环中；

3）HTTP协议是一个无状态的协议，需要进行状态跟踪以识别多次请求是同一用户产生的还是多个不同用户产生的；

4）服务器负载加重，由于采用了集中式的后台业务处理，Web浏览器客户端只发送请求和显示请求处理的结果。而大量的业务逻辑、数据访问、数据保存和更新等功能都在Web服务器端完成。

（3）常规的B/S方式中的同步请求处理的方式将导致客户机会处于漫长的等待中——如下的"一片空白"，读者应该会有深刻体会！

（4）AJAX技术实现中所体现出的三大技术特征

1）异步交互，无需刷新整个页面内容；

2）JavaScript脚本处理交互，JavaScript脚本程序绑定和处理所有的数据；

3）XML封装数据，利用DOM进行数据交换，不仅每个支持 Ajax 的浏览器都支持XML，许多Web服务器端技术也都支持XML。

因此，在Web应用系统开发实现中为了能够提高系统的响应性能，有必要应用AJAX技术。如下示例中的数据边输入边查询，是通过应用异步交互而无需刷新整个页面内容所产生的应用效果。

6、Ajax 中的第一个"A"代表"异步（Asynchronous）"

（1）什么是异步通信

异步通信技术其实在Java技术中早就提供有技术支持，比如Java语言对多线程并发应用技术的支持等。

Ajax 中的第一个"A"所代表的"异步（Asynchronous）"，其更准确的理解应该是Web状态下的异步请求和响应。而所谓的Web异步请求也就是不需要等待Web服务器响应完毕，发送请求后Web应用系统程序可以完成其它的任务（比如用户仍然可在Web表单中进行操作等）。

（2）常规的Web应用实现的过程是同步交互过程

传统的Web应用实现的过程是同步交互过程，也就是一直处于请求与响应的循环过程中（参看如下示例图所示）。下一个HTTP请求必须要在前一个HTTP请求已经被处理完毕后，才能送发出去；而且Web页面在实际更新时，用户会看到Web页面闪烁或抖动。

7、AJAX技术中的异步实现是借助于XMLHttpRequest对象

（1）Ajax中的最核心的技术就是XMLHttpRequest（常规的请求是HttpRequest）

XmlHttpRequest对象其实是在IE5（Internet Explorer 5）版本中首次被引入，它是一种支持异步请求的技术。简而言之，Web开发人员通过应用XmlHttpRequest对象可以使用JavaScript脚本程序向Web服务器发送请求并处理从Web服务器返回的响应结果，而不阻塞用户的继续请求和访问。

如下示例图说明了XMLHttpRequest对象的主要作用和在整个请求和响应的过程中的工作原理。

（2）XMLHttpRequest对象能够异步地在后台运行并且可以与Web服务器进行交互

XMLHttpRequest对象能够异步地（多线程）向后台发送请求，并且异步地获得Web服务器返回的数据（交互），这样将使得JavaScript可以在不刷新页面的情况下获得Web服务器端所返送回的数据，或者向Web服务器端提交请求数据。

因此，当Web服务器收到一个来自于Web浏览器的请求时，它就进行相应的处理，然后把处理后的XML格式的结果数据返送回Web浏览器端。JavaScript引擎系统程序将接收这个处理后的XML格式的结果数据，并且使用支持DOM（Document Object Model，文档对象模型）接口的解析器程序来操作相应的Web页面元素。而在整个过程中，不必重载整个Web页面。

如下示例图为天气预报系统根据用户点击的位置实时从服务器后台获得当前的温度值，但页面并没有切换。

8、体验和了解应用AJAX技术的软件应用系统人机交互效果

（1）百度地图站点

用户可以点击地图、放大、缩小地图，并且可以根据用户浏览的需要来回拖动地图。其实用户在百度地图中移动鼠标的过程中，客户端程序（百度地图）异步地向服务器端发送用户鼠标的位置（该坐标位置经过数据转换最终代表地理位置）请求并更新当前的Web页面的显示内容，用户就能够实时地看到对应的地区地理信息。但Web页面很平滑地移动、并且没有任何的闪烁现象

地图页面似乎跟同类的其它的网站页面没有太大的区别。不过，一旦用户输入了某个地址，地图系统马上带着用户进入一个城市，穿越一条又一条街道，而在此过程中用户会发觉事情非常美妙。

用户不会见到沙漏图标，而且页面会无缝地一下子转换到新的一页，用户的电脑在等待下载更多数据时，屏幕不会出现任何的间断。

而用户的浏览器继续使用来自于Web服务器的数据，同时用户的浏览器却不需要刷新。地图系统没有使用Java Applet程序技术，当然也没有采用类似于Flash的技术。地图系统的行为更象是一个桌面应用程序而不是一个Web应用程序。

（2）Google Suggest站点

当用户在输入框输入相关的查询关键字时，Google Suggest系统获取用户的输入并实时地发送到后台Web服务器查询出对应匹配的结果——这在技术实现上称为"自动补全"，请读者注意"自动补全"其实是AJAX技术的一个典型的应用。

其实，在Web系统的后台，针对用户的每一次键击，向Web服务器发送了若干次调用。用户基本上没有被它所干扰，因为它们的交互并没有中断，只有Web页面的一部分得到刷新。所有这些都可以被有效地实现，因为只有一小部分Web页面数据被传送回页面中，而不是整个Web页面。

（3）Web方式的进度条

对于"进度条"相信读者并不会感觉到陌生，读者在应用各种Windows或者手机App等应用程序时，相关的系统程序通过"进度条"来反映当前的操作进度，这在应用程序环境中很容易实现，但在没有应用AJAX技术的传统Web应用系统中是很难实现的。

（4）深层次、内容动态的树形导航菜单的设计实现

对于软件应用系统中的树形菜单，读者也并不陌生，在Windows应用系统中有很多程序都提供有树形结构的数据表示。但在传统的Web应用系统程序中实现树形结构显示，其实现技术就已经比较复杂，而且树节点中的数据都是动态获得和随时改变，则更不容易。

（5）对数据进行过滤和操纵相关数据和实时刷新数据的应用场景

在很多Web应用系统中会实时地显示当前在线人数或者某种业务的实时数据（如股票、温度、PM2.5数据等），这些都是通过应用AJAX技术实现的应用效果。

（6）快速的用户与用户间的交流响应——IM（Instant Messaging，即时通讯）系统

读者对IM系统更不陌生，许多读者可能每天都在应用IM系统软件（如腾讯的QQ和微信等）。但读者应该知道，大家手机或者电脑中的QQ和微信都是独立的应用程序版本，没有或者很少有Web版本的IM系统（腾讯早期发布过Web版的QQ，但几年后又废除了）。

尽管商业化的Web版本的独立的IM系统产品很少，但在很多其它Web应用系统中都提供有在线通信和发送、接收信息的功能（比如各种自媒体平台、Web版的电子邮件）。

（7）自动补全

自动补全其实是AJAX最擅长的一种应用方式，在许多搜索引擎系统中都应用了自动补全的技术。也就是在用户输入相关的信息过程中，系统的页面程序不断地获得用户当前的输入字符串，并实时地发送到后台服务器系统进行查询，并根据查询的结果无刷新地在用户输入框下面显示输出匹配的其它信息，如下示例图所示。

（8）实时刷新数据（如地图、地理信息系统、导航系统）

相信读者都应用过不同厂家的Web模式的地图系统，如百度地图、高德地图等产品，或者提供更复杂功能的地理信息系统（Geographic Information System，GIS）。用户通过移动鼠标从而触发当前查看的经纬度，页面系统程序不断地向后台服务器发送请求，服务器同样采用无刷新方式返回新的地理信息数据，页面系统程序局部更新地图状况。

如何实现Velocity 与Struts2框架相互集成的应用

如何实现Velocity模板引擎与Struts 框架相互集成

如何在J2EE平台开发基于Velocity模板的Web应用

如何在Web应用系统表示层开发中应用Velocity模板技术

应用XML+XSLT技术分离Web应用表示层数据和样式的实例