AJAX技术在电子商务网站中的应用

[摘 要]AJAX是一种新兴的Web表示层技术,利用它可以构建动态、快速和灵活的Web应用程序.首先介绍了AJAX的工作原理,并阐明了AJAX技术在Web应用的独特优势,最后探讨了创建基于AJAX电子商务网站应用程序的关键技术.

[关 键 词]AJAXXMLHttpRequestJaScriptXML电子商务

一、AJAX技术概述

AJAX是AsynchronousJaScriptandXML的简称,它不是一项新的技术,而是多种技术的综合,或者是设计方式,包括JaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等技术.

传统的Web应用采用同步交互过程,这种情况下,用户首先向Web服务器发送一个请求,然后Web服务器根据用户请求的内容,执行相应的任务,并向用户返回结果,这是一种不连贯的用户体验,在服务器处理请求时,用户就只能等待着,此时浏览器显示的页面是空白的.与传统的Web应用不同,AJAX采用了异步交互的方式.它在用户和服务器之间引入了一个中间媒介,从而改变了同步交互过程中的“处理-等待-处理-等待”模式.AJAX带来的好处主要有以下几方面:

1.减轻服务器负担.

2.不刷新整个页面,在页面内与服务器通信,

3.使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力,

4.基于标准化的并被广泛支持的技术,不需要下载插件或者小程序,

5.进一步促进页面呈现与数据的分离,

6.带来更好的用户体验.

二、AJAX技术在电子商务网站开发中的应用

电子商务网站是大众经常接触的Web应用,AJAX技术在建设电子商务网站中也能发挥很大作用,具体有以下方面应用:

1.用户注册或数据验证

传统的方法是在用户填写完注册数据后,提交的结果是一个新页面,要么显示提交成功,要么出现重名要求重新填写.如果注册项目很多,失败的注册将引起用户较长时间来等待页面刷新.如果采用AJAX技术可以很好地解决这个问题.用户填写好登录名后,一旦输入文本框失去焦点,该事件的处理函数就会通过AJAX调用来检查用户填写的登录名是否存在重复,用户可以继续填写其它的注册项,在这个过程中,网络上传输的只是少量的文本片段,如用户填写的登录名和服务器端返回的消息等,因而响应速度很快.

2.商品展示

电子商务网站需要展示待交易商品的各项信息,一般可以通过文字、图片、视频等来表现.AJAX技术在这方面有很多的应用,比如对于商品的分类显示可以采用基于AJAX的动态树型结构,这种结构在进行显示、展开、添加、修改和删除等操作时,不会引起页面重载,而且只在需要时才去请求数据库,进行数据加载,不仅速度很快,而且大大减少了服务器端的负担.

3.交互过程

现在的电子商务网站提倡个性化,十分注意满足用户的需求,因此也非常关注同用户的交互过程.基于AJAX的购物车相对传统的购物车系统可以更快获得服务器端的响应,比如用户的数超过库存的错误消息不用等到用户提交页面才知道.其次是用户的意见反馈,通常是采用留言簿或讨论区的方式,可以利用AJAX技术设计出反应异常灵敏的客户留言簿或讨论区.

4.智能数据联动

电子商务网站中经常碰到当某一项数据改变的时候,其他项也跟着变动,并且有一对一的应关系.比如在电子商务网站上查询产品的页面中,在产品类型下拉框中选择了某一产品类型,则在产品名称中要显示出所有对应该产品类型的产品名称.在这个过程中使用AJAX,页面被局部刷新,反应迅速,通信量大大降低,速度快得多.

三、基于AJAX的构建电子商务应用程序设计实例

网上书店电子商务系统是一种比较常见的电子商务网站.目前经常使用的基于Struts架构的Web应用系统,为网上书店的应用开发提供了强有力的支持,使得开发过程大大简化,提高了开发效率,但是它也存在很多问题:几乎用户的每一次动作都会触发一次页面请求以及随即而至的页面刷新,当网络拥塞和更新的页面未到达时,用户只能处于等待状态.AJAX的异步请求机制改善了基于传统的请求/响应方式的不足,为客户端执行屏幕更新提供更大的灵活性,因此在网上书店电子商务系统的设计中将AJAX技术引入Struts架构.

网上书店电子商务系统的体系架构由客户端浏览器、Web服务器和数据库服务器三层组成,如图所示.

1.客户端浏览器层

客户端浏览器层由HTML,CSS,JaScript文件组成,负责将模型(业务逻辑)的当前状态展示给用户,并接受用户的输入,确认等信息,当模型状态发生改变时(业务数据的改变),用户界面信息会随之更新.在该层的设计中,改变了传统的基于请求/响应的页面访问方式,在用户界面与Web服务器之间新增了AJAX引擎中间层,用于异步发送客户端用户的请求.

2.Web服务器层

Web服务器负责网上书店电子商务系统的业务逻辑控制与处理,是整个网上书店电子商务系统的核心.首先配置Struts-config.xml文件,创建Action类的子类,在子类中加入需要处理的逻辑代码,通过调用不同的业务模型实现对于不同页面请求的处理.在设计业务模型时,充分考虑到了模型组件的重用性,即模型组件在设计时即不与客户端类型相关,也不与所采用的具体框架相关,所有业务模型由JaBean组件来实现,由Action类来调用,从而完成相关业务逻辑处理.

3.数据库服务器层

数据库服务器层主要保存与网上书店电子商务系统相关的持久数据.在多层结构的应用程序环境中,数据库连接的建立与关闭对系统性能的影响很大,因此在应用程序的数据库设计中采用数据库连接池(ConnectionPool)技术以克服这种不足.

网上书店在查询商品、订单处理等模块时采用了AJAX实现,取得较好的交互效果.系统Web服务器层使用Hibernate作为持久层,负责Ja对象与数据库表之间映射,使用JaBean完成服务器端的数据处理,利用Dom实现Ja对象的序列化以及解析从客户端接收到的XML数据流,在中间层的最上面,使用JaServlet来负责响应来自浏览器的请求并把数据处理的结果返回给浏览器.在系统的客户层,负责与服务器交互的是AJAX引擎,下面的JaScript就负责数据处理和响应浏览器事件.DOM负责读取和更新HTML文档,而HTML、CSS则负责数据的表现.下面以订单处理为例说明AJAX的应用.在系统中,单击订单号,无须提交,页面下方显示该订单的详细情况.具体设计步骤如下:

(1)发送一个XMLHttpRequest

首先,需要用JaScript来创建XMLHttpRequest类向服务器发送一个HTTP请求,XMLHttpRequest类首先由IE以ActiveX对象引入,被称为XMLHTTP.

(2)Servlet请求处理

通过Servlet来处理XMLHttpRequest与处理一个来自浏览器的普通HTTP请求相似.可调用HttpServletRequest.getParameter()来获取由POST请求体传送过来& #30340;formencoded数据.AJAX请求也与普通的WEB请求样都成为此应用同一HttpSession会话进程的一部分.

(3)通过JaScript来处理服务器响应

XMLHttpRequest的readyState属性是一个给出请求生命周期状态的数字值.它从表示“未初始化”的0变化到表示“完成”的4.每次readyState改变时,都会引发readystatechange事件,通过onreadystatechange属性配置回调处理函数将会被调用.

四、结论

通过本文所述,在电子商务网站应用开发中使用AJAX,不仅减少了页面重载次数,而且可以将原来的一些服务器端的工作利用客户端闲置的能力来处理,从而减轻服务器端的负担.当然,任何东西有利也有弊,AJAX的适用范围是由它的特性所决定的.如果过多的使用JaScript,那么客户端将非常臃肿,不利于用户的浏览体验.