最近研究了一下微软的Atlas(MS的AJAX解决方案),打算翻译一些资料,即学技术又练英语 [smile] 。今天先翻译了一篇“Atlas概述”,如果有不对的地方欢迎指正。后续打算翻译几篇实例讲解的文章。

标题:ASP.NET “Atlas” 概述
翻译:吴飞(Felix)
原文:http://atlas.asp.net/docs/Overview/Overview.aspx

介绍

很多网页开发人员一直以来都在努力提高HTML的UI使用体验,包括JavaScript的复杂性以及跨浏览器的兼容性。在很多情况下,开发人员不得不为了兼容不同浏览器通过创建基于服务器端的动态网页而牺牲丰富的用户体验。

在过去的几年里,浏览器的很多新特性促使网页开发人员重新探索是否有可能创建基于客户端应用程序。目前,所有主流浏览器都支持“可编程文档对象模型”(DOM),最新的几个版本中还增加了服务器端和客户端直接通信的能力,而不用再使用“回送”(Postback)。因此,新一代的网页程序应运而生,比如Microsoft Virtual Earth和Microsoft Windows Live,这些网站都提供了像拖拽(drag-and-drop)和实时处理数据的UI特性。

然而,开发这样的网页程序并不简单。你不得不了解浏览器的DOM并用JavaScript编写代码,而且也因不同的浏览器而不同。此外,JavaScript并没有面向对象(object-oriented)和类型安全(type-safe)等.NET所具有的特性。简而言之,创建面向客户端的网页程序需要精通一门新的编程语言和一个新的开发平台。

在这样的情况下,ASP.NET ‘Atlas’横空出世。Atlas是一种整合了客户端脚本库和ASP.NET 2.0服务器端开发平台的新的ASP.NET网页开发技术。这种网页由Atlas提供客户端支持,由ASP.NET提供服务器端支持。由于Atlas是ASP.NET的扩展,因此他完全整合了服务器端的服务。使用了Atlas,你就可以只把网页中的重要部分提供给客户端,而不用处理整个页面,并且可以在后台与服务器进行通讯。由此可见,你可以创建响应快、表现力丰富的UI和服务器通讯。

Atlas与AJAX

在网页开发业界,众所周知AJAX(Asynchronous JavaScript and XML)技术能够创建客户端服务器通讯和丰富的UI。AJAX是一种创建响应快、互动的网页的手段。Atlas可以让你创建AJAX样式的应用程序,而且超越了AJAX,能够为创建应用程序提供一个完整的开发平台。Atlas创建的应用程序可以针对应用需求而平衡客户端和服务器端的开发,并且为客户端和服务器端提供相同级别的编程能力。

Atlas提供了什么?
Atlas的主要目标就是整合客户端脚本和服务器端ASP.NET以提供一个完整的开发平台。

客户端特性
为了客户端开发,Atlas降低了基于JavaScript开发的复杂性,并提供了以下特性:
1、一致的、面向对象的JavaScript API组。可以使用.NET中很熟悉的OOP特性编码客户端程序。
2、浏览器自适用。可以不用再为不同的浏览器编写不同的代码。
3、客户端脚本API和组件支持丰富的UI特性,比如拖拽(drag-and-drop)。几乎使用很少的代码就可以为你的HTML控件加入这些特性。
4、类似ASP.NET服务器控件的客户端声明模型。

