Ajax应用场景

转载 2007年09月21日 19:00:00
Ajax不是万能的,在适合的场合使用Ajax,才能充分发挥它的长处,改善系统性能和用户体验,绝不可以为了技术而滥用。Ajax的特点在于异步交互,动态更新web页面,因此它的适用范围是交互较多,频繁读取数据的web应用。现在来看几个Ajax的应用实例,读者可以了解如何使用Ajax技术改进现有的web应用系统。

场景1.数据验证

在填写表单内容时,需要保证数据的唯一性(例如新用户注册填写的用户名),因此必须对用户输入的内容进行数据验证。

数据验证通常有两种方式:

一种是直接填写,然后提交表单,这种方式需要将这个页面提交到服务器端进行验证,整个过程不仅时间长而且造成了服务器不必要的负担;

第二种方式是改进了的验证过程,用户可以通过点击相应的验证按钮,打开新窗口查看验证结果,但是这样需要新开一个浏览器窗口或者对话框,还需要专门编写验证的页面,比较耗费系统资源。

而使用Ajax技术,可以由XMLHttpRequest对象发出验证请求,根据返回的HTTP响应判断验证是否成功,整个过程不需要弹出新窗口,也不需要将整个页面提交到服务器,快速而又不加重服务器负担。

场景2.按需取数据

分类树或者树形结构在web应用系统中使用得非常广泛,例如部门结构,文档得分类结构常常使用树形空间呈现。

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

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

场景3.自动更新页面

在web应用中有很多数据的变化时十分迅速的,例如最新的热点新闻,天气预报以及聊天室内容等。在Ajax出现之前,用户为了即使了解相应的内容必须不断刷新页面,查看是否有新的内容变化,或者页面本身实现定时刷新的功能(大多数聊天室页面就是这样做的)。

有可能会发生这种情况;有一段时间网页的内容没有发生任何变化,但是用户并不知道,仍然不断的刷新页面;或者用户失去了耐心,放弃了刷新页面,却很有可能在此有新的消息出现,这样就错过了第一时间得到消息的机会。

应用Ajax可以改善这种这种情况,页面加载以后,会通过Ajax引擎在后台进行定时的轮询,向服务器发送请求,查看是否有最新的消息。如果有则将新的数据(而不是所有数据)下载并且在页面上进行动态的更新,通过一定的方式通知用户(实现这样的功能正是JavaScript的强项)。

这样即避免了用户不断手工刷新页面的不便,也不会因为重复刷新页面造成资源浪费。

既然你己经对Ajax产生了兴趣,还要知道重要的一点,即什么时候应该使用Ajax技术,而什么时候不该用。首先,不要害怕在应用中尝试新的方法。我们相信.几乎每个web应用都能从Ajax技术中获益,只不过不要矫杠过正,过于离谱就行了。从验证开始就很合适,但是不要限制你的主动性。你当然可以使用Ajax提交数据,但也许不能把它作为提交数据的主要方法。

其次,惟一会影响你应用Ajax的就是浏览器问题。如果大量用户(或者特别重要的用户)还在使用比较旧的浏览器,如IE 5 , Safari 1.2或Mozilla 1.0之前的版本,Ajax技术就不能奏效。如果这是一些很重要的用户,你就要使用针对目标用户的跨浏览器的方法,而放弃Ajax,或者开发一个可以妥善降级的网站。浏览器支持可能不是一个重要因素,因为netscape Navigaxar 4在市场上的份额很小。不过,还是应该查看Web日志,看看你的应用适用什么技术。

如前所述,验证和表单填写就非常适合采用Ajax实现。还可以使用DOM的“拖”技术建立真正动态的网站,如google的个性化主页.

可以看到,Ajax为Web应用开发提供了新的机会。你不会再因为以往的专用技术或技术折中方案而受到妨碍。利用Ajax,胖客户与瘦客户之间的界限不再分明,真正的赢家则是你的用户。
 

Ajax应用场景.txt

  • 2010年01月20日 08:33
  • 3KB
  • 下载

AJAX概述,应用场景和其优缺点

AJAX小例子: Insert title here window.onload=function(){//文档加载完毕后执行 //得到btn元素 var btn = d...

.ajax设置成同步的应用场景

原来一直觉得ajax的defer方式已经是多余,现在才觉得asyn:false设置成同步方式都是有用的。打个比方,在ready页面加载又要保存切换选项卡状态又要保存前一搜索结果的话,就有用。 ...

Ajax应用场景-Ajax适合的应用场合

Ajax不是万能的,在适合的场合使用Ajax,才能充分发挥它的长处,改善系统性能和用户体验,绝不可以为了技术而滥用。Ajax的特点在于异步交互,动态更新web页面,因此它的适用范围是交互较多,频繁读取...

UML设计的9种图例 区别 应用场景

  • 2014年01月04日 14:23
  • 259KB
  • 下载

ZooKeeper典型应用场景一览

ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现,使该框架保证了分布式环境中数据的强一致性,也正是基于这样的特性,使得ZooKeeper解决很多分布式问题。 ...
  • weiqubo
  • weiqubo
  • 2017年11月20日 14:23
  • 349

使用 WebSockets 的 9 个应用场景

没有其他技术能够像WebSocket一样提供真正的双向通信,许多web开发者仍然是依赖于ajax的长轮询来实现。(注:我认为长轮询是富于创造性和多功能性的,虽然这只是一个不太完美的解决办法(hack)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax应用场景
举报原因:
原因补充:

(最多只允许输入30个字)