一种新的Web设计方法.pptVIP

AJAX实战 第一章：一种新的Web设计方法 主要内容： 异步网络交互和使用模式 Ajax和传统的Web应用的关键区别 Ajax的四个基本原则 真实世界中的Ajax 什么是Ajax? Ajax是Asynchronous JavaScript+XML,即异步JavaScript+XML。 由四部分组成：JavaScript+DOM+XMLHttpRequest+CSS 在技术上，Ajax极大地挖掘了Web浏览器的潜力，开启大量新的可能性。 在商业上，Google通过眼花缭乱的应用，让普通大众对新一代的Web应用充满了期待。 为什么需要Ajax? 传统的Web浏览技术已无法胜任高层次网络访问需求，新的方法能提供给用户更好的体验。 Ajax只需要使用绝大多数计算机上现有的技术，就能完成任务,改善用户感受。 举例：Google Suggest,Google Maps Gmail,Google Earth等 Google Suggest Google Earth Gmail 1.1为什么需要Ajax富客户端？ 什么是富客户端？ 富：是指客户端的交互模式，要有多样化的输入方式和符合直觉的及时反馈手段。 客户端：是与服务器通信的一个程序。 1.1.1 比较用户体验，如excel 1.1.1比较用户体验-n层架构 举例：网上书店： 可见交互的方式就是点击那些超链接，填写电子表格，如用户不进行任何操作，则永远得不到反馈信息。 1.1.2 网络延迟 本地调用 远程调用 可见，远程调用不可能和本地调用一样有效率的，更糟糕的是，网络的不稳定性更让这些效率损失捉摸不定，难以预计。相比之下，运行在本地内存的本地调用，在这一点上无疑有很多优势。 远程调用横穿整个网络，需要执行大量的额外操作，它往往把系统拖慢，使用户察觉到延迟。网络延迟是导致实际应用交互性糟糕的一个普遍原因。 1.1.3异步交互 用户界面的开发者对于网络延迟只能做最坏的打算，就是要尽可能让用户界面与网络活动无关。 对于任何用户界面来说，创建异步线程，让他在后台处理那些需要计算很久的任务，这样用户可以继续做其他的事情，当启动这个线程的时候，有必要阻塞用户的操作，但是在可以接受的很短的时间之后，阻塞即被解除。 然而。HTTP协议是一个请求-响应模型的协议，即单向的通信协议。客户端可以向服务器发起连接，但是服务器不可以向客户端发起连接，甚至当客户端下次发起通信请求时，健忘的服务器都记不起这个客户端是谁了。 现代的编程语言如：Java,PHP或者 .NET，他们熟悉用户会话概念，是对HTTP协议的一个补救措施。 1.1.4独占或瞬态的使用模式 两种使用方式：独占的或瞬态的 瞬态应用每天偶尔使用一下，但总作为次要的活动。 独占的应用需要应付用户每天几个小时的持续使用。 1.1.5忘掉Web 现代的Web浏览器和他原始的出发点相比已经完全不同了，各种交互组件、脚本语言和插件迅速发展，JavaScript被当作一种严肃的编程语言，它能够增强Web应用的实用性，而且不强迫用户安装额外的软件，或者抛弃自己心爱的浏览器。 1.2 Ajax的四个基本原则 1、浏览器中的是应用而不是内容 2、服务器交付的是数据而不是内容 3、用户交互变得流畅而连续 4、有纪律严肃的编程 1、浏览器中的是应用而不是内容 传统的Web应用中，浏览器扮演哑终端的角色。他对用户处于操作流程中的哪一阶段一无所知，信息完全保存在服务器上，确切地说就是用户会话上。 当用户登陆或者以其他方式初始化一个会话时，系统会创建几个服务器端对象，同时将浏览器站点的首页呈现给用户，这个HTML标记的数据流由模板文件以及特定与该用户的数据和内容组成。 用户每次与服务器交互，都会获得另外一个文档，在这个文档中，除了特定与该用户数据以外，包括的其他模板文件和数据都是相同的。 用户退出时，会话消失，持久层把用户下次登陆需要显示的信息保存起来。 用户登陆时，服务器交给浏览器一个复杂的多的文档，其中包括大量的JavaScript代码。这个文档将在整个会话的生命周期内与用户相伴，在这一过程中，随着与用户的交互，它的外观可能会发生很大的变化，他知道如何响应用户输入，以决定这些请求是自行处理还是交给服务器处理。 因为该文档在整个用户会话中都存在，所以它可以保持状态。例如购物车的内容可以保存在浏览器中而不是服务器会话中。 2、服务器交付的是数据不是内容 传统的Web应用中，服务器在每个步骤都需要把模板文件、内容和数据混合发到浏览器，而基于ajax的方式，只需要发送相关的数据（如价格）就行了，因为模板文件、导航列表和页面布局已经随着初始界面发送至浏览器了。 参见16页图1-13的流量图 3、用户交互变得流畅而连续 在传统