返回织梦建站服务网首页 业界新闻 教程文档 资源下载 酷站鉴赏 免费服务 站长工具
织梦建站工作室
织梦建站论坛
载入中…
专题栏目
最新热门
>>更多热门...  
最新推荐
>>更多推荐...  
  您现在的位置: 织梦建站服务网 >> 建站教程 >> 网络编程 >> 其他相关 >> 教程正文
Ajax,用该所用            
HITS: TIME:2007-4-22 14:47:17 AUTHOR:Realazy URL:蓝色理想
CONTENT INTRODUCE :
放大文字  缩小文字  发表评论  加入站内收藏夹  告诉好友  打印模式  关闭窗口 

我经历的一个项目倒下了。倒不是因为技术落后,反而是因为技术太过先进——整站,所有前端页面都是Ajax处理而产生的。

我们现来看看Ajax是啥(汗,你以为读者是白痴咩~),根据发明人Jesse James Garrett (jjg)在adaptive path的一篇文章Ajax: A New Approach to Web Applications中定义,Ajax由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含:

  • 基于XHTML和CSS标准的表示;
  • 使用Document Object Model进行动态显示和交互;
  • 使用XMLHttpRequest与服务器进行异步通信;
  • 使用JavaScript绑定一切。

可以看到,这是一种以JavaScript为核心的技术,从广义上说,除了服务器端技术,剩下的都是Web标准。

但上一句话并不是重点,做Web标准的读者不用窃喜。

我们来了解一下Jesse James Garrett的背景,他著有一本有名的书,叫做The Elements of User Experience - User-Centered Design for the Web. 啥?User Experience? 没错,jjg是一位资深用户体验专家。

我没有深入调查过,但我身边的人,接触并运用Ajax的清一色都是程序员。我对程序员当然没有什么成见,但术业有专攻,程序员看到这个Ajax定义,理所当然是从技术上入手,为新技术滥用Ajax不亦乐乎无法自拔而不自知,为Ajax而Ajax,忽略了非技术层面的东西,比如,用户体验和亲和力(accessiblity)

所以我认为jjg对于他自己发明的Ajax的定义是不及格的。实际上,按照jjg本来的意思,技术也是为用户体验服务的。About Face 2说,Web的出现让交互设计至少倒退十年,Ajax的出现实际上为了弥补这十年而生,让Web界面操作可以一样或至少接近“正常软件”的操作方式。但jjg的定义对技术层面的东西阐述过了头,缺乏用户体验背景的程序员只能依瓢画葫芦,为Ajax而Ajax。

所以我觉得,哪里该用Ajax,怎么使用Ajax,如何才能做到符合用户体验的需求,这是产品/策划的事情。事实是很悲哀的,产品认为这属于技术问题(至少我身边所碰到的情况都这样)而不加过问。我们可以看到很多大举2.0旗帜的网站,看起来很酷,用起来很苦。漫长的等待没有提示,用户未知情的情况下刷新内容,鼠标一不小心就会犯错,不能后退(这倒是普遍问题),不能撤销等等,很多用户患上了2.0恐惧症。

由于我实际上对用户体验并没有研究,不好夸大其词,不好妄加评论,上面只是我的个人想法,有错的话各位看官一定要批评指正,一起学习,共同进步。我着重谈谈亲和力的问题。

众所周知,JavaScript不是什么时候都能用。老旧的浏览器,高安全的环境(比如银行,或者用户设置),文本浏览器(如lynx, w3m),屏幕阅读器,手机浏览器等等,很多场景都限制了JS的发挥与使用。对于正常人,你可以觉得无所谓,反正现在换个或者升级浏览器也是轻而易举的事情,但是,很多障碍人士,却只有很少的选择。Web 2.0并不意味不能用。

所以我们必须采取适度降级(graceful degradation)的策略。对于一些非必须由Ajax驱动产生内容的前端页面(比如分页,提示内容的展示),我们就可以采取此策略。我们必须保证,在没有JS的情况下,这些内容可以使用传统(Web 1.0?)的方式来交互产生。这是保证Web具备亲和力的基础。有此保证后,我们就可以采取逐步增强(progressive enhancement)的策略来加入Ajax,使用JS来控制前端的交互,达到用户体验的目的。实际上,读者的疑问可能就在这,如何能够保证适度降级的基础上能逐步增强?实践证明,Unobtrusive Javascript(不冒昧的Javascript? 天,这该怎么翻译?)的思想能够帮助我们做到。何谓Unobtrusive?那就是说,在没有JS的情况下,网页内容依然能够访问(accessible)。概念很抽象,那么我们举个例子说明吧。假如网页有几块内容:

<a href="#a">Show a</a> <a href="#b">Show b</a> <a href="#c">Show c</a>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>

我们需要按照用户的点击展示每一块内容。通常的做法是,我们会给a标签加上占位符,然后写上onclick=""之类的代码,在某些div加上style="display: none;",让其在默认情况下不可见,然后再让JS操纵其可见性。这是一种不好的,非Unobtrusive的做法。

Unobtrusive的做法是,我们需要让a有意义,而不是只为JS而存在。a应该依照实际情况指向一个实际连接,或者跳到本页的一块内容。我们应该讲JS完全分离出来,不要在HTML混杂onclick之类的事件代码。而且,我们也不应该在默认情况下隐藏内容,应该在页面载入后交给JS来控制,这样,用户在没有或禁止掉JS的时候,她/他还有机会能够看到所需的内容。这是一个最简单的Unobtrusive例子。

所以,结论是,我们要建设具备亲和力的Web 2.0的网站,graceful degradation, progressive enhancement, Unobtrusive是基础。当然,某些完全依靠Ajax的网站,比如Google Maps,得另外讨论。我们可以看到,即使是Gmail,它也有一个非Ajax版本备用。当然,我的意思不是每个网站都应该开发、维护两个以上的版本,我们应该,在保证亲和力的基础上,才逐步Ajax化,而且Ajax应该是用在构建一种新的交互方式,用在用户体验上。

教程录入:jerome    责任编辑:jerome 
  • 上一篇教程:

  • 下一篇教程: 没有了
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口

    相关教程
    像table一样布局div II
    标准的 语义的 非侵入的页签切换
    网站程序员如何应对web标准
    浅谈flash web的结构
    Flash & Ajax 操作 XML
    理性思考Flash与Ajax相关问题
    WSDL之偷天換日
    为flash构建asp.net Webservice
    一次意外的分析
    是时候了,前端架构师
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    湘ICP备05010790号 {$Wap}
    关于我们 | 版本历史 | 联系方法 | 隐私条例 | 链接我们 | 广告服务 | 常见问题 | 友情链接 | 网站公告 | 设为首页 | 收藏本站
    Copyright © 2001-2006 17zm.NET All Rights Reserved.  织梦建站工作室[织梦建站工作室]™荣誉出品. Since 2001