×
嵌入式开发 > 详情

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

发布时间:2020-07-08 发布时间:
|

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所示。

由于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对象。

3结 语

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



『本文转载自网络,版权归原作者所有,如有侵权请联系删除』

热门文章 更多
编译器跟编辑器有什么区别