AJAX网站

AJAX网站（共4篇）

AJAX网站 篇1

一、引言

在目前的绝大多数网站中浏览器与服务器之间的通信都是同步的。客户端的作用只是单纯地显示网页即显示服务器端处理的结果而已。数据的存储和处理皆由服务器端完成, 客户端只是调用其结果。所以在WEB应用中只要刷新页面就必须完全刷新。更新数据即使是极小的一部分也必须将所有的数据全部提交给服务器进行更新。这样一来Web站点强制用户进入提交、等待和重新显示范例, 用户的动作总是与服务器的“思考时间”同步。这样不但服务器端的负担很重而且客户端的许多资源就闲置浪费了。在一般的Web应用程序中, 用户填写表单字段并单击Submit按钮。然后整个表单发送到服务器, 服务器将它转发给处理表单的脚本 (通常是PHP或Java, 也可能是CGI进程或者类似的东西) , 脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的HTML, 也可能是确认页面, 或者是具有根据原来表单中输入数据选择的某些选项的页面。当然, 在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白, 等到服务器返回数据后再重新绘制。这就是交互性差的原因, 用户得不到立即反馈, 因此感觉不同于桌面应用程序。

二、Ajax的优势

Ajax提供与服务器异步通信的能力, 从而使用户从请求/响应的循环中解脱出来。Ajax基本上就是把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时, 数据发送给一些JavaScript代码而不是直接发送给服务器。相反, JavaScript代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说, JavaScript代码在幕后发送请求, 用户甚至不知道请求的发出。更好的是, 请求是异步发送的, 就是说JavaScript代码 (和用户) 不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。然后, 服务器将数据返回JavaScript代码 (仍然在Web表单中) , 后者决定如何处理这些数据。它可以迅速更新表单数据, 让人感觉应用程序是立即完成的, 表单没有提交或刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算, 再发送另一个请求, 完全不需要用户干预!这就是XMLHttpRequest的强大之处。

三、Ajax技术架构

Ajax的特性主要有2点:a、按需取数据。页面不读取无用的冗余数据, 而是在用户操作过程中的某项交互需要某部分数据时才会向服务器发送请求。b、无刷新更新页面。

Ajax带来的效果:a、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”, 所以最大可能在减少了冗余请求和响影对服务器造成的负担。b、减少用户实际和心理等待时间。

四、Ajax技术在个人网站中具体实现

Ajax的基本工作流程

1. 建立一个变量xmlHttp来引用即将创建的XMLHttpRequest对象。

2. 尝试在Microsoft浏览器中创建该对象:尝试使用Msxml2XMLHTTP对象创建它。如果失败, 再尝试Microsoft.XMLHTTP对象。

3. 如果仍然没有建立xmlHttp, 则以非Microsoft的方式创建该对象。

最后, xmlHttp应该引用一个有效的XMLHttpRequest对象, 无论运行什么样的浏览器。得到XMLHttpRequest的句柄后, 其他的JavaScript代码就非常简单了。事实上, 我们将使用JavaScrip代码完成非常基本的任务:

*获取表单数据:JavaScript代码很容易从HTML表单中抽取数据并发送到服务器。

*修改表单上的数据:更新表单也很简单, 从设置字段值到迅速替换图像。

*解析HTML和XML:使用JavaScript代码操纵DOM;处理HTML表单服务器返回的XML数据的结构。

与服务器上的Web应用程序打交道的是JavaScript技术, 而不是直接提交给那个应用程序的HTML表单。

到底如何使用XMLHttpRequest。因为这段代码非常重要, 您编写的每个Ajax应用程序都要以某种形式使用它, 先看看Ajax的基本请求/响应模型是什么样吧。

·发出请求

有了一个崭新的XMLHttpRequest对象, 首先需要一个Web页面能够调用的JavaScript方法 (比如当用户输入文本或者从菜单中选择一项时) 。接下来就是在所有Ajax应用程序中基本都雷同的流程:

