基于Ajax技术的Web 2.0开发应用

0  引言

随着互联网的不断发展和信息量的剧增，如何使Web响应更加灵敏，数据传输更加快捷，已成为当今关注的热点。应用系统所采用的技术也由早期的C／S(Client／Server)模式向基于B／S(Browser／Server)的应用模式进行转变。这种转变避免了繁琐的部署工作，同时也体现了瘦客户的开发理念，但同步交互方式带来客户端响应速度慢的问题始终困扰着最终用户。基于Ajax(Asynchronous JavaScript. and XML)的Web 2.0技术改变原有的同步交互为异步交互方式，使页面在后台按需获取数据，这样不仅节省了带宽，更加大大提升了用户体验。

Ajax是新兴网络开发技术的象征，是Web 2.0时代的代表。最关键的是颠覆了传统Web与服务器的交互模式，这种思维模式的转变为Web发展提供了更广阔的前景。Ajax是一个前台工具，在后台可以使用各种服务器语言，比如：.NET，PHP，Java等。Ajax是集合了多种技术，提高互联网性能的一种关键技术。Ajax理念的出现，揭开了无刷新更新页面时代的序幕，并有代替传统Web开发中采用form(表单)递交方式更新Web页面的趋势，其可以算是一个里程碑。

1 Ajax的工作原理

在传统的浏览器与服务器的交互方式中“采用同步方式”由用户触发一个HTTP请求到服务器，服务器对其进行处理后再返回一个新的Web页到浏览器。每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。当服务器正在处理的时候，用户只是在等待，这样，不会产生很好的用户体验；而在前后两个页面中的大部分HTML代码往往是相同的，也浪费了许多带宽资源。

现在使用的Ajax技术是将几种成熟技术按一定的方式结合在一起，通过协作发挥各自作用，包括：使用XHTML和CSS标准化呈现；使用DOM实现动态显示和交互；使用XML和XSLT进行数据交换与处理；使用XMLHttpRequest进行异步数据读取；用JavaS-cript绑定和处理所有数据。

Ajax需要一个稳定、响应及时的服务器向引擎发送内容，作为必要的服务端处理逻辑，确保向Ajax引擎发送的数据格式是正确的。

Ajax的工作原理相当于在用户和服务器之间加了一个中间层Ajax引擎，从而实现用户操作与服务器响应的异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。但并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。传统的Web应用程序模型和基于Ajax的Web应用模型分别如图1，图2所示。

rc="/21ic_image/embed/file/201202/4f1962dbe86a47b211e616f58edef37d.jpg" alt="" />

由于Ajax技术的结构特点，可以为ISP、开发人员、终端用户带来可见的便捷：

(1)按需获取数据。这是Ajax的根本理念，Ajax的原则是“按需取数据”，这样可以最大程度地减轻冗余请求，减轻服务器的负担。

(2)无刷新更新页面，减少用户心理和实际的等待时间。这是Ajax最大的特点，用户无需刷新页面便可向服务器传输和读写数据。

(3)基于标准化的并被广泛支持的技术。Ajax包含的技术都是各自领域强有力的技术，组合之后的功能更加强大。

(4)给用户带来更好的体验。Ajax使得在Web上运行软件的感受，越来越接近于本机上运行的效果。

(5)可以调用外部数据，取得足够权限后，能轻易地实现数据聚合。

(6)进一步促进页面呈现与数据的分离。

2  Ajax技术在Web 2.0中的应用

下面简要介绍利用Ajax技术的无需页面提交而能与服务器交互，即时从服务器获取数据并显示出来的特性，实现自动完成(字典)功能的过程。自动完成功能实现的主要目的是帮助用户快速准确的输入内容，就是用户在输入框中输入一些检索词，根据用户所输入的信息，从后台数据库以LIKE方式查询，同时在输入框下方显示相应的提示信息，进而帮助用户快速的搜索。在很多系统中都需要实现自动完成的功能，但在Ajax技术出现之前，一般只有桌面应用程序才能实现类似的功能。Web应用程序只能借助于浏览器自身的自动完成功能来实现，而浏览器的自动完成功能是比较有限的，它只能提示用户输入过的信息。如果自动完成的数据是来自于服务器端的，Ajax则是最好的选择。比如用户只记住了要查询信息的前面几个字，而记不清全名，这样要查询到所要的信息就比较困难。使用Ajax技术后，在用户输入的同时，输入框下方可以给出与已输入信息相匹配的提示来辅助用户输入，这样用户进行查询的速度和准确率会大大提高，也可以有效地改善用户体验。下面利用Ajax(.net)技术实现一个学校信息查询的自动完成功能，其步骤如下：

服务器端提供GetSearchItems方法给客户端，用来返回满足条件的列表；

客户端的输入框需要增加onkeydown响应函数，以便即时获得满足条件的列表；

通过客户端的JavaScript动态列出待选结果的列表，同时还要提供键盘和鼠标的响应。

在服务器端添加供客户端调用的GetSearchItems方法是：在服务器端函数GetSearchItems的定义前加上[AjaxMethod()]标记，以表明它可以被客户端异步的调用。具体代码如下所示：

(1)服务器端代码设置如下：

该方法用于查询数据库，最后返回一个ArrayList对象，他将包含所有以用户输入字符串开头的所有学校名称的条目。

(2)客户端处理的部分代码

客户端相对于服务器端处理要复杂得多，要根据服务器端返回的ArrayList对象展示结果，此处用JavaScript和DOM创建一个新的div，将ArrayList中的每一条目都作为其子节点加入到div中，而每一个条目也被看作是一个div，具体的文本内容则是一个span对象。

rc="/21ic_image/embed/file/201202/ccbaa97ff5a679e352fb48454c6789e1.jpg" alt="" />

3结  语

利用Ajax技术，开发人员可以创建一个与桌面应用程序相媲美的交互式用户界面。Ajax使Web中的界面与应用分离(也可以说是数据与呈现分离)，而在以前两者是没有清晰界限的，数据与呈现的分离，有利于分工合作、减少非技术人员对页面的修改造成Web应用程序的错误，提高效率，也更加适用于现在的发布系统，也可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的处理能力来处理。Ajax技术的出现将基于Web的应用程序开发带进了一个全新的阶段，但Ajax主要是基于JavaScript的客户端技术，所以客户端的开发显得越来越臃肿，随之而来的安全性等一系列问题有待进一步研究。