服务器端特性
Atlas也整合了客户端脚本与ASP.NET服务端,因此可以控制应用程序任务,无论在哪里都是有意义的。ASP.NET为Atlas应用程序提供以下特性:
1、Web Service可以与Atlas应用程序整合
2、ASP.NET网页服务器控件会自动加入Atlas应用程序所需要的客户端脚本,因此不用再为这些控件编写JavaScript代码。
3、为客户端开发整合了Visual Studio 开发工具,提供了debug、statement completion和其他高效开发的特性。

  Ajax的风行说明用户对于丰富的Web体验的需求日益增长。然而,开发和调试Ajax风格的Web应用程序是一项非常艰难的工作。要编写一个丰富的Web UI,开发者需要详细地掌握DHTML和JavaScript,并且还要掌握各种浏览器之间在设计细节上的不同。然而没有哪些工具能够简化这些应用程序的设计和开发。最后,调试和测试这些应用程序会变得异常困难。
  微软致力于简化Ajax风格Web应用的开发,并提供丰富的、可交互的和个性化的用户体验。开发者可以对客户端脚本不甚了解;但他们可以无缝地将浏览器UI与他们编写的其他应用无缝地集成在一起,并且他们可以很容易地开发和调试这些应用程序。
  出于这一目的,微软启动了一个新的项目,研发代号为“Atlas”。同时,微软还启动了一个站点来持续更新其核心进展和示例,并围绕它建立一个活跃的社区。在9月份的PDC大会上,开发者可以看到Atlas的技术预览版。
  以下是Atlas所拥有的特性。

  Atlas客户端脚本框架
  Atlas客户端脚本框架是可扩展的、100%面向对象的JavaScript客户端脚本框架,允许开发者很容易地构建拥有丰富的UI功能并且可以连接Web Services的Ajax风格浏览器应用程序。使用Atlas,开发者可以使用DHTML、JavaScript和XMLHTTP来编写Web应用程序,而无须掌握这些技术的细节。
  Atlas客户端脚本框架可以在所有的现代浏览器上运行,不论使用的是什么Web服务器。它还完全不需要安装,只要在页面中引用正确的脚本文件即可。
  Atlas客户端脚本框架包含下列组件:
  l 一个可扩展的核心框架,其中为JavaScript添加了很多新特性,如生存期管理、继承、多播事件处理器和接口
  l 一个基础类库,提供了通用特性,如丰富的字符串操作功能、计时器和运行任务等
  l 一个UI框架,可以跨浏览器实现HTML的动态行为
  l 一个网络栈,用于简化对服务器的连接和对Web Services的访问
  l 一组具有丰富UI功能的控件,如自动完成文本框、弹出面板、动画控件和拖放
  l 一个浏览器兼容的层(Layer),用于在不同浏览器中定位不同的脚本行为

  Atlas的ASP.NET服务器控件
  对于ASP.NET应用程序,微软专门设计了一组Ajax风格的服务器控件,并且加强了现有的ASP.NET页面框架和控件,以便支持Atlas客户端脚本框架。
  ASP.NET 2.0中有一项称作异步客户端回调(Asynchronous Client Callbacks)的新特性,使得构建从服务器上更新内容时不会引发页面中断的ASP.NET页面变得很容易。异步客户端回调包装了XMLHTTP,能够在很多浏览器上工作。ASP.NET本身就包括了很多使用回调的控件,包括具有客户端分页和排序功能的GridView和DetalsView控件,以及TreeView控件的虚拟列表支持。
  Atlas客户端脚本框架将完全支持ASP.NET 2.0回调,但微软希望在今后进一步增强浏览器和服务器之间的集成性。例如,你可以将Atlas客户端控件的数据绑定并指定为服务器上的ASP.NET数据源控件,并且可以从客户端异步地控制Web页面的个性化特征。

  ASP.NET Web Services集成
  和任何客户端应用程序一样,一个Ajax风格的Web应用程序通常也需要访问Web服务器的一些功能。Atlas应用程序连接服务器的模型和其他平台类似,都是使用Web Services来实现。
  通过ASP.NET Web Services集成,Atlas应用程序将可以在任何支持XMLHTTP的浏览器上通过Atlas客户端用本框架来直接访问任何宿主了ASP.NET的asmx或Indigo服务。该框架将会自动处理、代理和脚本到对象、对象到脚本的序列化问题。通过使用Web Services集成,开发者可以使用单一的编程模型来编写Web Services,并且在任何应用程序中使用它们,不论是基于浏览器的站点上还是智能客户端应用程序中。

  Atlas的ASP.NET构建块
  在ASP.NET 2.0中,微软构建了一组丰富的构建块服务(Building Block Services),这使得构建强大、个性化的Web应用程序变得不可思议的简单。这些构建块极大地降低了在开发通用的Web应用程序过程中需要编写的代码数量,比如管理用户、通过角色验证用户和存储用户的个性化设置信息等。
  使用Atlas,我们可以在任何浏览器上的任何客户端应用程序中向访问Web Services那样访问这些功能。例如,如果你正在开发一个站点来显示用户的TO-DO项目,你可以使用ASP.NET的Profile服务来将他们存放在服务器上的用户自定义配置文件中。这样,即使用户从一台机器转移到另一台机器上,也同样可以访问这些项目。
  微软将提供的服务包括(全部是基于ASP.NET 2.0的):
  l Profile:在服务器上存放每个用户特有的数据
  l UI个性化:在服务器上存放个性化的UI设置信息
  l 验证:验证用户
  l 角色:基于用户的角色验证用户任务和提供不同的UI
  由于这些构建块是基于服务器的,开发者需要对他们应用和其他站点一样的安全模型。这些服务不需要客户端下载任何东西——只要在浏览器中引用脚本代理即可。
  所有的ASP.NET 2.0构建块服务都是可插拔的,这使用一种通用的提供者(Provider)模型可扩展模式在后台实现。微软提供的内建提供程序允许开发使用SQL Server数据库或Active Directory作为存储容器,开发者也可以很容易地插接自己的提供程序。例如,你可能希望使用集群而不是数据库服务器来存放用户的配置文件,这时,你只需将你的提供程序插接进来即可——这一切都由开发者来决定。

  客户端构建块服务
  除了DHTML、JScript和XMLHTTP,微软还提供了一组附加的服务来加强客户端的功能,并提供增强的体验。
  对于这样的服务,本地浏览器缓存就是一个很好的例子。当启用了本地浏览器缓存时,Web站点就可以将内容存储到缓存中,并在需要的时候很快地取出。但浏览器并未提供向缓存中存放数据的API,而且象Google Map或OWA这样的应用程序不得不通过很多工作产生一个唯一的URL,才能使浏览器缓存它。在Atlas中,微软提供了可编程的本地存储/缓存,因此应用程序可以很方便、有效并且安全地在本地缓存数据。
  同其它应用程序的集成是检验Web体验是否丰富的另一个新的标准。例如,当一个用户浏览一个拍卖网站并对一件商品出价时,他可能想随时知道这个拍卖什么时候结束,但他如何才能将这个事件添加到个人的日历程序中?Atlas带来了一系列客户端构建块服务,当用户选择“添加到日历”时,浏览器将调用接驳点来获取日历数据,并将其传递到本地的日历程序中。此时页面上无须下载或运行任何特殊的代码或执行任何初始化动作,因此,这比ActiveX要安全得多。

  下一步
  随着我们的技术进展,还会发生很多事情。我们现在已经开始研发、开发和调试工具的下一个版本了,因此,我们将很快为这些类型的丰富Web应用程序提供更加伟大的开发体验。
  您可能会问的一个问题是:Atlas如何在Avalon和智能客户端上使用?
  我们可以看到,Atlas是编写丰富的、可交互的和个性