1.从Web表单中获取需要的数据。

2.建立要连接的URL。

3.打开到服务器的连接。

4. 设置服务器在完成后要运行的函数。

5. 发送请求。

开始的代码使用基本JavaScript代码获取几个表单字段的值。然后设置一个PHP脚本作为链接的目标。要注意脚本URL的指定方式, city和state (来自表单) 使用简单的GET参数附加在URL之后。

然后打开一个连接, 这是第一次看到使用XMLHttpRequest。其中指定了连接方法 (GET) 和要连接的URL。最后一个参数如果设为true, 那么将请求一个异步连接 (这就是Ajax的由来) 。如果使用false, 那么代码发出请求后将等待服务器返回的响应。如果设为true, 当服务器在后台处理请求的时候用户仍然可以使用表单 (甚至调用其他JavaScript方法) 。

xmlHttp (这是XMLHttpRequest对象实例) 的onreadystatechange属性可以告诉服务器在运行完成后 (可能要用五分钟或者五个小时) 做什么。因为代码没有等待服务器, 必须让服务器知道怎么做以便您能作出响应。在这个示例中, 如果服务器处理完了请求, 一个特殊的名为updatePage () 的方法将被触发。

最后, 使用值null调用send () 。因为已经在请求URL中添加了要发送给服务器的数据, 所以请求中不需要发送任何数据。这样就发出了请求, 服务器按照您的要求工作。

Ajax适用于用户登录的验证和页面的更新。针对Ajax技术的特点和我是初学者的情况, 我在留言本和相册上面使用了Ajax技术。

在留言本和相册上, 首先做的就是判断浏览器的版本, 以定义给XmlHttp不同的xmlHttpRequest对象.如果服务器的响应没有XML mime-type header, 某些Mozilla浏览器无法正常工作, 所以需要XmlHttp.overrideMimeType ('text/xml') ;来修改该header。先建立一个变量xmlHttp来引用即将创建的XMLHttpRequest对象。尝试在Microsoft浏览器中创建该对象:尝试使用Msxml2.XMLHTTP对象创建它。如果失败, 再尝试Microsoft.XMLHTTP对象。如果仍然没有建立xmlHttp, 则以非Microsoft的方式创建该对象。最后, xmlHttp应该引用一个有效的XMLHttpRequest对象, 无论运行什么样的浏览器。

五、总结

如果没有使用AJAX技术那么当用户触发一个事件比如签写留言或者查看、管理留言等的时候, 那怕是一小部分的数据, 整个页面都会重新加载在浏览器与服务器交互的时候, 用户只能等待。速度缓慢浪费资源和时间。可是使用了Ajax后需要什么数据就提交什么给服务器, 而不是将首页的数据都重新提交给服务器, 只刷新一小部分, 节约了时间跟资源, 用户甚至感觉不到刷新的时间。

摘要：在近几年, 出现了一种基于WEB2.0的Ajax新技术, Ajax提供与服务器异步通信的能力, 从而使用户从请求/响应的循环中解脱出来。采用该技术可以实现网络中异步获取数据, 实现网页的局部刷新, 增强了客户端的数据处理能力, 能较大的改善客户端使用网络的连续性和流畅性, 增强用户体验。在对该技术深入研究的基础上, 在一个小型个人网站上采用该技术进行了相关试验, 解决了相关问题。

参考文献

[1] (英) 克拉恩, 帕斯卡雷洛, 杰姆著;ajaxcn.org译《Ajax实战》人民邮电出版社2006年4月版

[2] (美) 弗莱著;张铭泽等译《JavaScript权威指南》机械工业出版社2003年1月版

AJAX网站 篇2

AJAX是Asynchronous Java Script and XML的简称,它不是一项新的技术,而是多种技术的综合,或者是设计方式,包括Java Script、XHTML和CSS、DOM、XML和XSTL、XMLHttp Request等技术。

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

2. Web服务器层

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

3. 数据库服务器层

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

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

(1)发送一个XMLHttp Request

