AJax技术

一种新的胖客户端技术——Ajax(一)(5)

字号+ 作者:H5之家 来源:H5之家 2017-04-03 15:01 我要评论( )

上图右边显示了使用Ajax技术后的开发模式,原来的网上应用模型即左边的那一部分,客户端和Web服务器是直接进行交互的。当你请求一个数据返回的时候,会将整个页面全都发回去从用户那里收到的所有数据,经过处理,再

上图右边显示了使用Ajax技术后的开发模式,原来的网上应用模型即左边的那一部分,客户端和Web服务器是直接进行交互的。当你请求一个数据返回的时候,会将整个页面全都发回去从用户那里收到的所有数据,经过处理,再把所有的数据都发回来,不论你想刷新页面的哪一个部分,整个页面都需要刷新,使用Ajax技术后,情况不一样了,中间有一个XML数据缓冲区,这个缓冲区和Ajax引擎负责处理一部分数据。当需要和服务器端再次发送数据时,只需要发送一小部分请求,而服务器端只需要返回那一小部分请求就可以了。相比把所有请求发过去,所有页面发回来的那种传统的方式,大大的提高了性能。

3.2.2 Web与Ajax的技术结合点

(1)Ajax通过RSS/ATOM同步数据;通过RSS/ATOM聚合数据;使用友好的URL(即好记的域名,比如http://blog.csdn.net/jianhao);支持按照Blog的方式来发表;采用REST(Representational State Transfer)的API或者XML的Web Service;具有社会性;能把东西分享给朋友等;

(2)Ajax使用CSS+XHTML的方式控制网页元素,这样做的好处是页面更小,加载更快;页面更规范,减少了和程序的交互;而且可以轻松支持多种样式,提供更个性化服务。但这种技术也存在一定的局限,它还没有好的可视化编辑器,从加大了美术设计师的工作。

(3)使用格式化输出的一个规范即XML格式。

在Web与Ajax的技术结合点方面,因为Ajax是一种客户端请求通过异步调整服务器数据,实现页面无刷新操作的技术,所以在基于Ajax技术的Web应用程序中,它的好处主要表现在用户不需要刷新页面就可以完成异步的数据交换,在Smart Client技术成熟之前,可以比较完美地实现富客户端(RIA)。

3.3 综述

使用Ajax可以带来的好处有以下几个方面:

(1)服务器的负担。Ajax的原则是“按需取数据“,可以最大程度地减少冗余请求,减轻服务器的负担。

(2)无需刷新页面,减少用户心理和实际的等待时间。特别是在读取大量数据时,不会像刷新页面那样出现白屏的情况,Ajax使用XMLHttpRequest对象发送请求并且得到服务器响应,在不重新载入整个页面的情况下,用java script操作DOM更新页面。因此在读取数据的过程中,用户所面对的不是白屏,是原来的页面内容(也可以加一个“正在读取中”的提示框让用户知道目前正在读取数据)只有在数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的,用户几乎感觉不到。

(3)带来更好的用户体验。

(4)可以把以前的一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器负担,充分利用带宽资源,节约空间和宽带租用成本。

(5)可以调用外部数据。

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

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

4.目前的应用

4.1 应用场景

Ajax的特点在于异步交互、动态更新Web页面,因此客观存在的适用范围是交互较多、频繁读取数据的Web应用。它在以下几个场景中经常使用。

(1)数据验证。

在填写表单内容时,需要保证数据的惟一性(例如新用户注册填写的用户名),因此必须对用户输入的内容进行数据给以验证。数据验证通常有两种方式:一种是直接填写,然后提交表单,这种方式需要将整个页面提交到服务器端进行验证,整个过程不仅时间长而且造成了服务器不必要的负担。第二种方式是改进了的验证过程,用户可以通过点击相应的验证按钮,打开新窗口查看验证结果,是这样需要新开一个浏览器窗口或者对话框,还需要专门编写验证的页面,比较耗费系统资源。而使用Ajax技术,可以由XMLHttpRequest对象发出验证请求,根据返回的HTTP响应判断验证是否成功,整个过程不需要弹出新窗口,也不需要将整个页面提交到服务器,快速而又不加重服务器负担。

(2)按需取数据。

分类树或树形结构在Web应用系统中使用得非常广泛,例如部门结构、文档的分类结构常常使用树形控件呈现。以前每次对分类树的操作引起页面重载,为了避免这种情况出现,一般不采用每次调用后台的方式,而是一次性将分类结构中的数据全部读取出来并写入数组,然后根据用户的操作,用java script来控制节点的呈现,这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题,如果用户不对分类树进行操作或者只对分类树中的一部分数据进行操作的话,那么读取的数据中就会有相当大的冗余,浪费了用户的资源。特别是在分类结构复杂、数据量庞大的情况下,这种弊端就更加明显了。

现在应用Ajax改进分类树的实现机制。在初始化页面时,只获取第一级子分类的数据并且显示;当用户点开一级分类的某一节点时,页面会通过Ajax向服务器请示当前分类所属的二级子分类的所有数据;如果再继续请求已经呈现的二级分类的某一节点时,再次向服务器请求当前分类所属的三级子分类的所有数据,以此类推。页面会根据用户的操作向服务器请求它所需要的数据,这样就不会存在数据的冗余,减少了数据下载总量。同时,更新页面时不需要重载所有内容,只更新的那部分内容即可,相对于以前后台处理并且重载的方式,大大缩减了用户的等待时间。

(3)自动更新页面

在Web应用中有很多数据的变化是十分迅速的,例如最新的热点新闻、天气预报以及聊天室的聊天内容等。在Ajax出现之前,用户为了及时了解相关的内容必须不断刷新页面,查看是否有新的内容变化,或者页面本身实现定时刷新的功能。有可能会发生这种情况:有一段时间网页的内容没有发生任何变化。但是用户并不知道仍然不断地刷新页面;或者用户失去了耐心,放弃了刷新页面,却很有可能在此时有新消息出现,这样就错过了第一时间得知消息的机会。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评