化的Web浏览器应用程序的最好方式,而Avalon是微软的下一代表现层模型,可以在Windows平台上提供最丰富的用户体验。Avalon将使用最新的媒体集成功能和硬件加速设备,提供卓越的视觉体验。Avalon将带来超越浏览器的体验。
  当然,当你构建Avalon应用程序的时候,你依然可以重用ASP.NET和Atlas中的编程模型。例如,Avalon客户端上依然可以使用ASP.NET构建块服务和客户端构建块服务。这种模型可以使你平滑地过渡到下一代应用程序。

  众所周知,异步交互、JavaScript脚本和XML封装数据是AJAX的三大特征。其实,在实际应用中,不需要牢牢套死这三条大律,在我看来,AJAX - X,即去掉用XML封装数据,也不失为一种好的设计思路,如果应用恰当,更显轻盈步伐和巧妙思路。

  一般读取AJAX返回的XML结构的数据时使用XMLHttp的responseXML对象属性,同时,XMLHttp也提供了另外一个属性,即ResponseText,通过这个属性,XMLHttp可以接受来自服务器的文本结构的字符串信息。去掉XML的AJAX可以使用ResponseText这个对象属性,很灵活的操控返回数据的格式,可以自定义格式,比如我通常喜欢用c语言的那种文件流方式定义返回的字符串结构,有文件头和具体的文件信息实体,文件头分为状态信息以及文件字符长度,我摒弃了文件字符长度的定义,规定死接受的ResponseTex字符串中的第一位为状态码,比如设定常量值0表示一起正常,非0的数字表示不正常,甚至有错误等。如果有非0值,程序自动取第二位起到257位(长度为256)的字符串组成为状态信息,从258位开始到末尾的字符串就是服务器返回的正常结果信息。