首先,需要用Java Script来创建XMLHttp Request类向服务器发送一个HTTP请求,XMLHttp Request类首先由IE以Active X对象引入,被称为XMLHTTP。

(2)Servlet请求处理

通过Servlet来处理XMLHttp Request与处理一个来自浏览器的普通HTTP请求相似。可调用Http Servlet Request.get Parameter()来获取由POST请求体传送过来的formencoded数据。AJAX请求也与普通的WEB请求样都成为此应用同一Http Session会话进程的一部分。

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

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

四、结论

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

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

关键词：AJAX,XMLHttpRequest,JavaScript,XML,电子商务

参考文献

[1]曾斌:web程序设计与应用[M].北京:清华大学出版社,2004

[2]柯自聪:Ajax开发精要——概念、案例与框架[M].北京:电子工业出版社,2006

AJAX网站 篇3

1 Ajax技术概述

1.1 Ajax技术简介

Ajax不是一门特定的新技术,是多种技术的集合,核心技术有HTML/XHTML、JavaScript、DOM、XML HttpRequest对象。XML-HttpRequest对象用于客户端与服务端进行通讯,它从服务器取回数据,而非文档内容,然后将取回的数据插入到当前页面中,实现部分刷新。

1.2 Ajax技术的工作原理

在传统的WEB应用中,用户需要浏览WEB资源时,向服务器发送一个请求,然后等待服务器端响应请求,在等待期间,大部分时间页面处于完全的空白状态,用户什么也不能做。等服务器端响应请求,返回数据后,才能显示页面。使用Ajax,就是在原来的客户端与服务器端的通信之间加了一个中间层(称之为Ajax引擎),利用Ajax引擎来处理客户端与服务端之间的通信,Ajax引擎实质上只是一个Javascript对象或函数,只有当信息必须从服务器上获得的时候才调用它。这些请求是异步完成的,它不必等到收到响应之后就可以继续执行后续的代码。这就意味着用户无须等待请求的响应,可以继续浏览或交互。当Ajax引擎收到服务器的响应后,对数据进行解析,基于其所提供的数据对用户界面做一些局部修改,这样动态获取的数据可以动态嵌入到页面之中,避免了数据重复加载带来的速度和效率问题。通过使用Ajax,给用户带来了连续的WEB体验;并且无刷新更新页面,使服务端与客户端的数据交换大大减小,减少了服务器的压力,节约了带宽。

2 基于Ajax的拖放购物车的设计与实现

拖放购物车目前在电子商务中的应用还不太广泛,它的功能类似于windows中对文件或文件夹的拖放操作,是将桌面图形应用转移到电子商务中。通过使用Ajax技术,使拖放功能实现起来更容易,也更能突现Ajax技术的优点。

2.1 基于ajax技术的拖放购物车设计

2.1.1 总体目标

当用户看到web页面上自己喜欢商品时,可以将它们拖动到购物车以便购买,当用户不能购买某个特殊商品(或是因为钱不够、商品已售完)时,购物车可以禁止停放这些商品,并将它返回至初始位置。在拖放过程中,要及时更新状态栏信息。本应用重点放在Ajax的XMLHttpRequest对象来发送异步请求操作上面,并付诸于实践,使购物车的操作更加快捷、方便、人性化。

2.1.2 实现流程

根据总体目标,将商品定义为可拖动区域,购物车定义为可停放区域。一个拖放操作的执行过程过下:

1)通过拖动触发客户端事件

2)创建XMLHttprequest对象

3)创建回调函数并发送请求

4)服务器接收请求、返回结果

5)客户端接收数据,对页面内容进行局部修改

2.2 其于ajax的拖放购物车实现

2.2.1 初始化XMLHttprequest对象并发送请求

使用Ajax,发送请求是通过XMLHttprequest对象来实现。使用之前,要先实例化,并跨浏览器运行。指定回调函数,然后通过Open方法建立对服务器的调用,send方法向服务器发送请求。代码如下:

