Ajax技术在B/S架构系统中的应用研究

2010-10-26田敬军翟立春

唐山师范学院学报 2010年2期

田敬军，翟立春

（1.唐山师范学院计算机科学系，河北唐山 063000，2.唐山市丰南区宣庄中学，河北唐山 063300）

在Web开发过程中通过Ajax的支持，可以通过在B/S（浏览器/服务器）架构上，带给用户类似 C/S（客户机/服务器模式）架构的体验。通过Ajax技术，浏览器与服务器之间采用异步通信机制，从而避免了浏览者等待，给浏览者以连续的感受。

1 Ajax技术起源

随着Internet技术兴起，软件系统经历了C/S结构到B/S结构的变革。在B/S结构下软件应用的业务逻辑完全在应用服务器端实现，用户表现完全在 Web服务顺实现，客户端只需要浏览器就可进行业务处理，因而这种结构也就成了当今应用软件的首选体系结构。

1.1 B/S结构的优点

（1）B/S结构应用的数据安全性更好，因为应用的数据统一保存在服务器端，因此可以进行更有效的管理。

（2）B/S结构应用的数据管理更有效，B/S结构应用无需安装区域数据服务器，所有的数据都安装在服务器端，因此所有用户都可以看到数据的实时结构。

（3）B/S结构应用的应用场景更加广泛，所有的客户端可以接入互联网，即可使用应用程序，避免了网络的限制。

（4）业务扩展方便，通过增加网页即可增加服务功能。

（5）维护方便，只需要改变网页，即可实现同步更新。

1.2 B/S 模式的缺点

（1）传统 B/S结构的状态是不连续的，只能通过Http-Session来跟踪用户状态。

（2）无法实现具有个性化的功能要求。

（3）页面动态刷新，响应速度明显降低。

（4）功能弱化，难以实现传统C/S模式下的特殊功能。

1.3 B/S结构的请求模式

传统B/S结构的请求是一种独占式的请求。如果一个任务需要多步或多选项才能完成，在 HTML里，一个多步骤的任务可以在单页内表达出来。但是由于 HTML的互动性有限，会产生一份很长的页面，使用户感到混乱而难以使用。或者将多个步骤分成几个页面分别提交，对于传统的独占式的请求，如果一个请求没有得到完全响应，后一个请求则不能发送。用户在等待服务器的响应期间，用户的浏览器则一片空白。这种独占式请求可用图1表示。

图1 独占请求示意图

传统的 Web应用大都采用这种独占式的请求，而且每个请求对应一个页面，因此每当服务器响应到达客户端时，浏览器都会重新转载该响应，从而导致频繁的页面刷新。因为传统B/S结构应用的每个页面的使用时间都很短暂（只用于一次改善请求，或一次装载服务器响应），因此不可能将该页面制作成表现功能丰富的页面，因为这样客户端的下载成本太高，因此传统B/S结构应用的表现层页面都很简陋，而Ajax技术的出现则完善了传统的Web应用的不足。

2 Ajax技术原理

Ajax技术使用异步方式发送用户请求：当用户在浏览页面的同时可以发送请求，在第一个请求的服务器响应还没有完全结束时浏览器可以再次发送请求，页面状态不会停止，即使服务器响应还没有到达，浏览者也可以浏览页面。

当服务器响应到达客户端时，浏览器也无需重新加载整个页面，它只更新页面的部分数据，从而提高页面的利用时间（可以使用一个页面改善无数个请求，装载无数次响应），因此可以将表现层页面制作成表现功能非常丰富的页面。

2.1 异步发送请求

Ajax技术的关键在于异步发送请求。要让浏览器动态加载服务器响应，还需要利用传统的 DHTML知识来实现HTML页面的动态更新。如图2所示。

图2 Ajax异步发送请求示意图

使用Ajax技术能避免频繁刷新页面，服务器响应的是数据面不是整个页面内容，Ajax技术负责获取服务器数据，然后将服务器数据动态加载到浏览器中。

