AJAX企业级开发(Ajax企业级应用开发名著)
基本信息
- 原书名: Enterprise AJAX: Strategies for Building High Performance Web Applications
- 原出版社: Prentice Hall PTR
- 作者: (加)David Johnson Alexei White Andre Charland [作译者介绍]
- 译者: 张祖良 荣浩 高冰
- 丛书名: 图灵程序设计丛书.Web开发系列
- 出版社:人民邮电出版社
- ISBN:9787115186065
- 上架时间:2008-9-11
- 出版日期:2008 年10月
- 开本:16开
- 页码:284
- 版次:1-1
- 所属分类:
计算机 > 软件与程序设计 > AJAX
计算机 > 软件工程及软件方法学 > 综合
编辑推荐
1.Ajax企业级应用开发名著.
2.大量来之不易的专家建议和最佳实践..
3.带你达到全新的高度...
推荐阅读
内容简介回到顶部↑
作译者回到顶部↑
本书提供作译者介绍
本书的作者均来自著名的企业级用户体验组件和解决方案公司Nitobi。Nitobi是OpenAjax联盟的活跃成员,具有丰富的企业级Web开发经验,多年来,为时代华纳、美国国家航空航天局、思科、宝马、宜家、朗讯、西门子等跨国公司和大型机构提供企业级解决方案,其中不乏关键任务和要求严苛的应用。.
Dave Johnson Nitobi公司的CTO和创始人之一,也是业界知名的Web技术专家,长期从事高性能AJAX组件的架构和构建。..
Alexei White Nitobi公司组件工具产品经理,是公司多个重要产品的主要架构师。
<< 查看详细
Dave Johnson Nitobi公司的CTO和创始人之一,也是业界知名的Web技术专家,长期从事高性能AJAX组件的架构和构建。..
Alexei White Nitobi公司组件工具产品经理,是公司多个重要产品的主要架构师。
<< 查看详细
目录回到顶部↑
第1章 ajax和ria
1.1 变化中的web
1.1.1 传统web应用之痛
1.1.2 ajax止痛药
1.2 企业中的ajax
1.3 采用ajax的驱动因素
1.3.1 可用性
1.3.2 网络利用率
1.3.3 以数据为中心
1.3.4 渐增的技巧、工具和技术升级
1.3.5 服务器中立
1.4 关于应用
1.4.1 ajax技术
1.4.2 编程模式
1.5 ajax的替换技术
1.5.1 xul
1.5.2 xaml
1.5.3 java applet和web start
1.5.4 adobe flash、flex和apollo
1.5.5 openlaszlo
1.1 变化中的web
1.1.1 传统web应用之痛
1.1.2 ajax止痛药
1.2 企业中的ajax
1.3 采用ajax的驱动因素
1.3.1 可用性
1.3.2 网络利用率
1.3.3 以数据为中心
1.3.4 渐增的技巧、工具和技术升级
1.3.5 服务器中立
1.4 关于应用
1.4.1 ajax技术
1.4.2 编程模式
1.5 ajax的替换技术
1.5.1 xul
1.5.2 xaml
1.5.3 java applet和web start
1.5.4 adobe flash、flex和apollo
1.5.5 openlaszlo
前言回到顶部↑
也许你和我们所遇见的许多有才华的开发者一样,对AJAX技术以及如何使用这项技术来改善Web应用很感兴趣,你可能已经初步上网做了一番研究,访问过Ajaxian.com网站或者阅读了关于AJAX开发的入门图书。当然,你也可能属于人数更多的另一类有才华的开发者群体,想要走进AJAX世界,开始实际使用这项技术。无论是哪种情况,我们都做了考虑。令人高兴的是,开发者社区终于开始真正理解AJAX了。其实并没有那么难。.
我们决定编写本书是因为我们对于现状很失望:关于AJAX开发更为高级的主题的信息太少了。主要原因可能是讲述这方面主题的图书仍然还在“编写”中,而且,尽管AJAX进入主流应用已有几年时间,但它才刚刚开始进入企业级软件开发的领地。我们希望本书能成为企业级开发者感兴趣的信息资源。为此,我们尝试把目前的开发方法与JavaScript以及其他组成AJAX的技术结合起来,并以所有企业级开发者都熟悉和易于理解的方式讲述。
为什么需要本书
本书大部分内容源自多年来我们在Nitobi公司(www.nitobi.com)构建AJAX应用和用户界面组件的第一手经验。这代表了我们在开发过程中的所知所得,对于那些希望把AJAX引入到开发项目中的开发者来说,这应该是很有用的资源。如果你想更加精通JavaScript开发,想解决AJAX怪癖 和性能问题,想从头设计可用性好的Web软件,那么本书将成为绝佳的资源。
我们有足够的时间来讨论如何以一种Java或者C#开发者熟悉的方式来编写JavaScript代码,并能使你快速上手。在这个过程中,我们会通过一些耳熟能详的软件设计模式来描述AJAX开发,并包含了AJAX开发过程中最热门的话题,例如安全性和离线存储。同时,不仅仅通过代码的优化,而且还通过利用因特网基础设施支柱(例如缓存),给出了构建高性能AJAX应用的真实解决方案。
本书采用了与其他AJAX图书略微不同的方法,讨论范围较为全面,其中包括关于编程方面的大量建议,以及应用可用性、可访问性和国际化等问题的丰富讨论。本书还包含了一个框架,用于AJAX开发项目中的风险评估。本书还特别介绍了在真实企业应用中使用AJAX的一些开发者,看看从他们的经验中能够学到些什么。
本书读者
本书主要面向中高级服务器端(Java、面向对象PHP或者ASP.NET)开发者。书中的很多概念来自Erich Gamma、Richard Helm、Ralph Johnson和John Vlissides所著《设计模式——可复用面向对象软件基础》一书提出的那些经过时间考验的软件工程模式。因为整本书都应用了这些思想,所以读者如果对软件设计模式有一个基本的理解,或者至少对学习这方面更多的知识有兴趣,会很有帮助。我们希望以一种常见的方式,即使用模式来描述AJAX,从而帮助更多有经验的开发者更容易地理解其中的概念和思想。
也许比理解模式更重要的是,你至少应该掌握JavaScript、HTML和CSS的基础知识,甚至是理解XML、XSLT或者JSON,这些知识也很有用,但不是必需的。除此之外,我们希望你拥有以面向对象的语言,如Java、C#或PHP等进行服务器端编程的经验。
阅读完本书之后,开发者应该熟悉组成AJAX的系列技术,以及面向对象JavaScript的开发。同时,你将很好地了解有助于开发应用的工具,以及诸如安全、可用性和可访问性等各种AJAX问题。
本书内容
第1章涵盖了AJAX应用的基本要素,并阐明了这些要素是如何组合在一起的。同时讨论了Web应用的演进,以及AJAX成为基于Web应用首选解决方案的主要原因。
第2章研究组成AJAX的各种技术。本章包含了关于使用正确的方法来编写JavaScript的重要信息,特别关注面向对象 JavaScript的开发、DOM、CSS、事件和XMLHttprequest对象,同时还包括了从客户端到服务器端数据传输相关的问题。
第3章是基于第2章内容的扩展,为理解主流浏览器的差异奠定了基础。具备了这些知识后,我们介绍了如何使用MVC(模型—视图—控制器,Model-View-Controller)模式来构建AJAX应用。特别是,你将明白如何在JavaScript中编写客户端模型,如何从数据生成 HTML视图,如何使用依赖发布—订阅(publish-subscribe)事件系统的基于JavaScipt的控制器来连接视图和模型。
第4章准备介绍如何构建用于Web应用的AJAX用户界面组件。特别地,我们分析了命令式和声明式方法的不同点,给出了一个构建基于AJAX的数据网格组件完整示例,同时还介绍了声明式方法的一些限制。..
然后,本书给出了AJAX开发一些总体的目标和问题。第5章从应用设计到测试,再到部署,具体分析贯穿软件开发生命周期中AJAX特有的问题。阅读完本章之后,你将很好地把握各种AJAX性能问题以及对任意的AJAX开发项目自始至终都有用的许多工具。
第6章为读者介绍了AJAX开发过程中各种架构问题。其中包括异步消息通信模式的研究,以及与服务器通信的方法的研究,例如服务器推送(push)、缓存、负载和离线AJAX。虽然其中很多问题在任何基于Web的应用上都很常见,但这里我们将从一个独特的AJAX视角来讨论这些问题。
在第6章的基础之上,第7章讨论了AJAX如何在Web浏览器中使用Web服务来适应面向服务的架构,以及在构建AJAX Web应用时可能出现的各种安全问题。
第8章是本书的最后一部分内容的开始,讨论了可用性方面的一些问题,尤其是如何为普通的用户把这些讨论应用到AJAX应用的构建中。本章介绍了人们所关注的常见问题的完整解决方案,例如后退按钮问题、处理可访问性以及国际化的方法。
第9章着手探索一些强大的AJAX用户界面模式,包括即时编辑(in-place editing)、主从复合结构(master-detail)、实时表单以及拖拽等。构建大多数的AJAX应用时,有许多核心的用户界面设计模式是每个开发者都应该了解的。
我们决定编写本书是因为我们对于现状很失望:关于AJAX开发更为高级的主题的信息太少了。主要原因可能是讲述这方面主题的图书仍然还在“编写”中,而且,尽管AJAX进入主流应用已有几年时间,但它才刚刚开始进入企业级软件开发的领地。我们希望本书能成为企业级开发者感兴趣的信息资源。为此,我们尝试把目前的开发方法与JavaScript以及其他组成AJAX的技术结合起来,并以所有企业级开发者都熟悉和易于理解的方式讲述。
为什么需要本书
本书大部分内容源自多年来我们在Nitobi公司(www.nitobi.com)构建AJAX应用和用户界面组件的第一手经验。这代表了我们在开发过程中的所知所得,对于那些希望把AJAX引入到开发项目中的开发者来说,这应该是很有用的资源。如果你想更加精通JavaScript开发,想解决AJAX怪癖 和性能问题,想从头设计可用性好的Web软件,那么本书将成为绝佳的资源。
我们有足够的时间来讨论如何以一种Java或者C#开发者熟悉的方式来编写JavaScript代码,并能使你快速上手。在这个过程中,我们会通过一些耳熟能详的软件设计模式来描述AJAX开发,并包含了AJAX开发过程中最热门的话题,例如安全性和离线存储。同时,不仅仅通过代码的优化,而且还通过利用因特网基础设施支柱(例如缓存),给出了构建高性能AJAX应用的真实解决方案。
本书采用了与其他AJAX图书略微不同的方法,讨论范围较为全面,其中包括关于编程方面的大量建议,以及应用可用性、可访问性和国际化等问题的丰富讨论。本书还包含了一个框架,用于AJAX开发项目中的风险评估。本书还特别介绍了在真实企业应用中使用AJAX的一些开发者,看看从他们的经验中能够学到些什么。
本书读者
本书主要面向中高级服务器端(Java、面向对象PHP或者ASP.NET)开发者。书中的很多概念来自Erich Gamma、Richard Helm、Ralph Johnson和John Vlissides所著《设计模式——可复用面向对象软件基础》一书提出的那些经过时间考验的软件工程模式。因为整本书都应用了这些思想,所以读者如果对软件设计模式有一个基本的理解,或者至少对学习这方面更多的知识有兴趣,会很有帮助。我们希望以一种常见的方式,即使用模式来描述AJAX,从而帮助更多有经验的开发者更容易地理解其中的概念和思想。
也许比理解模式更重要的是,你至少应该掌握JavaScript、HTML和CSS的基础知识,甚至是理解XML、XSLT或者JSON,这些知识也很有用,但不是必需的。除此之外,我们希望你拥有以面向对象的语言,如Java、C#或PHP等进行服务器端编程的经验。
阅读完本书之后,开发者应该熟悉组成AJAX的系列技术,以及面向对象JavaScript的开发。同时,你将很好地了解有助于开发应用的工具,以及诸如安全、可用性和可访问性等各种AJAX问题。
本书内容
第1章涵盖了AJAX应用的基本要素,并阐明了这些要素是如何组合在一起的。同时讨论了Web应用的演进,以及AJAX成为基于Web应用首选解决方案的主要原因。
第2章研究组成AJAX的各种技术。本章包含了关于使用正确的方法来编写JavaScript的重要信息,特别关注面向对象 JavaScript的开发、DOM、CSS、事件和XMLHttprequest对象,同时还包括了从客户端到服务器端数据传输相关的问题。
第3章是基于第2章内容的扩展,为理解主流浏览器的差异奠定了基础。具备了这些知识后,我们介绍了如何使用MVC(模型—视图—控制器,Model-View-Controller)模式来构建AJAX应用。特别是,你将明白如何在JavaScript中编写客户端模型,如何从数据生成 HTML视图,如何使用依赖发布—订阅(publish-subscribe)事件系统的基于JavaScipt的控制器来连接视图和模型。
第4章准备介绍如何构建用于Web应用的AJAX用户界面组件。特别地,我们分析了命令式和声明式方法的不同点,给出了一个构建基于AJAX的数据网格组件完整示例,同时还介绍了声明式方法的一些限制。..
然后,本书给出了AJAX开发一些总体的目标和问题。第5章从应用设计到测试,再到部署,具体分析贯穿软件开发生命周期中AJAX特有的问题。阅读完本章之后,你将很好地把握各种AJAX性能问题以及对任意的AJAX开发项目自始至终都有用的许多工具。
第6章为读者介绍了AJAX开发过程中各种架构问题。其中包括异步消息通信模式的研究,以及与服务器通信的方法的研究,例如服务器推送(push)、缓存、负载和离线AJAX。虽然其中很多问题在任何基于Web的应用上都很常见,但这里我们将从一个独特的AJAX视角来讨论这些问题。
在第6章的基础之上,第7章讨论了AJAX如何在Web浏览器中使用Web服务来适应面向服务的架构,以及在构建AJAX Web应用时可能出现的各种安全问题。
第8章是本书的最后一部分内容的开始,讨论了可用性方面的一些问题,尤其是如何为普通的用户把这些讨论应用到AJAX应用的构建中。本章介绍了人们所关注的常见问题的完整解决方案,例如后退按钮问题、处理可访问性以及国际化的方法。
第9章着手探索一些强大的AJAX用户界面模式,包括即时编辑(in-place editing)、主从复合结构(master-detail)、实时表单以及拖拽等。构建大多数的AJAX应用时,有许多核心的用户界面设计模式是每个开发者都应该了解的。
媒体评论回到顶部↑
“本书中,三位高手和盘托出大量来之不易的专家建议和最佳实践,将使你大开眼界,充满信心地投入企业级Ajax开发。”
——Brent Ashley,JavaScript远程脚本库JSRS之父,Ajax技术先驱.
“我实在不知道还有谁比本书的作者更合适写关于AJAX企业级开发的书。对于全世界从事下一代Web应用的开发者来说,本书弥足珍贵。”
——Matt Mckenzie,Adobe公司软件开发经理...
——Brent Ashley,JavaScript远程脚本库JSRS之父,Ajax技术先驱.
“我实在不知道还有谁比本书的作者更合适写关于AJAX企业级开发的书。对于全世界从事下一代Web应用的开发者来说,本书弥足珍贵。”
——Matt Mckenzie,Adobe公司软件开发经理...
书摘回到顶部↑
第1章AJAX和RIA
1.1 变化中的Web
在20世纪90年代末期,微软首次在IE 5中引入了XIMLHttpRequest(XHR)对象,这个对象是AJAX功能所需的核心技术的一部分。同时,微软引进了0utlookWebAccess(OwA),OWA是一个让人印象相当深刻的AJAX界面,而且在技术上远远超出它所处的时代。当时的主要缺点是无法在其他浏览器中使用XHR对象,并且对于锁定微软的又一个工具或者平台,社区存在强烈的抵触情绪。通过XHR在主流开发中直到现在才被缓慢采用,可以证实这一事实。
伴随着在Firefox和Safari对XHR远程脚本的最终引入,以跨浏览器的方式构建富异步通信才成为了可能。这也暗示着xHR能够被部署到更多不同用户的机器上,而不会引入太多风险。当XHR、JavaScript、DHTML和CSS结合时,创建富客户端应用且没有Web应用所特有的令人厌烦的刷新才成为了一种可能。与稍后介绍的其他很多富客户端技术不同,AJAX基于各种浏览器和操作系统都支持的开发标准,事实上消除了对厂商锁定的担忧,而且提高了可移植性。
在传统应用中,一切都是围绕Web页面是作为静态视图出现在应用中的这一做法的,而应用又是完全基于web服务器的。用户唯一可能的交互是向Web表单输入数据或者是单击一个链接,这两种操作都导致了整个页面的刷新,而不管它是在CRM应用中更新一条完整的客户记录,还是在查看和编辑用户记录之间进行状态切换。在某些方面,传统的Web应用存在很多改进的空间——例如,当输入大量的数据时。同时,在很多情形下,传统的Web应用的确表现出色,例如搜索引擎或者文档储存库,长期以来都是传统Web应用成功的典范。此外,传统的web能力,例如HTTP协议和资源缓存,对于基于AJAX的应用而言也非常有用。
不同于流行的AJAx地图和Email应用,大多数的企业级Web应用围绕数据录入、数据编辑或者数据报表构建。最常见的数据录入应用包括一个数据列表,例如CRM应用中的客户记录或者销售信息,数据条目能够添加、删除或者编辑。下面让我们分析这样的一个情况,在传统Web应用和基于AJAX的Web应用中,当一位出色的销售人员被要求使用一个慢得让人痛苦的新在线CRM工具在销售过程中跟踪会议记录、客户联系信息和销售进展信息时,用户的交互是如何进行的。
1.1.1传统Web应用之痛
当推销员登录到应用时,他将面对一个包含了10个潜在客户记录列表的Web页面。对于大多数的传统Web应用,这类功能是通过使用静态的HTML[table]标签列出每条数据记录来实现的,列表附近是链接到编辑或者删除页面的按钮。销售人员现在想要基于一些新的信息更新记录。首要任务是找到需要更新的记录。如果在前10条记录中找不到,他将不得不进行搜索,通过翻页到下10条记录,在数据列表中导航查找,而且需要等待页面的刷新。找到这条记录后,用户单击编辑按钮。通过单击向服务器发送了一个请求。然后,一个包括许多表单字段的页面被发送给Web浏览器。大多数的表单字段是文本字段,其中有一些提供了复选框、下拉列表或者简单的数据校验(例如,检查本地电话号码确保其是7位数字)。在数据编辑表单中,除了传统的Tab和Shift+Tab功能键之外,不存在其他的键盘快捷键方式可在编辑字段中移动。在数据编辑完成之后,用户单击位于页面底部的保存按钮,把数据提交到服务器,从而服务器能够验证数据的正确性并且把数据提交到数据库。另外一个页面被发送回浏览器以确认保存操作。如果数据发生错误,用户在页面表单得到一个可视化的提示,这个页面需要被发送回浏览器,用户进行适当的编辑,然后再次单击提交按钮。如果每天执行很多类似的相同操作,这将是一种相当低效且乏味的过程。
我们宁可希望使用数据列表的Web页面作为编辑页面,这样每条记录都能够立刻被编辑,也不希望使用单独的表单编辑数据。在完成所有的修改后,我们能够同时将这些数据提交到服务器,然后进行保存。从可用性来说,这是很多传统Web应用所使用的用户界面类型,而并非使用上文所描述的单独的数据编辑方案。当用户保存数据时,所有的数据必须一次性保存,而不是在用户输入或者更新时增量地保存。这种方案意味着所有的数据必须被一次性大批量地发送到服务器,这将导致以下几个可能的结果:
并发或者校验问题迫使所有的数据以一种杂乱并且难以理解的方式重新显示,提示用户一次性修复数据的多个问题。
对于终端用户,没有任何的辅助手段重新提交数据时,断断续续的网络连接问题或者服务器错误可能会导致数据被破坏甚至是完全丢失。
用户认证失败,所有的改动将全部丢失。
无论结果如何,当服务器持久化数据到数据库并且重定向到新的Web页面时,通常会导致长时间重新刷新,从而导致终端用户极大的挫折感和痛苦。图1-1的时序图中展示了用户和系统之间的交互。尤其需要注意的是,用户闲坐在计算机前等待服务器响应的部分。(这个时间通常用来玩个人纸牌游戏。
HTML表单对于某些类型数据确实有用,尤其是对于新手用户,或者没有频繁数据操作的界面。不过,对于那些必须进行快速导航和编辑的大量复杂的数据,则相当痛苦。如果用户需要从电子表格或者邮件中复制数据到应用,往往意味着重新录入或者复制并粘贴单独的数据片段。可用性专家有时把这种情况称为“转椅集成”(swivel chair integration),当然并不需要可用性专家来指出,这是一种低效的工作方式,一种糟糕的用户体验。
1.1.2AJAX止痛药
与传统的Web表单处理大数据量的数据录入应用的方法不同,高效的应用需要具备响应性和直观性。总而言之,系统对于用户的工作流程的影响应该最小化。例如,用户需要在数以千计的预期的客户记录中上下滚动,犹如从本地计算机中访问数据,而不是每次翻页查看10条记录。同时,当数据被保存到服务器时,他们还需要继续输入数据到应用中。用户的使用习惯和与系统的交互方式必须尽可能地贴近桌面应用,从而减少用户把思维方式从桌面切换到Web上时所花费的时间。用于快速数据录入的理想界面需要类似于电子表格,但是每一列都要绑定到数据库表中特定的字段。尽管与传统的应用类似,同样使用简单的HTML[table]标签列出数据,但是当用户点击界面的任意数据时,该记录应该迅速变为可编辑状态,当用户按下回车键时,这些数据应该被保存到服务器,这种情况类似于大多数的电子表应用。如果在保存数据的过程中,由于数据库并发问题产生错误,当错误发生时,显示哪些数据出现错误的信息应该动态地显示在用户界面上。同样,在数据编辑完成并且按下回车键后,焦点应该自动地移动到下一条记录,而且这条记录在用户按下键盘上的任意键时立刻变为可编辑状态,正如我们所期望的桌面电子表格所能完成的一样。如图1.2所示,我们可以看到通过使用AJAX技术,用户不必再闲坐在计算机之前等待服务器的响应。相反,在保存操作的响应返回到浏览器之前,用户能够继续编辑数据。
基于AJAX技术的用户交互的关键在于,这项技术的核心是将少量的数据片段(而不是所呈现的HTMLWeb页面)发送到服务器以及从服务器读取,而不是发送由服务器完全装配的巨大的_Web页面。这就是用户不需要等到数据保存之后才能发送请求到服务器,从而就能够继续编辑数据的原因。即使在这种情况下,由于在后台通过使用AJAX功能只把编辑过的数据异步发送到了在这个应用范例中,其他的热键同样可以工作,例如Ctrl+N创建一条新的记录,Ctrl+v从其他文本文档或者电子表格中直接粘贴到这个w曲应用中(如图1.3所示)。此外,为了用户能够获取关于数据库中用户名和邮件地址是否可用的实时反馈,我们可以使用服务器端数据验证,从而进一步减少页面刷新的次数。
AJAX架构可用性的另一个优势是保护用户免受来自本身和网络的影响。花费了大量的时间填写一个很长HTML几表单,却仅仅因为失去了网络连接而无法将操作或录入的数据提交到服务器或者数据库,将是相当令人沮丧的。基于AJAX技术,我们通常能够把数据异步地发送回服务器。这项技术同时允许我们能够在任何时刻保持服务器端和客户端数据同步。尽管,我们不希望每次按键都不必要地提交对数据库的改动,但我们可以把数据推送到服务器,甚至是保存在本地,从而避免于网络停用或者客户端系统问题而丢失数据。
……
1.1 变化中的Web
在20世纪90年代末期,微软首次在IE 5中引入了XIMLHttpRequest(XHR)对象,这个对象是AJAX功能所需的核心技术的一部分。同时,微软引进了0utlookWebAccess(OwA),OWA是一个让人印象相当深刻的AJAX界面,而且在技术上远远超出它所处的时代。当时的主要缺点是无法在其他浏览器中使用XHR对象,并且对于锁定微软的又一个工具或者平台,社区存在强烈的抵触情绪。通过XHR在主流开发中直到现在才被缓慢采用,可以证实这一事实。
伴随着在Firefox和Safari对XHR远程脚本的最终引入,以跨浏览器的方式构建富异步通信才成为了可能。这也暗示着xHR能够被部署到更多不同用户的机器上,而不会引入太多风险。当XHR、JavaScript、DHTML和CSS结合时,创建富客户端应用且没有Web应用所特有的令人厌烦的刷新才成为了一种可能。与稍后介绍的其他很多富客户端技术不同,AJAX基于各种浏览器和操作系统都支持的开发标准,事实上消除了对厂商锁定的担忧,而且提高了可移植性。
在传统应用中,一切都是围绕Web页面是作为静态视图出现在应用中的这一做法的,而应用又是完全基于web服务器的。用户唯一可能的交互是向Web表单输入数据或者是单击一个链接,这两种操作都导致了整个页面的刷新,而不管它是在CRM应用中更新一条完整的客户记录,还是在查看和编辑用户记录之间进行状态切换。在某些方面,传统的Web应用存在很多改进的空间——例如,当输入大量的数据时。同时,在很多情形下,传统的Web应用的确表现出色,例如搜索引擎或者文档储存库,长期以来都是传统Web应用成功的典范。此外,传统的web能力,例如HTTP协议和资源缓存,对于基于AJAX的应用而言也非常有用。
不同于流行的AJAx地图和Email应用,大多数的企业级Web应用围绕数据录入、数据编辑或者数据报表构建。最常见的数据录入应用包括一个数据列表,例如CRM应用中的客户记录或者销售信息,数据条目能够添加、删除或者编辑。下面让我们分析这样的一个情况,在传统Web应用和基于AJAX的Web应用中,当一位出色的销售人员被要求使用一个慢得让人痛苦的新在线CRM工具在销售过程中跟踪会议记录、客户联系信息和销售进展信息时,用户的交互是如何进行的。
1.1.1传统Web应用之痛
当推销员登录到应用时,他将面对一个包含了10个潜在客户记录列表的Web页面。对于大多数的传统Web应用,这类功能是通过使用静态的HTML[table]标签列出每条数据记录来实现的,列表附近是链接到编辑或者删除页面的按钮。销售人员现在想要基于一些新的信息更新记录。首要任务是找到需要更新的记录。如果在前10条记录中找不到,他将不得不进行搜索,通过翻页到下10条记录,在数据列表中导航查找,而且需要等待页面的刷新。找到这条记录后,用户单击编辑按钮。通过单击向服务器发送了一个请求。然后,一个包括许多表单字段的页面被发送给Web浏览器。大多数的表单字段是文本字段,其中有一些提供了复选框、下拉列表或者简单的数据校验(例如,检查本地电话号码确保其是7位数字)。在数据编辑表单中,除了传统的Tab和Shift+Tab功能键之外,不存在其他的键盘快捷键方式可在编辑字段中移动。在数据编辑完成之后,用户单击位于页面底部的保存按钮,把数据提交到服务器,从而服务器能够验证数据的正确性并且把数据提交到数据库。另外一个页面被发送回浏览器以确认保存操作。如果数据发生错误,用户在页面表单得到一个可视化的提示,这个页面需要被发送回浏览器,用户进行适当的编辑,然后再次单击提交按钮。如果每天执行很多类似的相同操作,这将是一种相当低效且乏味的过程。
我们宁可希望使用数据列表的Web页面作为编辑页面,这样每条记录都能够立刻被编辑,也不希望使用单独的表单编辑数据。在完成所有的修改后,我们能够同时将这些数据提交到服务器,然后进行保存。从可用性来说,这是很多传统Web应用所使用的用户界面类型,而并非使用上文所描述的单独的数据编辑方案。当用户保存数据时,所有的数据必须一次性保存,而不是在用户输入或者更新时增量地保存。这种方案意味着所有的数据必须被一次性大批量地发送到服务器,这将导致以下几个可能的结果:
并发或者校验问题迫使所有的数据以一种杂乱并且难以理解的方式重新显示,提示用户一次性修复数据的多个问题。
对于终端用户,没有任何的辅助手段重新提交数据时,断断续续的网络连接问题或者服务器错误可能会导致数据被破坏甚至是完全丢失。
用户认证失败,所有的改动将全部丢失。
无论结果如何,当服务器持久化数据到数据库并且重定向到新的Web页面时,通常会导致长时间重新刷新,从而导致终端用户极大的挫折感和痛苦。图1-1的时序图中展示了用户和系统之间的交互。尤其需要注意的是,用户闲坐在计算机前等待服务器响应的部分。(这个时间通常用来玩个人纸牌游戏。
HTML表单对于某些类型数据确实有用,尤其是对于新手用户,或者没有频繁数据操作的界面。不过,对于那些必须进行快速导航和编辑的大量复杂的数据,则相当痛苦。如果用户需要从电子表格或者邮件中复制数据到应用,往往意味着重新录入或者复制并粘贴单独的数据片段。可用性专家有时把这种情况称为“转椅集成”(swivel chair integration),当然并不需要可用性专家来指出,这是一种低效的工作方式,一种糟糕的用户体验。
1.1.2AJAX止痛药
与传统的Web表单处理大数据量的数据录入应用的方法不同,高效的应用需要具备响应性和直观性。总而言之,系统对于用户的工作流程的影响应该最小化。例如,用户需要在数以千计的预期的客户记录中上下滚动,犹如从本地计算机中访问数据,而不是每次翻页查看10条记录。同时,当数据被保存到服务器时,他们还需要继续输入数据到应用中。用户的使用习惯和与系统的交互方式必须尽可能地贴近桌面应用,从而减少用户把思维方式从桌面切换到Web上时所花费的时间。用于快速数据录入的理想界面需要类似于电子表格,但是每一列都要绑定到数据库表中特定的字段。尽管与传统的应用类似,同样使用简单的HTML[table]标签列出数据,但是当用户点击界面的任意数据时,该记录应该迅速变为可编辑状态,当用户按下回车键时,这些数据应该被保存到服务器,这种情况类似于大多数的电子表应用。如果在保存数据的过程中,由于数据库并发问题产生错误,当错误发生时,显示哪些数据出现错误的信息应该动态地显示在用户界面上。同样,在数据编辑完成并且按下回车键后,焦点应该自动地移动到下一条记录,而且这条记录在用户按下键盘上的任意键时立刻变为可编辑状态,正如我们所期望的桌面电子表格所能完成的一样。如图1.2所示,我们可以看到通过使用AJAX技术,用户不必再闲坐在计算机之前等待服务器的响应。相反,在保存操作的响应返回到浏览器之前,用户能够继续编辑数据。
基于AJAX技术的用户交互的关键在于,这项技术的核心是将少量的数据片段(而不是所呈现的HTMLWeb页面)发送到服务器以及从服务器读取,而不是发送由服务器完全装配的巨大的_Web页面。这就是用户不需要等到数据保存之后才能发送请求到服务器,从而就能够继续编辑数据的原因。即使在这种情况下,由于在后台通过使用AJAX功能只把编辑过的数据异步发送到了在这个应用范例中,其他的热键同样可以工作,例如Ctrl+N创建一条新的记录,Ctrl+v从其他文本文档或者电子表格中直接粘贴到这个w曲应用中(如图1.3所示)。此外,为了用户能够获取关于数据库中用户名和邮件地址是否可用的实时反馈,我们可以使用服务器端数据验证,从而进一步减少页面刷新的次数。
AJAX架构可用性的另一个优势是保护用户免受来自本身和网络的影响。花费了大量的时间填写一个很长HTML几表单,却仅仅因为失去了网络连接而无法将操作或录入的数据提交到服务器或者数据库,将是相当令人沮丧的。基于AJAX技术,我们通常能够把数据异步地发送回服务器。这项技术同时允许我们能够在任何时刻保持服务器端和客户端数据同步。尽管,我们不希望每次按键都不必要地提交对数据库的改动,但我们可以把数据推送到服务器,甚至是保存在本地,从而避免于网络停用或者客户端系统问题而丢失数据。
……
评论交流
共有9人开贴评论 9人参与评论 3人参与打分 查看
发表于:2008-12-30 22:45:00
转资深Web开发工程师琳琳的小狗对本书的评论:
这是一本很薄的书,拿到手里,第一印象实话说不怎么好,诺大个题目,就这么点厚度,是有些让人怀疑作者能不能阐述清楚。但是当我仔细读完前两章后,疑问完全被打消了——从Ajax兴起的必然性分析,到实现它需要掌握的基础知识都有讲解,篇幅虽小,但也照顾了读者全面了解Ajax所必须的构建块:基于原型javascript面向对象特性、DOM事件、CSS这些知识点都有言简意赅的介绍。虽然此书声称面向的读者是中高级的web开发人员,但就我个人的阅读体验而言,初学者看看这部分基础内容也是很有帮助的,因为很少有一本书能用这么少的篇幅来讲这么多的东西。接下来的内容就更有货了,优点缺点都不少,且听我慢慢道来:)
一、优点:
整本书读下来,最有收获的是中间的第三章到第七章,这些章节包含了Ajax日常开发中常见的问题,以及作者针对这些问题思考后的观点阐述。其中对客户端MVC模型——视图——控制器模式,以及观察者模式的论述,在我看过的所有相关书籍中,它是解释最简洁易懂的,相比《Ajax实战》里同主题的章节来说,更能让人接受,文字不多,配合几张图就搞定了这个概念的阐述,或许这就是本书身材“苗条”的最主要原因吧。不过这里面也有一些观点我个人不怎么认同,比如,作者强调利用Java这类传统语言的建模方式来编写代码,强制模拟抽象类和接口,这些工作在我看来是画蛇添足,毕竟js里面没有提供这些设施,作为多范式的动态语言来说,这样做并不能带来什么好处,相反我更喜欢duck type这样的契约方式,会飞,会叫,就当它是鸭子了。另外,对于跨浏览器脚本编程这个主题,书中也有提及,比如事件处理、预防内存泄漏等等,现在已经有很多现成的框架做了相关的工作,不用自己去写适配代码了,当然这不是说作者写这些内容多余了,相反他们没有错,介绍其原理能让读者看清框架的本质。
另外,书中对Ajax组件的观点也很有意思,他提出了几种分类方式:命令式组件,以及声明式组件,还有行为式组件,非常新颖。所谓命令式组件,就是依靠程序命令初始化而来,与代码顺序精密相关的组件,这也是实现web UI组件最传统的办法,作者似乎不怎么喜欢这种方式;声明式组件,比较注重MVC三个层次的分离,利用视图模板展现外观,交互逻辑由控制器代码支配,模型存储业务数据,这种方式对开发人员要求更高,在构建组件的时候需要更高层次的设计,以及更多的准备工作,比如,选择合适的模板语言,作者比较推崇这种方式;另外就是行为式组件,提倡根据合适的html代码结构,配合css类或者其他的钩子,来在现有的基础组件上增加行为,这种方式很类似web标准中所提倡的“渐进增强”,相比前面两种方法,我个人比较认可这种方式,因为作为一名web标准的爱好者和推广者,长期积累下来的经验告诉我,只有做到平稳退化和渐进增强,才能最大范围的让用户体验得到提升,说到这个,也总结出了本书的一个小遗憾:作者对在javascript缺失的情况下,系统该如何应变这个主题没有相应的解决方案:(不过话说回来,在“企业级开发”这个范围内,舍弃这种考虑也情有可原,我们不应该对作者太刁难了。
这是一本很薄的书,拿到手里,第一印象实话说不怎么好,诺大个题目,就这么点厚度,是有些让人怀疑作者能不能阐述清楚。但是当我仔细读完前两章后,疑问完全被打消了——从Ajax兴起的必然性分析,到实现它需要掌握的基础知识都有讲解,篇幅虽小,但也照顾了读者全面了解Ajax所必须的构建块:基于原型javascript面向对象特性、DOM事件、CSS这些知识点都有言简意赅的介绍。虽然此书声称面向的读者是中高级的web开发人员,但就我个人的阅读体验而言,初学者看看这部分基础内容也是很有帮助的,因为很少有一本书能用这么少的篇幅来讲这么多的东西。接下来的内容就更有货了,优点缺点都不少,且听我慢慢道来:)
一、优点:
整本书读下来,最有收获的是中间的第三章到第七章,这些章节包含了Ajax日常开发中常见的问题,以及作者针对这些问题思考后的观点阐述。其中对客户端MVC模型——视图——控制器模式,以及观察者模式的论述,在我看过的所有相关书籍中,它是解释最简洁易懂的,相比《Ajax实战》里同主题的章节来说,更能让人接受,文字不多,配合几张图就搞定了这个概念的阐述,或许这就是本书身材“苗条”的最主要原因吧。不过这里面也有一些观点我个人不怎么认同,比如,作者强调利用Java这类传统语言的建模方式来编写代码,强制模拟抽象类和接口,这些工作在我看来是画蛇添足,毕竟js里面没有提供这些设施,作为多范式的动态语言来说,这样做并不能带来什么好处,相反我更喜欢duck type这样的契约方式,会飞,会叫,就当它是鸭子了。另外,对于跨浏览器脚本编程这个主题,书中也有提及,比如事件处理、预防内存泄漏等等,现在已经有很多现成的框架做了相关的工作,不用自己去写适配代码了,当然这不是说作者写这些内容多余了,相反他们没有错,介绍其原理能让读者看清框架的本质。
另外,书中对Ajax组件的观点也很有意思,他提出了几种分类方式:命令式组件,以及声明式组件,还有行为式组件,非常新颖。所谓命令式组件,就是依靠程序命令初始化而来,与代码顺序精密相关的组件,这也是实现web UI组件最传统的办法,作者似乎不怎么喜欢这种方式;声明式组件,比较注重MVC三个层次的分离,利用视图模板展现外观,交互逻辑由控制器代码支配,模型存储业务数据,这种方式对开发人员要求更高,在构建组件的时候需要更高层次的设计,以及更多的准备工作,比如,选择合适的模板语言,作者比较推崇这种方式;另外就是行为式组件,提倡根据合适的html代码结构,配合css类或者其他的钩子,来在现有的基础组件上增加行为,这种方式很类似web标准中所提倡的“渐进增强”,相比前面两种方法,我个人比较认可这种方式,因为作为一名web标准的爱好者和推广者,长期积累下来的经验告诉我,只有做到平稳退化和渐进增强,才能最大范围的让用户体验得到提升,说到这个,也总结出了本书的一个小遗憾:作者对在javascript缺失的情况下,系统该如何应变这个主题没有相应的解决方案:(不过话说回来,在“企业级开发”这个范围内,舍弃这种考虑也情有可原,我们不应该对作者太刁难了。
| 我要写评论 |
| 查看所有评论交流(共9条) |








点击看大图





加载中...