2.2.2 创建回调函数

回调函数的功能是处理服务器返回的数据。当进行拖动或松开鼠标后,就要将是否购买该物品的信息更新在页面上,如下

2.2.3 创建拖动时触发的函数

当对商品进行拖动操作时,就要触发handleHover函数。在该函数中,要解决两个问题:1)鼠标每次移动都会产生Hover事件,所以我们必须过滤掉所有的Hover事件,除了保留首个事件之外,如果拖动的是同一对象,不会进行后续的操作。2)该函数必须取得和商品相关的信息进行显示,检测商品是否无法放入购物车内。代码如下:

2.2.4 创建放下(鼠标松开)时的触发函数

通过ajax异步显示可停放区域状态,如下:

2.2.5 Ajax框架应用

由于javascipt开源框架都实现了拖放,为了提高代码的编写效率,充分利用网络资源,本文采用目前已被大家认可的框架Scriptaculous。它提供了耀眼的视觉效果和拖放API。该库采用简单的HTML

摘要：Ajax技术作为一种新的应用程序模型,将WEB交互的同步通讯变为异步通讯,实现了无刷新更新页面。该文使用Ajax技术,利用现有的框架,设计实现了拖放购物车,并阐述了Ajax技术的工作方式及优点。

关键词：Ajax模式,拖放购物车,设计与实现

参考文献

[1]田原.基于AJAX的教学Web应用[J].辽宁工程技术大学学报:自然科学版,2007(5):737-739.

[2]袁展.基于Ajax技术的网上家园系统的设计和开发[J].微计算机信息,2007(24):113-115.

[3]Asleson R.Ajax基础教程[M].金灵,译.北京:人民邮电出版社,2006:20-36.

[4]Crane D.Ajax实践实例详解[M].贺师俊,译.北京:人民邮电出版社,2008:241-253.

AJAX网站 篇4

在传统的B/S交互模式中(如用户提交表单),是由用户触发一个HTTP请求到服务器,服务器对其进行接受并进行处理后再返回一个新的HTHL页面到客户端。每当服务器处理客户端提交的请求时,客户只能空闲等待,并且即使只是一次很小的交互,只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。

这种做法实际上是一种浪费,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这就导致了用户界面的响应比本地应用慢得多,产生了一定程度的滞后效应。这种传统的网页访问方式存在着两个缺点:(1)网络带宽限制。访问者每次打开、刷新或与网页的交互都需要重新下载整个网页;(2)服务器负载大。访问者刷新和交互都要从服务器端重新下载页面,服务器需要响应访问者的每次请求,所以,服务器负担大。

与此不同的是,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的Webservice接口,并在客户端采用JavaS-cript处理来自服务器的响应。借助于AJAX,可以在用户单击按钮时,使用JavaScript和DHTML立即更新用户界面,并向服务器提出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新用户界面,而不是刷新整个页面。同时,很多的处理工作可以在发出请求的客户端机器上完成,大大减轻Web服务器的负担和处理时间。

1 AJAX简述

1.1 AJAX概述

AJAX的全称为“Asynchronous Java Scriptand XML”(异步Java Script和XML),是指一种创建交互式网页应用的网页开发技术,是使用客户端脚本与Web服务器交换数据的应用Web开发方法。AJAX本身并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起在共同协作中发挥各自的作用,具体表现在:

(1)使用XHTML和CSS标准化呈现。CSS是层叠样式表(Cascading Style Sheets)的简称。它是一种为Web页面元素提供可重用样式定义的语言,负责定义Web页面中元素的视觉样式。在AJAX模式中,可通过CSS方便地设置在页面的各种元素上。

(2)使用DOM实现动态显示和交互。DOM(Document Object Model)为操作HTML或XML文档对象的节点结构提供了一组方法。通过调用DOM方法,可以创建、定义HTML元素,并把元素附加到文档或者现有的元素中,从而实现HTML的即时生成。

