posts - 116,  comments - 34,  trackbacks - 0
Web界面设计新趋势
2005-10-29 09:33:27
  
来源:视觉设计博客

严格说起来,AJAX
并不是什么新鲜的技术,而且也不复杂高深,但是自从
AJAX 这个名子出来之后,以及 Google 几个 Killer
级的服务应用 AJAX,使得 AJAX
好像在突然间大鸣大放,每个网站都想要开始采用类似的技术,但是
AJAX 真的有这么好吗?在了解 AJAX
之前先来看几个成功的例子:
实例介绍


Google Map
Google Map 是应用 AJAX 技术最成功的例子,只要一提起
AJAX,一定也会举 Google Map 做范例。底下是 Google Map 的
UI,如果你有用过一定很熟悉:

<img src="http://photos15.flickr.com/18802040_1ce6de48b7.jpg" alt="map"
/>

你可以直接在 Google Map
的网页上拖拉缩放整面地图,地图细节则会慢慢显示出来,就好像在你自己的计算机上使用
papago 等软件一样,这就是 Google Map 最引人津津乐道的
UI 设计,但是他怎么做到的?

GMail
GMail 也是一个例子,在你登入你的 Gmail Account
之后,你所看到的信件选单,信件内容等都是在同一个网页中显示,不论你怎么选择你都不会做换页,它是怎么做到的?
<img src="http://photos15.flickr.com/18802042_bd82adf1dc.jpg" alt="a"
/>

Technorati Search Beta
Technorati search 除了 search blog 文章外,现在也多了搜寻
flickr 图片以及 furl 和 del.icio.us 的功能,算是半个
meta-search engine
吧,而且这些搜寻的结果都是在同一个页面中显示出来,最快显示出来的数据当然是他自己
index 的 blog
文章,但当你在浏览结果时,网页的右手边也没闲着,正在帮你查询
flickr, furl, del.lcio.us 的结果呢!它是怎么做到的呢?

<img src="http://photos12.flickr.com/18811520_4335f8d35b.jpg" alt="b"
/>

这些问题的答案就是 AJAX。

传统网页流程的设计都是 Web Page -> CGI -> Web Page
(Response) 的顺序,这之间整个页面都要经过重载,而且
CGI
在处理时是需要时间的,所以使用者在这段时间中需要等待 ,但是这样的作法跟我们使用一般桌面应用软件的习惯不同,在多数的应用软件中,即使是需要等待处理的程序,也会先把处理完的结果先显示出来,但是在传统的网页流程设计中,这是很难达到的。传统的网页流程设计是
synchronous 的,而 AJAX 是 Asynchronous,这就是为什么 AJAX
的全名是: Asynchronous javascript And XML ( Synchronous /
Asynchronous 的概念就好像是写 network socket
程序时,synchronous / asynchronous IO,或是 blocking /
none-blocking IO 的概念类似)。

AJAX
并不是新的技术,早在这个名词出来以前,此类的技术就已经被广泛运用了,后来由
Adaptive Path 这家公司取了 AJAX
这个名词来代表此类的技术。所以在这家公司的网站上可以找到一篇
Jesse James Garrett 所写的 Ajax: A New Approach to Web Applications
文章,可以帮助大家了解 AJAX
的定义以及技术层次的问题,这篇文章部分也被 Jacky's
blog 翻译成中文。其实说穿了,AJAX 就是运用 javascript
在背景偷偷帮你去跟服务器要资料,最后再由 javascript
或 DOM 来帮你呈现结果,因为所有动作都是由 javascript
代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦,让使用
Web Service 更像是在操作桌面软件。

但是, AJAX 真的那么实用吗?网络上也有不少 blog
在批评 AJAX:


Ajax: 99% Bad

嘟嘟老窝's AJAX的七宗罪
这篇文章讲得很好,说中了 AJAX 的麻烦所在。

Ajax:剩下什么呢?


AJAX 存在的目的跟 Flash 有点雷同,都是要改进 Web UI
的呈现方式,但是既然不同于传统的 WebUI
呈现,便会出现一些不兼容性,例如不利于搜寻引擎做
index,以及造成一个没有 history 及 backforward
的网页浏览,这都不一定是使用者想要的,并不是所有的网页都适合使用
AJAX 技术来改进 UI
呈现,在贸然转移前还是有必要多思考。

其它 AJAX Demo


Spell Check

Upload progress bar
这个 demo 可说是最能显示出 AJAX 强大的 Demo
了,很有趣,一定要看看。

Google Instant
这个 meta-search engine 会由 javascript 在背景去 google
搜寻你的关键词,所以也不需要经过页面重载。

Rico 的 AJAX Implementation 的 Demo
一定要玩看看他的 Weather Widget。

Ajax 简介

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术:

Ajax(Asynchronous JavaScript + XML)的定义

基于web标准(standards-based presentation)XHTML+ CSS的表示;
使用 DOM(Document Object Model)进行动态显示及交互;
使用 XMLXSLT 进行数据交换及相关操作;
使用 XMLHttpRequest 进行异步数据查询、检索;

传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。

使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息。

Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样,Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。

对应用Ajax最主要的批评就是,它可能破坏浏览器后退按钮的正常行为(参见Jakob Nielsen's的《1999 Top-10 New Mistakes of Web Design》)。在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现。开发者们想出了种种办法来解决这个问题,大多数都是在用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)

一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现,大部分都使用URL片断标识符(通常被称为锚点,即URL中#后面的部分)来保持跟踪,允许用户回到指定的某个应用程序状态。(许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮的争论。

进行Ajax开发时,网络延迟??即用户发出请求到服务器发出响应之间的间隔??需要慎重考虑。不给予用户明确的回应[3],没有恰当的预读数据[4],或者对XMLHttpRequest的不恰当处理[5],都会使用户感到延迟,这是用户不希望看到的,也是他们无法理解的。[6]通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

posted on 2005-11-23 17:02 萌芽的叶子 阅读(400) 评论(0)  编辑 收藏 引用 所属分类: xml
只有注册用户登录后才能发表评论。

<2006年5月>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

常用链接

留言簿(3)

随笔分类(115)

随笔档案(116)

文章分类(4)

相册

收藏夹(78)

.net中文社区

.net博客

.net英文社区

AJAX

ASP.NET 2.0

ASP.NET 学习

DataBase

ERP

E杂志

Html&Css

JavaScript

Microsoft

Open Sourse

SAP

WebCasts

WebServices

XML

其他

好友Blog

好文章连接

开发工具

控件

物流

职业经理人

设计模式

读书网站

非技术

项目管理

搜索

  •  

积分与排名

  • 积分 - 58424
  • 排名 - 106

最新评论

阅读排行榜

评论排行榜