《ajax和xml借鉴最优秀的ajax应用程序.docx》由会员分享，可在线阅读，更多相关《ajax和xml借鉴最优秀的ajax应用程序.docx（13页珍藏版）》请在三一文库上搜索。
1、Google地图若是“最具阻碍力的Web应用程序”设有奥斯卡奖或金球奖，那么得奖者非 莫属。我 清楚地记得我的一些同事第一次看到Google地图时的反映：阅读器竟然能够完成这些任 务？在我的印象中，Google地图从头概念了用户对阅读器中的应用程序的期许，引领了一 场Web的运动。我不太确信这篇文章的读者是不是曾经利用过Google地图，但不管如何我仍是在图1中 展现一下那个站点。图1. Google地图的最新版2aLm7 .fGoogleKg Al4M ua f riA&wd g -Mas阴电 4C-MOO-:Y 研(% Xn力ancM, (4U) W1 KC-zEgrry Bu ttdin
2、g -V 1 露 Fsn FrwMC 5(”fKWWC一一； Forry BuMiftfiLfre Y 1rv4(坳，&tKM0. frarKMO SMrUitfwma9_SexchMUg阅读地图的操作很简单，只需点击和拖拽地图即可，就像是在纸制地图中操作一样。若是 您要寻觅线路，那么它们会以线条的形式出此刻地图中，屏幕可不能闪烁、地图也可不能移 动（除非需要如此做）。事实上，Google地图大部份功能的实现都不需要从头与效劳器交 互以获取一个新的HTML页面，Google地图诞生以后，Ajax和Dynamic月工吃这几个词语永久地刻入了第二次Web革命 的语言中。可是最让人兴奋地是，严格来讲
3、Google地图并非是运行在Ajax之上（若是把儿祝m概念为利用XMLHTTP对象发送和接收请求）。Google地图动态地利用生成的标记与效劳器来回传递数据。提早概念XMLHHP对象是一个技术。可是Google地图什么缘故不利用Ajax呢？我不能代表Google的工程师发言，可是我 感觉Google地图的设计灵感来自于JavaScript的“mashup能力”0Mashup在文章开头,我谈到了对用户社区的支持。我承认,这有点儿官腔，但我以为这很重要/ashup 是支持用户社区的全然。mashup的意思确实是把某个站点的功能与另一个站点的功能归并 到一路，然后创建出加倍有趣的一些东西。Mashu
4、p的一个专门好的例子确实是从 Craigslist获取衡宇出租列表并利用Google地图反映其位置的站点。是Google地图mashup的另一个例子，它利用Google地图让赛跑者（或任何其他人） 能计算出地图上各线路的距离。图2显示那个功能.图 2. Map My Run 界面 O 0WMMt外,m -routH KmihwIUm此处，我在左窗格的输入字段中输入起点。然后利用鼠标指定跑步的通过点。当我单击鼠标 时，左窗格立刻动态地更新显示出距离。我能够放大地图取得更详细的内容或切换到卫星模 式（若是线路超过了视图）,所有繁重的地图绘制工作都是由Google地图完成的。MapMyRun站点只是
5、在地图的表层添 加了一些JavaScript代码，用于处置鼠标点击和计算距离。如此，当我要成功地构建Web应用程序时能够从Google地图中取得哪些灵感呢？ ？ 利用阅读器：Google地图大量地利用了现在阅读器的动态性。利用这些阅读器利 用户取得令人赞扬的体验，在体验顶用户会对阅读器能完成的功能大为惊讶。 Ajax的纯度并非重要：只有少数人明白Google地图不是纯粹的Ajax应用程序。 可是谁会真的在意这点呢？ Google地图为用户提供了超级优秀的功能。程序中未利 用XMLHTTP并无什么关系。不要太专注于一些特定的技术方式了。 JavaScript mashup：能够通过JavaScr
6、ipt编码把某一站点的功能嵌入另一个站点 中，这一功能极为令人赞赏。它可提供viral edge,将您带入实现某种特定功能的源 代码。TaDaListGoogle地图为Web应用程序设置了很高的门坎。可是能够利用Ajax在应用程序中快速 添加大量的数值。确实是这种数值的一个例子。TaDaList是一个超级简单而且免费的 to-do列表治理程序。为了演示那个站点，我创建了一个帐户和游泳列表，用来提示我继续 完成游泳训练的各类事项。列表如图3所示。图3.游泳列表QiEHMl Mitt TIMS lite 中 I .一SwimmingBuy new swimsuit r Swim a mileYOU
7、 Cin MS. U nclM of chaE3 M.f MY.，.9 drill,ttfWnfmaamQ Owch MEScanQLMi若是我想要添加购买护目镜的事件，即能够在文本字段中填写该事件然后单击Addt。list。该项内容立刻被添加到列表中相应的位置，而不需要刷新页面，显示界面如图4所示，图 4.添加 “Buy New Goggles” 以后OO A这看上去没什么打不了的，而且利用Ajax实现那个功能也不难，可是最终用户却会感到这 像是从桌而应用程序取得的结果。请注意，TaDaList是在Rails框架之上编写的，这点很重要。事实上，那个程序是人们学 习Rails时利用到的一个演示
8、应用程序。而且Rails框架使这种类型的Ajax应用程序的 开发极为轻松。为了演示，我利用Rails花了几分钟时刻编写了一个简化版的TaDaList应用程序。to-do 项的列表如图5所示。图5. to-do项的列表Mozilla Firefox0 htt&J/l&eainost: P |G Coogle Q Bikmarkc* 3 Buy goggles Buy swim suk |&uy earplugs|Done然后键入Buy earplugs并单击Add。该项内容显现列表中，而且而不需要刷新页而，显示 界面如图6所示。图6.添加“Buy earplugs”以后 e MglE FiRfQ
9、XoM* 婷 - Jhnp/locant: w w 一Ql 8okmarki v 热 飞 田 Buy gogglesBuy swim suitjBuy caiphigs|8ur earplugsAdd |Done/ O Adblock为了实现那个功能，我创建了一个小型的数据库用来保留to-do项。然后再创建一个Rails 操纵器，如清单1所示。清单1.class TodoController Applicationcontrollerdef listtasks = (:all)enddef addtask =params.:task.:nametasks = (:all)endend清单1中的
10、代码利用了两个方式。list。方式用于显示页而。add。方式用于在列表中添 加新的项目，然后再在HTML中返回列表。listO方式的RHTML如清单2所示。清单2.div id=results” :action = add , ：update = results % 那个页而利用form.remote.tag把简单表单的内容提交到操纵器中的add()方式。add() 方式把to-do项添加到表中，然后为取得的div标记返回新的内容。这一功能的代码如 清单3所示，清单3.那么，我能够从TaDaLists中学到些什么呢？第一，少量Ajax应用程序会花大力气使Web应用程序感觉更像是桌而应用程序。第
11、二，选择利用Web框架一一专门是那些包括 Ajax的框架一一能够使这种类型的工作相当简单。Campfire是TaDaLists的同伴，它们都是由相同的工作组开发的().在本例中，应用程序将会模拟 一个虚拟的campfire站点，它托管一个在线谈天室，使远程团队能够彼此谈天，并方便地 传送文件。我设置了一个试用帐号，并进行了谈天和上传文件的操作。结果如图7所示。图7.为远程团队设计的虚拟campfireMyRoomM2,flk、Qgf OMkiwnrr)gKr (afrofrf no* arrurawmWSdCuetl itrvti ” an ，tW g GSM 2H4*显示界面的左侧是一个简单
12、的谈天窗口，在那个窗口顶用户能够随时提交新的消息。界面的 右边显示了在线用户，还有一个区域用于上传文件。文件的上传是当场完成的，适用JavaScript代码来监控文件上传进程。这意味着，咱们能 够在会话的同时添加文件和图像，而可不能因为要移到另一个不同的页面而离开会话窗口。从Campfire中能够学到一些有趣的东西。第一，它斗胆地替换了用户在桌而应用程序中经 常使用到的谈天效劳的类型。在集体会议的上下文中托管谈天的,并以此替换了原先的效劳, 同时构建了一个系统，那个系统和桌面应用程序比起来特性相当局限，可是因为它独到地利 用了会议的上下文,因此显得加倍有价值。第二，一些通常会造成页而刷新的操作
13、，如上传一个文件，都取得了处置，从而再也不需要 加载页面。这能够利用户的注意力维持在当前的任务上，而且增强了桌面应用程序的感觉。YourMinis若是说一些站点少量地利用了 Web ,那么 那么恰恰相反，它足以成为Web上的小部件/ 小工具站点。利用它，咱们能够创建和定制载有各类小部件（或是小二翼，若是您更喜爱微 软的行业用语）的页面。页面的功能相当于操纵板，它能以引人注意的方式及时地提供信息.图8中显示了在页面中添加一个 电影小部件后的站点。图8,显示电影评论的YourMinis。色 Q- 7 awi 1卅mZ* QhwnORottentomatoes是一个电影评论站点。它依据数百个电影评论
14、为电影给定一个总分并提供 了一个百分比。分数等于或高于60%的电影被以为是新鲜的（也确实是好的意思、）.在本 例中，我选择查看Bridge To Terebithia,只需提供我的邮政编码即能够马上在同一个部 件中取得该电影分数，图9显示了那个功能。图9.显示本地电影分数的电影小部件竹 yrrrwMsxoM - w*VM nALCS ” O. snpt Uf*.Z*Uri * t fn?_4M, *K-yer dc12 4Tf4v.|e VE 火(L.IWgru, Mtv f”* Qice 2 x ecpHB03jl)O，XbScAMxr iVTev NKWTm ftrt AM： 一ramgc
15、 * theMnw it s*ow,*t - *y v. K UUI 施” Gw ii aMtiJCM wt. KT frtc*r*$*. i - j nijrt4We除站点之外，YourMinis还有一个Firefox扩展，用于在用户阅读页面时监视阅读器。当 它发觉一些YourMinis有可能利用的东西，比如RSS feed或MP3,它会弹出提示告知用 户这些资源是可用的。与阅读器的这种集成相对来讲比较简单，利用这种方式把站点集成到 用户的桌面中是很不错的选择。在Web 方面，从YourMinis中还能够学到一些东西。第一minis和框架是在Macromedia Flash中实现的。从用户的
16、视角看，这算不上真正的问题。这又回到了另一个问题，即选择 一个特定的技术并无最终产生的用户利益重要。他们鼓舞开发人员站在用户社区的角度试探，为整个用户社区奉献自己的页面设计。这是与 用户社区协作的另一种表现形式，它将利用户社区能以咱们从未想到过的方式推动站点的进 展。Lightbox尽管Lightbox超级具体站点，可是我想指出Lightbox技术在现今许多站点中都发挥了专 门大的作用。lightbox是用户界而技术与一些Ajax技术的结合体。Web页面的例子如图 10所示。图 10. Lightbox JS 主页3O若是单击某个图像，那么整个页而会变暗，同时一个方框出此刻页而中间，显示放大后
17、的所 选图片。图11显示那个功能。图1L单击图像后lightbox显现这种技术具有很多优势。它能够把用户的注意力从页面的其他区域到转移选择的图片。因为 用户能够单击Close返回正常的阅读页而，因此这种技术能够为用户显示很多详细内容而 又没必要离开当前页面。这种lightbox技术不仅适用于图像或视频，也适用于文本内容。我常常访问的一个站点确 实是利用lightbox技术在主页上适合的区域显示了每一篇文章的概要。可是用户只有在单 击了 lightbox链接(通过Ajax)以后，页面才会加载该篇文章的概要。因此，用户能够 在一个页面中同时阅读几篇文章的概要内容，而且构建大量的页面会使效劳的带宽不
18、够，尽 管用户并非会同时访问所有的页面。这于关于运算机和用户来讲都是最好的。一些开源的JavaScript库可用于开发lightbox,上图所显示的是。其他Web站点在撰写这篇文章时，我访问了大量的Web站点。大多数站点都没有应用上述技术一一尽 管本文所有的技术都值得应用。Google有一些尤其超卓的内容。和电子表格(Spreadsheets )演示了在阅读器中利用WYSIWYG编辑能够完成哪些任务。演示了若 是应用RSS feed并提供了一个解决方案利用户在任何地址都能够查看新闻。利用了 Ajax、JavaScriptx DHTML 和 Google 地图。另一个应用领域确实是Google表
19、格处置软件能够移动访问。他们所有的效劳都有简练版, 能够在和其他小型设置中良好地运行。利用一个Googel帐号，您能够在Web上定制自己 的主页，同时还能够为移动定制一个主页。Google并非是惟一利用Ajax制造惊人之举的。确实是一个超卓的例子。它是一个托管的 谈天应用程序，运行于Ajax之上，而且拥有一个简单但雅致的界面。是一个日历应用程 序，它很巧妙地利用了 DHTML来编辑日历，并利用Ajax更新效劳器中的约会、联系方式 和相关信息。参考资料学习 ：进一步学习用于任何地址之间即时消息传送的托管谈天应用程序 ：利用Google的地图绘制应用程序在各地址之间标示线路、找寻企业和进行更多 操作。 ：查阅Google的支持Ajax电子邮件应用程序，这些应用程序内建有Google搜 索技术和兆字节存储技术。 ： 了解来自37signals的群体谈天和文件互换应用程序 :查阅Ajax日历应用程序。 ：利用那个作者最喜爱的Google地图mashup之一标示跑步线路并取得准确的距 离。 ：看看来自37signals的一个共享to-do列表系统能够完成哪些任务。 ：在那个小部件/小工具站点上。创建您自己的操纵板，奉献您的小部件。 ：紧跟Ajax和前端小部件进展的步伐，利用那个超级有效的资源。