(3)使用XML和XSLT进行数据交换与处理。XML是可扩展标记语言(Extensible Markup Language)的简称。它可以规范地定义结构化数据,使网上传输的数据和文档符合统一的标准。XML表述的数据和文档很容易地让所有程序共享。

(4)使用XMLHTTP Request进行异步数据读取。XMLHttp Request是XMLHttp组件的对象,是AJAX技术的最核心技术,能够向服务器发出HTTP请求。

(5)最后用JavaScript绑定和处理所有数据。JavaScript一直被定位为客户端的脚本语言,用来实现表单数据的校验和网页特效的处理。在AJAX技术中,一方面,通过JavaScript程序操作XMLHTTP Request对象来访问服务器;另一方面,当访问结果通过服务器端以XML形式返回时,可以通过XML Http Request对象的ResponseXML属性来获取数据。

与传统的B/S交互模式相比较,图1表示了传统WEB的交互与基于AJAX的交互方式的组成。使用AJAX技术主要的优势在于:

(1)减轻服务器的负担。因为AJAX的根本理念是“按需取数据”,把一部分服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,最大可能在减少了冗余请求和响影对服务器造成的负担。

(2)无刷新更新页面,减少用户实际和心理等待时间,使用户得到更好的体验。

(3)基于标准化的并被广泛支持和技术,并且不需要插件或下载小程序。

(4)AJAX使WEB中的界面与应用分离(也可以说是数据与呈现分离)。

1.2 AJAX的工作原理

AJAX的工作原理图如图2所示。AJAX的工作原理相当于在客户端和服务器之间加入了—个中间层,来处理客户端的请求,使用户操作与服务器响应异步化。就是把JavaScript技术和XMLHTTPRequest对象放在Web页面和服务器之间。当逻辑触发时,数据发送给一些JavaScript代码而不是直接发送给服务器,JavaScript代码捕获数据后向服务器发送请求,请求是异步发送的,就是说JavaScript代码(和用户)不用等待服务器的响应。因此用户可以继续输人数据、滚动屏幕和使用应用程序。然后,服务器将响应数据返回JavaScript代码,后者决定如何处理这些数据。它可以操作DOM处理数据,并且将页面更新,它也可以对收到的数据执行某种计算,再发送另一个请求,完全不需要用户干预。它可以根据需要自行与服务器进行交互。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验。

2 AJAX在网站互动平台中的应用

AJAX的特性决定了该技术适用于“交互较多,频繁读取数据,数据分类良好的Web应用”,在这一点上正好与网站互动平台的应用与服务相得益彰。AJAX在网站互动中的应用主要体现在以下几点。

2.1 无刷新自动更新实时数据

传统Web系统中,浏览的网页中加入最新的数据,只有重新刷新了页面,网页才能获取新的数据。但是这对于某些对实时性要求比较严格的实时互动网站来说这种做法是不能满足系统需求的,因为系统随时会根据一些实时数据给出相应的提示信息,并作出相应的处理。引入AJAX的局部刷新功能,这里强调的是局部刷新,如果是整个页面的数据几乎都会改变的话,我们可以让程序自动刷新定时向服务器请求数据5秒取一次数据,10秒取一次数据利用XMLHTTP发出请求并取得数据传到客户端,客户端重新组织并显示数据。比如在Gmail应用场景中,新的邮件信息被自动接收和显示。

2.2 个性化设计

网站互动的个性化设计可分为客户界面个性化和客户喜好商品推荐。界面个性化是客户根据自己的需求,对网站的界面进行定制,主要包括不同角色类别模块的布局、主要模块的显示、隐藏与关闭、界面色彩的设计以及客户显示的方式等,并且可以实行界面模块的可拖放操作。

拖放是标准GUI的应用。用户可以选择一个特定的对象,它可以是一个文件、一些文本等,然后将它移动到用户喜好的另一个特定的位置。通过AJAX技术,用户可以享受到与桌面系统更接近的用户体验,同时,用户无需采取额外步骤将数据提交到服务器,就能完成更新和服务器端响应。在Google Maps应用场景中,用户就可以通过鼠标拖拽的方式在地图中的街区之间穿梭漫游。