2.2 Ajax相关技术

Ajax 应用程序所用到的基本技术包括：

（1）HTML用于建立Web表单并确定应用程序其它部分使用的字段。

（2）JavaScript代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。

（3）DHTML或Dynamic HTML，用于动态更新表单。我们将使用div、span和其他动态HTML元素来标记HTML。

（4）文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

2.2.1 Ajax核心：XMLHttpReqest

XMLHttpRequest是整个Ajax技术的关键，没有它就没有 Ajax。Ajax技术的核心是异步改善请求，而 XMLHttp-Request则是异步发送请求的对象。

目前IE 5以上，Mozilla1.0以上，MetScape7以上都支持XMLHttpRequest。

2.2.2 Ajax脚本：JavaScript语言

JavaScript是Ajax技术中另一个重要部分，它主要完成如下事情：

（1）创建XMLHttpRequest对象。

（2）通过XMLHttpRequest向服务器改善请求。

（3）创建回调函数，监视服务器状态，妆服务器响应完成后，回调函数执行。

（4）回调函数通过DOM动态更新HTML页面。

2.2.3 DOM模型

DOM（Document Object Model）是操作HTML和XML文件的一组API，由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的。通过使用DOM可以用编程的方式操作文档结构，改变文档内容。

2.3 应用实例

比如在一个 Web应用系统中有个用户注册模块，在用户填写完邮箱之后，系统会自动到数据库中检验邮箱地址是否已经存在，并返回给页面提示信息，告知用户邮箱是否可用。这种情况下就可以采用Ajax技术，它可以不刷新页面即可实现对数据库的访问，并返回验证信息。以防止用户所填数据清空，方便用户注册。主要代码如下：

new Ajax.Request(url,

{method:'get',

onSuccess:function(req){

if(req.responseText != '1' ){

$('s2').innerHTML="wrong ";

$('s2').style.color="red";

return false;

}else if(req.responseText == '1'){

$('s6').innerHTML="";

src='${pageContext.request.contextPath}/images/check_right.gi f'/>";}}} );

用户的验证码部分页面所输出的图片由系统随机生成自动生成的，并可以在用户看不清楚的情况下，采用异步加载技术来实现图片的变更。当用户所填写的数据正确并点击提交时，服务器端Struts通过提供的Form表单，以及其对应的配置文件中的验证框架对其进行验证，如果不正确，页面不会跳转到下一页，只有正确时才会把用户所提交的信息存入数据库，并向用户的邮箱发送账户的激活码。

登录页面同样可以采用Ajax的异步处理技术对表单进行验证，在正确登录已后会将用户端的cookie中保存用户的ID，在服务器端的session 中保存用户的user对象。

2.4 Ajax技术的优点和缺点

2.4.1 优点

（1）服务器和浏览器间数据交换大量减少，响应更快。

（2）很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间减少。

（3）在不更新整个页面的前提下维护数据。

2.4.2 缺点

（1）破坏浏览器后退按钮的正常行为，在动态更新页面的情况下，用户无法回到前一个页面状态。

（2）一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

（3）用JavaScript作的Ajax引擎，JavaScript的兼容性和Debug都是让人头痛的事。

（4）对串流媒体的支持不好。

Ajax可以使用XML文件作为数据交换的格式，还可以使用普通文本，而JSON是最理想的数据交换格式。

3 JSON介绍

JSON 即 JavaScript Object Notation，它是一种轻量级的数据交换格式，非常适合于服务器与JavaScript的交互。

许多Web系统中应用Ajax显示的后台数据是以JSON的格式从后台传递到前台的。应用了ActiveX Object对象访问struts2的Action，Action调用业务逻辑层返回的数据经过freemarker模板转换成标准的JSON格式字符串，然后传递给前台，再利用JavaScript动态DOM，显示数据。