substring(0,1)取状态码
substring(1,256)取服务器错误信息(错误信息不够256位用空格补齐,取到数据后进行Trim处理)
substring(256,末尾)取服务器返回的数据信息
三次substring即完成了一个简单但完整的交互工作。比起XML解析组件来说要快的多。

  用ResponseText比封装为XML处理数据快和简单是一个原因,另一个原因是可操控性更大更灵活,打开Google Suggest,在搜索框输入字符可以给你给出拼写提示,Suggest就是应用了AJAX技术,不过它在从服务器返回数据时并没有使用XML封装,也没有自定义ResponseText格式,而是直接将返回代码组织成js脚本,通过浏览器返回后直接执行,如eval(XMLHttp.ResponseText)这样的方式进行执行,http://www.google.com/complete/search?hl=en&js=true&qu=ajax 通过这个链接你可以看到Suggest利用AJAX得到的返回数据,此页面是在Google Suggest的搜索框中输入"AJAX"后得系统动态返回的数据。
sendRPCDone(frameElement, "ajax", new Array("ajax", "ajax amsterdam", "ajax fc", "ajax ontario", "ajax grips", "ajax football club", "ajax public library", "ajax football", "ajax soccer", "ajax pickering transit"), new Array("3,840,000 results", "502,000 results", "710,000 results", "275,000 results", "8,860 results", "573,000 results", "40,500 results", "454,000 results", "437,000 results", "10,700 results"), new Array("")); 浏览器段拿到这段代码后直接eval就可以了,至于sendRPCDone这个函数,那当然得实现定义后并装载到页面中啦。XMLHttp这个名字以XML开头,让很多人禁锢了思想和创意,完全抛弃X,你也可以做出纯AJAX的实例来。

  当然,对于大型系统来讲,为了保持数据接口的一致和整齐,还是用XML来传递更严谨更统一点,听说微软已经发起了重写XML Parse组件的号召,估计下一个版本的XMLHttp还是DOMParser还是MSXML2.DOMDocument都会大大提高效率,减少资源占用的。

一、AJAX最值得称赞的是异步交互,而不是无刷新
  很多人都看好AJAX无刷新的技术,以至于认同AJAX就是用来做无刷新的。这个认识是错误的,什么是无刷新?无刷新就是页面无需重载,那什么又是异步交互?异步交互就是一个简单的多线程,当你在一个blog里看文章时,同时也可以利用AJAX进行无刷新的回复提交,看起来虽然也是无刷新,但这里最重要的是异步,即你能一边看文章,一边又能向服务器提交你的回复信息,利用好这个异步,才能算是掌握了AJAX的精髓。很多场合,无刷新是呈现给用户的视觉体验,而异步交互却是默默无闻的工作在台后,这种情况导致大多数人的错误理解了AJAX的权重之分。
二、推荐在WEB上轻量级的应用AJAX

http://photos22.flickr.com/33335029_bb2b7d5a18_o.png
http://photos22.flickr.com/33335000_e87bb720cc_o.png
http://photos23.flickr.com/33335001_99b5084c07_o.png
  著名的图片存储网站Flickr利用AJAX可谓出神入化。我之所以这么说,是因为我认为Flickr深知AJAX的利与弊,并且牢牢抓住自己的网站的功能特点,并没有因AJAX而AJAX,而是架驱于技术至上,让AJAX融于网站之中,为网站提供了更好的功能服务。如Flickr中无论是在多图列表页面还是单图详细页面,修改图片的标题和描述都应用了AJAX技术,让用户无需跳转到单独的编辑页面中,编辑后单击保存,亦使用了异步交互的方式进行数据提交,这时,页面上显示一个Loading字符外,其他部分不受任何影响,可谓太贴心的服务。

