Ajax技术介绍

术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。最重要的是,用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的。

虽然Ajax所需的基础架构已经出现了一段时间,但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心,因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的(desktop-like)”可用性。

通常,在J2EE中,开发人员过于关注服务和持久性层的开发,以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中,常常会听到这样的话,“我们没有可投入UI的时间”或“不能用HTML实现”。但是,以下Web站点证明,这些理由再也站不住脚了:

BackPack
Google Suggest
Google Maps
PalmSphere
所有这些Web站点都告诉我们,Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之,在涉及到用户界面的响应灵敏度时,基准设得更高了。

定义Ajax

Adaptive Path公司的Jesse James Garrett这样定义Ajax:

Ajax不是一种技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含:

基于CSS标准的表示;
使用Document Object Model进行动态显示和交互;
使用XMLHttpRequest与服务器进行异步通信;
使用JavaScript绑定一切。
这非常好,但为什么要以Ajax命名呢?其实术语Ajax是由Jesse James Garrett创造的,他说它是“Asynchronous JavaScript + XML的简写”。
Ajax的工作原理


Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

1 AJAX还是AJAH
* AJAX的很多经典应用其实都是利用xmlhttp空间访问后台程序,后台程序返回脚本用eval回调或者返回简单数据的方式来开发。这样的开发模式的好处是设计简单轻巧,对熟悉dhtml的开发者来说上手会比较块,跨浏览器问题也容易解决,做简单的应用也够用。gmail,google suggest都是用这种方式。但是在我看来gmail已经吧AJAH应用到极限了,更复杂的数据结构用简单数据和回调方式来组织就开始有点力不从心了。

* 前AJAX的一种传统做法是后台返回完整的xml文件后用脚本(利用控件)解析xml后操作页面的dom节点来动态生成页面的一部分。这样作的优点是可以充分利用xml的强大表达能力传输各种数据结构,缺点是页面的dom操作效率不高,而且IE在dom操作的API上bug多多。之所以叫“前AJAX”,因为我们在AJAX这个名词出现前已经这样做了很多年了。

* AJAX另一种传统做法是后台返回完整的xml文件后用脚本(利用控件)解析xml后生成html代码再灌回页面的层中。这样的做法回避了页面dom操作的一些问题,在生成的内容比较多的时候利用一些字符串计算的优化技巧(主要是数组和正则的应用)可以相当高效的生成页面。在我看来这是未来的发展趋势。

我现在的项目主要采用的是第三种方式,结合第二种。我使用的是自己的一个小巧的框架,模拟jsp的语法来生成html代码,但是依赖于浏览器的xml解析API,因此难以跨浏览器。google的开源项目ajaxslt提供了一个纯js的xslt解决方式,功能更强大,可以在页面中局部的应用xslt解析xml生成html或者其他形式的数据,但是带来了xslt这个技术门槛。sf上的ZK似乎也不错,但是带来的是xul这个技术门槛,同时后台被绑定在了J2EE服务器上面。

2 CACHE
如果使用xmlhttp控件,在发起http请求的时候IE会包办cache策略,很多时候更新了数据却无法获得更新后的数据。一开始试图用传统方式在URL后面加随机数来强制更新,但是IE仍然距不发出新的请求。
一个解决方法是在后台写expires: 0或者其他的禁止前台cache的头,但是这样在数据没有更新的时候又会带来不必要的服务器压力、响应延迟和带宽浪费。
一个稍微好一点的解决方法是,前台在提交数据以后,需要强制更新数据的时候:

xmlhttp.setRequestHeader("If-Modified-Since","0");