2.3 自动完成功能

在互动网站的建设中我们还可以在很多地方巧妙地使用AJAX技术,比如用户登录界面中我们就可以使用AJAX实现用户检验功能,检验用户的合法性;系统中动态加入树型结构;根据系统需要动态加载多级菜单等。相信随着技术研究的深入,网站互动将会更完美,页面更加的友好,给用户带来更好的体验。

3 AJAX技术的发展方向

Google搜索API,Flickr照片API,Yahoo!地图,Yahoo!交通,跨服务器代理,不知不觉中,AJAX应用已经遍布网络的每个角落。纵观所有应用,“更好的用户体验”是其的共同目标,在浏览器中实现桌面用户界面验证是Web开发的一种趋势。AJAX开发方式渐渐成为Web开发的一种主流。AJAX相对RIA领域的同类技术具有先天的优势:基于唯一的标准浏览器脚本语言JavaScript,W 3C标准DHT-ML,XMLHttpRequest等,这一切都是标准,并且是事实标准(各类浏览器都支持)。

AJAX在对Web应用功能的大幅提升将直接导致应用模式的改变,尤其对于大型企业的应用来说,Web模式带来的易用性和可维护性显然具有诱惑力,AJAX支持的客户端功能提升使得替换传统的操作界面成为可能;AJAX具有数据与样式分离及易于结合的特点,松散的耦合性、优良的开放性和标准化非常有利于网络信息共享,从而类似Web Service,在因特网信息共享及个性化交互方向得到充分发挥;AJAX技术所涵盖的内容将可能是各类信息管理、网络客服、在线设计、网上交流、甚至是在线游戏。

4 结束语

AJAX带给我们的不仅仅是技术,更多的是以人为本的一种服务理念。不仅缓和了资源矛盾,也带来了丰富的用户体验。当然,任何东西有利也有弊,AJAX的适用范围是由它的特性所决定的。如果过多的使用JavaScript,那么客户端将非常臃肿,不利于用户的浏览体验,如何在做到快速的前提下,还能够做到好的用户体验,这是当前面临的一个问题。AJAX技术改变了传统B/S应用的设计方法,极大地提高了Web应用完成复杂逻辑的能力,同时增强了浏览器端的智能机制,改善了用户体验。

摘要：基于AJAX技术Web模型是目前较为热门的网站构架,它不但能使网上用户得到更好的体验,而且能够减轻服务器和带宽的负担。将着重介绍AJAX的概念、工作原理、相关技术以及具体应用的介绍,阐明了AJAX在Web应用方面具有独特的优势,必将成为Web应用开发的主流技术。

关键词：AJAX,异步,XML,网站互动平台

参考文献

[1]贺师俊,等译.AJAX实战实例详解[M].北京:人民邮电出版社,2008,11.

[2]游丽贞,郭宇春,李纯喜.AJAX引擎的原理和应用[J].微计算机信息,2006(22):205-207.

[3]徐丽丽,张永胜.AJAX技术及其应用研究[J].计算机时代,2007(3):56-58.

[4]邵丽萍,肖世德.新一代Web开发技术ASP.NET的发展与探析[J].微计算机信息,2005,21(1):190-192.

[5]克拉恩,帕斯卡雷洛,杰姆斯.AJAX实战[M].北京:人民邮电出版社,2006.

[6]严丽平,袁可风,宋凯.基于AJAX技术的Web应用开发研究[J].华东交通大学学报,2007,24(4):97-99.

[7]邹昌伟,面向教学的Web服务器的设计与实现[J].计算机教育,2007(8):67-70.

[8]游丽贞,郭宇春,李纯喜.AJAX引擎的原理和应用[J].微计算机信息,2006(6):205-207.

[9]Ryan A S,Nathaniel TS.AJAX基础教程[M].金灵,译.北京:人民邮电出版社,2006.