第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
标签列出每条数据记录来实现的,列表附近是链接到编辑或者删除页面的按钮。销售人员现在想要基于一些新的信息更新记录。首要任务是找到需要更新的记录。如果在前10条记录中找不到,他将不得不进行搜索,通过翻页到下10条记录,在数据列表中导航查找,而且需要等待页面的刷新。找到这条记录后,用户单击编辑按钮。通过单击向服务器发送了一个请求。然后,一个包括许多表单字段的页面被发送给Web浏览器。大多数的表单字段是文本字段,其中有一些提供了复选框、下拉列表或者简单的数据校验(例如,检查本地电话号码确保其是7位数字)。在数据编辑表单中,除了传统的Tab和Shift+Tab功能键之外,不存在其他的键盘快捷键方式可在编辑字段中移动。在数据编辑完成之后,用户单击位于页面底部的保存按钮,把数据提交到服务器,从而服务器能够验证数据的正确性并且把数据提交到数据库。另外一个页面被发送回浏览器以确认保存操作。如果数据发生错误,用户在页面表单得到一个可视化的提示,这个页面需要被发送回浏览器,用户进行适当的编辑,然后再次单击提交按钮。如果每天执行很多类似的相同操作,这将是一种相当低效且乏味的过程。
我们宁可希望使用数据列表的Web页面作为编辑页面,这样每条记录都能够立刻被编辑,也不希望使用单独的表单编辑数据。在完成所有的修改后,我们能够同时将这些数据提交到服务器,然后进行保存。从可用性来说,这是很多传统Web应用所使用的用户界面类型,而并非使用上文所描述的单独的数据编辑方案。当用户保存数据时,所有的数据必须一次性保存,而不是在用户输入或者更新时增量地保存。这种方案意味着所有的数据必须被一次性大批量地发送到服务器,这将导致以下几个可能的结果:
并发或者校验问题迫使所有的数据以一种杂乱并且难以理解的方式重新显示,提示用户一次性修复数据的多个问题。
对于终端用户,没有任何的辅助手段重新提交数据时,断断续续的网络连接问题或者服务器错误可能会导致数据被破坏甚至是完全丢失。
用户认证失败,所有的改动将全部丢失。
无论结果如何,当服务器持久化数据到数据库并且重定向到新的Web页面时,通常会导致长时间重新刷新,从而导致终端用户极大的挫折感和痛苦。图1-1的时序图中展示了用户和系统之间的交互。尤其需要注意的是,用户闲坐在计算机前等待服务器响应的部分。(这个时间通常用来玩个人纸牌游戏。
HTML表单对于某些类型数据确实有用,尤其是对于新手用户,或者没有频繁数据操作的界面。不过,对于那些必须进行快速导航和编辑的大量复杂的数据,则相当痛苦。如果用户需要从电子表格或者邮件中复制数据到应用,往往意味着重新录入或者复制并粘贴单独的数据片段。可用性专家有时把这种情况称为“转椅集成”(swivel chair integration),当然并不需要可用性专家来指出,这是一种低效的工作方式,一种糟糕的用户体验。
1.1.2 AJAX止痛药
与传统的Web表单处理大数据量的数据录入应用的方法不同,高效的应用需要具备响应性和直观性。总而言之,系统对于用户的工作流程的影响应该最小化。例如,用户需要在数以千计的预期的客户记录中上下滚动,犹如从本地计算机中访问数据,而不是每次翻页查看10条记录。同时,当数据被保存到服务器时,他们还需要继续输入数据到应用中。用户的使用习惯和与系统的交互方式必须尽可能地贴近桌面应用,从而减少用户把思维方式从桌面切换到Web上时所花费的时间。用于快速数据录入的理想界面需要类似于电子表格,但是每一列都要绑定到数据库表中特定的字段。尽管与传统的应用类似,同样使用简单的HTML标签列出数据,但是当用户点击界面的任意数据时,该记录应该迅速变为可编辑状态,当用户按下回车键时,这些数据应该被保存到服务器,这种情况类似于大多数的电子表应用。如果在保存数据的过程中,由于数据库并发问题产生错误,当错误发生时,显示哪些数据出现错误的信息应该动态地显示在用户界面上。同样,在数据编辑完成并且按下回车键后,焦点应该自动地移动到下一条记录,而且这条记录在用户按下键盘上的任意键时立刻变为可编辑状态,正如我们所期望的桌面电子表格所能完成的一样。如图1.2所示,我们可以看到通过使用AJAX技术,用户不必再闲坐在计算机之前等待服务器的响应。相反,在保存操作的响应返回到浏览器之前,用户能够继续编辑数据。
基于AJAX技术的用户交互的关键在于,这项技术的核心是将少量的数据片段(而不是所呈现的HTMLWeb页面)发送到服务器以及从服务器读取,而不是发送由服务器完全装配的巨大的_Web页面。这就是用户不需要等到数据保存之后才能发送请求到服务器,从而就能够继续编辑数据的原因。即使在这种情况下,由于在后台通过使用AJAX功能只把编辑过的数据异步发送到了在这个应用范例中,其他的热键同样可以工作,例如Ctrl+N创建一条新的记录,Ctrl+v从其他文本文档或者电子表格中直接粘贴到这个w曲应用中(如图1.3所示)。此外,为了用户能够获取关于数据库中用户名和邮件地址是否可用的实时反馈,我们可以使用服务器端数据验证,从而进一步减少页面刷新的次数。
AJAX架构可用性的另一个优势是保护用户免受来自本身和网络的影响。花费了大量的时间填写一个很长HTML几表单,却仅仅因为失去了网络连接而无法将操作或录入的数据提交到服务器或者数据库,将是相当令人沮丧的。基于AJAX技术,我们通常能够把数据异步地发送回服务器。这项技术同时允许我们能够在任何时刻保持服务器端和客户端数据同步。尽管,我们不希望每次按键都不必要地提交对数据库的改动,但我们可以把数据推送到服务器,甚至是保存在本地,从而避免于网络停用或者客户端系统问题而丢失数据。
展开
目录
第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.6 小结
1.7 资源
第2章 AJAX构建块
2.1 JavaScript
2.1.1 JavaScript类型
2.1.2 闭包
2.1.3 面向对象的JavaScript
2.1.4 prototype属性
2.1.5 面向对象编程和继承
2.1.6 易变性
2.1.7 线程
2.1.8 错误处理
2.1.9 命名空间
2.2 DOM
2.2.1 基本原理
2.2.2 操作DOM
2.3 CSS
2.3.1 继承和层叠
2.3.2 内联样式
2.3.3 样式表
2.3.4 动态样式
2.4 事件
2.4.1 事件流
2.4.2 事件绑定
2.4.3 跨浏览器事件
2.4.4 事件对象
2.5 客户端/服务器通信
2.5.1 XMLHttpRequest基础知识
2.5.2 处理数据
2.6 小结
2.7 资源
第3章 Web浏览器中的AJAX
3.1 基于组件的AJAX
3.1.1 渐增的AJAX
3.1.2 对服务器的影响
3.2 HTML标准
3.2.1 文档类型定义
3.2.2 盒子模型
3.3 启动加载AJAX组件
3.3.1 onload事件
3.3.2 浏览器编码技巧
3.4 模型-视图-控制器
3.4.1 视图
3.4.2 控制器
3.4.3 模型
3.5 AJAX MVC
3.5.1 AJAX模型
3.5.2 AJAX视图
3.5.3 AJAX控制器
3.5.4 面向方面的JavaScript
3.6 小结
3.7 资源
第4章 AJAX组件
4.1 命令式组件
4.2 声明式组件
4.2.1 服务器端声明式编程
4.2.2 声明式Google地图
4.2.3 替代方法
4.3 自定义声明式组件
4.3.1 行为式组件
4.3.2 声明式组件
4.3.3 关于声明
4.4 构建组件
4.4.1 基本功能
4.4.2 连接到服务器
4.4.3 最终版本
4.5 小结
4.6 资源
第5章 从设计到部署
5.1 设计
5.1.1 AJAX建模
5.1.2 应用模型-视图-控制器模式
5.1.3 预先考虑性能问题
5.2 原型设计
5.2.1 线框绘制
5.2.2 验证设计决议
5.3 测试
5.3.1 测试驱动开发
5.3.2 调试
5.4 部署
5.4.1 JavaScript压缩
5.4.2 图片合并
5.4.3 保护知识产权
5.4.4 文档
5.5 小结
5.6 资源
第6章 AJAX架构
6.1 多层架构:从单层到多层
6.2 异步消息
6.3 轮询
6.4 服务器推送
6.5 跟踪请求
6.6 缓存:处理数据
6.7 基本缓存
6.8 在组件中缓存
6.9 在浏览器中缓存
6.10 在服务器中缓存
6.11 在数据库中缓存
6.11.1 MySQL
6.11.2 MS SQL Server
6.11.3 Oracle
6.12 更新服务器模型:并发
6.12.1 悲观锁定
6.12.2 只读锁定
6.12.3 乐观锁定
6.12.4 冲突鉴定
6.12.5 冲突解决
6.12.6 自动的冲突解决
6.13 流量控制
6.13.1 客户端
6.13.2 服务器
6.14 可伸缩性
6.14.1 负载平衡和群集
6.14.2 AJAX可伸缩性问题
6.15 离线AJAX
6.16 FireFox离线存储
6.17 IE userData离线存储
6.18 使用Flash客户端存储
6.19 离线AJAX和并发
6.20 小结
6.21 资源
6.21.1 REST和Web服务
6.21.2 缓存
6.21.3 数据库性能
6.21.4 离线AJAX
第7章 Web Service和安全性
7.1 Web Service
7.2 Web Service协议
7.2.1 表象状态传输
7.2.2 XML远程过程调用
7.2.3 Web Service
7.2.4 选择合适的工具
7.3 客户端的SOAP
7.3.1 IBM Web Service JavaScript库
7.3.2 Firefox
7.3.3 IE
7.4 跨域Web Service
7.4.1 服务器代理
7.4.2 URL片段标识符
7.4.3 Flash跨域XML
7.4.4 脚本注入
7.5 安全性
7.6 AJAX的安全性考虑
7.7 跨域漏洞
7.7.1 跨站脚本
7.7.2 跨站请求伪造
7.7.3 JavaScript劫持
7.8 SQL注入
7.8.1 预处理语句
7.8.2 存储过程
7.8.3 XPath注入
7.9 数据加密和隐私
7.10 防火墙
7.11 小结
7.12 资源
第8章 AJAX可用性
8.1 常见问题
8.1.1 后退按钮和书签
8.1.2 页面大小
8.1.3 自动提交
8.2 可访问性
8.2.1 识别用户的可访问性需求
8.2.2 JavaScript和Web可访问性
8.2.3 屏幕阅读器和可访问性
8.2.4 不该为屏幕阅读器提供的解决方案
8.2.5 兼容JAWS的AJAX交互
8.2.6 键盘可访问性
8.3 可用性测试
8.4 迅速而又随性的测试
8.4.1 征募参与者
8.4.2 设计并运行测试
8.5 软件辅助测试
8.5.1 用于测试可用性的工具
8.5.2 对软件辅助测试的一般忠告
8.6 小结
8.7 资源
8.7.1 后退按钮
8.7.2 可用性测试
第9章 用户界面模式
9.1 显示模式
9.2 交互模式
9.3 小结
9.4 资源
9.4.1 拖曳资源
9.4.2 进度栏资源
9.4.3 活动指示器资源
9.4.4 颜色淡出资源
9.4.5 即时编辑资源
9.4.6 向下钻取资源
9.4.7 即时搜索资源
9.4.8 即时表单资源
第10章 风险和最佳实践
10.1 风险来源
10.1.1 技术风险
10.1.2 文化/政策风险
10.1.3 市场风险
10.2 技术风险
10.2.1 范围
10.2.2 浏览器能力
10.2.3 可维护性
10.2.4 向前兼容
10.2.5 第三方工具支持和代码过时
10.3 文化和政策风险
10.3.1 终端用户的期待
10.3.2 可培训性
10.3.3 合法性
10.4 市场风险
10.4.1 搜索引擎的可访问性
10.4.2 范围
10.4.3 货币化
10.5 风险评估和最佳实践
10.5.1 采用特定的AJAX框架或者组件
10.5.2 渐进增强和不唐突的JavaScript
10.5.3 Google网站地图
10.5.4 可视化提示
10.5.5 避免镀金式设计
10.5.6 制定维护计划
10.5.7 采用一种收益模型
10.5.8 把培训作为应用的一部分
10.6 小结
10.7 资源
10.7.1 搜索引擎优化
10.7.2 统计
10.7.3 网站地图
10.7.4 屏幕截取工具
第11章 案例研究
11.1 基于Web 2.0重新武装美国国防部
11.1.1 背景
11.1.2 挑战
11.1.3 解决方案
11.1.4 采用技术
11.1.5 成果
11.2 Agrium公司将AJAX技术整合到实际运作中
11.2.1 背景
11.2.2 挑战
11.2.3 解决方案
11.2.4 采用的技术
11.2.5 成果
11.3 AJAX助力国际运输与物流公司
11.3.1 背景
11.3.2 挑战
11.3.3 解决方案
11.3.4 采用的技术
11.3.5 成果
11.4 小结
11.5 资源
附录A OPENAJAX HUB
展开
加入书架成功!