3 系统错误: -1072896748。
用xmlhttp接收到数据的时候经常是用xmldom.loadXML(xmlhttp.responseXML.xml)来判断返回的数据的正确性,但是如果后台送过来不正确的xml的时候有时回触发-1072896748系统错误。这是因为xmlhttp.responseXML已经没有解析到东西了,我们还试图访问它的xml属性而触发的。
解决的方法是在使用responseXML.xml 或者 responseText的时候要做try/catch:
try{var tmp = xmlhttp.responseXML.xml}catch(ex){err=true;}
有些人喜欢catch的时候判断 exception.description=="系统错误: -1072896748。" , 如果客户端不是简体中文版的系统的时候就判断不到了。其实这个地方只要有异常,都必须走异常处理流程了,不用区分的那么仔细。
如果要问做什么事是最有吸引力,那就是创建Web应用。毕竟,上次你听到有人称赞某产品的交互设计是什么时候的事了?(除了iPod之外) 它们都很cool, 而且都是很创新的项目。
抛开这些不管,Web设计者们对设计交互式的Web没有什么更好的办法,却对我们做桌面软件的同事投去少许羡慕的目光.桌面应用程序有丰富的界面以及对于Web程序来说无法比拟的响应能力。同样,Web的快速发展,在我们所提供的体验和用户从桌面应用程序所得到的体验间产生巨大的差距

而如今差距正在消失。请看看“Google建议(Google Suggest)”. 观察它按你的输入显示建议条目的更新速度,几乎是立即更新的。再看看”Google Maps”. 放大,用你的鼠标搬动和滚动。这些动作几乎是立即响应的,不用等待页面刷新。

”Google Suggest”和”Google Maps” 是采用Ajax技术的两个典型例子。Ajax是Asynchronous JavaScript and XML的简称,它表现出一个Web开发上的根本转变,那就是,Web上可能做些什么.

Ajax的定义
Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。Ajax包括:

XHTML和CSS
使用文档对象模型(Document Object Model)作动态显示和交互
使用XML和XSLT做数据交互和操作
使用XMLHttpRequest进行异步数据接收
使用JavaScript将它们绑定在一起
传统的web应用模型工作起来就象这样:大部分界面上的用户动作触发一个连接到Web服务器的HTTP请求。服务器完成一些处理—接收数据,处理计算,再访问其它的数据库系统,最后返回一个HTML页面到客户端。这是一个老套的模式,自采用超文本作为web使用以来,一直都这样用, 但看过《The Elements of User Experience》的读者一定知道,是什么限制了Web界面没有桌面软件那么好用。

从现在起,关心粮食和蔬菜。
现在Google和Web 2.0就是我们的粮食和蔬菜。

对于Web 2.0,有人甚至认为这是部分网络研究人员和网站经营者的炒作。这是不对的,毕竟WEB 2.0已经开始和你的日常生活亲密接触了。不管你是不是愿意承认。

Blog,TrackBlog,RSS,Wiki,SocialBookmark,Flickr,Google Map……
你不得不承认,我们大部分人每天都在使用其中的一部分。在以后的日子里,这部分人必定会越来越多。

其实对于普通的网络用户来说,你永远不必理会什么是Web 2.0,哪怕你每天都要接触它。
只有一些专业人士,BSP等,风险投资者才需要参与这场革命过程中必经的争吵和论证。

在这场风潮中,Ajax无疑是风头最劲的领跑者。尽管它并不是一个新生的技术,事实上,它是几种技术的组合。
较传统的Web应用模型而言,Ajax的优势是显而易见的。可以用下面两张图来说明。


图1:传统Web应用模型(左)与Ajax模型的比较(右)


图2:传统Web应用的同步交互过程(上)和Ajax应用的异步交互过程的比较(下)

在采用Ajax的开发上面,Google做了巨大的投资。Orkut,Gmail,以及Google Groups,Google Suggest和Google Maps,全部是Ajax的应用。
Flickr也是采用这一技术使得其广受欢迎。采用类似技术的还有Amazon的A9.com搜索引擎。

对于Google真是爱死了,几乎想要的都有,另外还时不时给你惊喜。
不过一腔爱国热情还是希望有一个本土的网站来盖过Google,如同淘宝PK对手eBay。
不过这一梦想五年之内是不可能实现了。
毕竟,Google对于中国人的关怀也是有目共睹的,而且比共产党来的便捷和实在。

SNS在中国的复制能否创新,这关系到它自身的命运与生存,我们只能拭目以待了。
至少从目前国内的sns网站来看,比如优友地带、易缘网、人际中国、联络家、天际网等、九帮网等,情况不容乐观。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值