http://photos23.flickr.com/33335047_3deafb867f_o.png
  再如基于Tag的专业Blog搜索服务商Technorati也使用了AJAX,在搜索某个Tag时,页面主导部分会即刻显示所有Technorati数据库中查询到的数据条目,在左边的侧边栏上会显示两个Loading图标,过一会儿,这两个Loading就会显示具体的内容了,显示的是此Tag相关的Flickr的图片和书签服务网站(Furl&del.icio.us)的链接,因为这两部分内容是取自其他网站,如果由服务器统一先取得数据在一同显示到页面时,会受到网速影响而变慢,通过AJAX的异步交互方式首先立即显示本地数据,然后由客户端去和Flickr、Furl、del.icio.us打交道分别取得它们的数据,即节约了流量带宽又不影响用户访问速度,可谓高明。

  通过以上两个国外成功应用AJAX的网站,我们发现他们都使用的是轻量级的AJAX,就是那种交互简单,数据较少的操作。这也符合AJAX的本意,虽然像www.backbase.combindows都在RIA上有惊人的表现能力,但是速度慢、搜索引擎支持不好、开发难度大等毛病还是无法让用户满意的,请记住:AJAX的最终目的是为了提高用户体
验,为了方便用户交互,而不是因技术而技术的。

三、AJAX的MVC架构设计
  很多人认为在成熟的框架中应用AJAX会破坏框架的完整性,比较常见的说法有三层架构的WEB应用中破坏MVC模式,其实不然。MVC的理论我就不多说了,经典的那三个层、五条线大家都很熟悉,在WEB应用中,因为浏览器/服务器固有的这种请求/响应的断开式网络通讯模式,决定了在Model层无法实现主动向View层发出数据更新事件,所以一般常见的成熟MVC框架中都将经典MVC理论稍作修改:由Model层处理完业务后通知Control层,然后由Control层承担向View发送数据更新的义务。但是AJAX天生具有监听功能,AJAX实现异步响应的那个OnReadyStateChange事件就具有在客户端程序中才会有的事件监听功能。现在想来,利用AJAX实现的MVC模型有如下图这样:
http://photos22.flickr.com/33351292_f29b63cf6b_o.png
理想化的设计如下所示:
三层对应的文件对象:view.jsp(视图)、action.do(控制器)、model.java(模型)
view.jsp是用户看到的界面,并通过内置的AJAX对象异步方式给action.do发送请求,AJAX.OnReadyStateChange开始监听
action.do接收到view.jsp发过来的请求(GET或者POST方式),通过Request判断后发送给相应的业务/数据模型model.java
model.java开始执行业务操作,执行完毕直接给view.jsp页面发送数据更新的通知,这个通知的消息有可能是XML封装的数据,也有可能是一段文本,甚至是一段HTML代码,当然,既然用MVC,不推荐有Model发送HTML,推荐还是用XML封装业务数据即可。
view.jsp页面中AJAX对象的OnReadyStateChange接收到了数据更新通知,根据实际情况用DOM进行页面呈现更新。
通过以上几步一气呵成,一个典型的基于MVC的三层交互就完成了。当然,熟悉WEB下的MVC框架的用户,如熟悉Struts的Java开发人员可能不习惯由Model层给View直接发送数据更新通知,那咱们也可以转变一下,Model层业务处理完毕将更新通知先发送给Control,由Control去通知View亦可。

2005-9-27
解决了读取不同rss格式兼容性及不同编码兼容性问题

2005-9-26
解决了XMLHTTP无法获取需要SSL安全证书页面(https)的问题

2005-9-23
新闻系统升级,全面支持IE、Firefox、Opera和Safari浏览器。
http://www.felixwoo.com/news.asp
看来Mozilla内核对代码书写规范的要求更高啊

新做了一个RSS新闻阅读系统,地址http://www.felixwoo.com/news.asp ,也可通过页面顶端导航菜单访问。

特点:
1、实时读取新浪、百度和新华等新闻RSS源,新闻数据与门户网站新闻同步更新
2、使用JS+XMLHTTP实现页面无刷新数据更新

后续开发计划:
1、每个用户可以自行定制RSS源
2、使用缓存技术加快浏览速度
3、开放源代码

Felix
2005.9.20

http://www.felixwoo.com/wp-content/uploads/attachments/200509/20_235125_newssample.jpg

京ICP备05053527号
经过29次查询历时0.415秒终于生成了此页面
Powered by WordPress & Designed by Felix © 2012