第一章：Ajax概述.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第,1,章 什么是,Ajax,当前,Web,开发领域，最新的时髦术语：,Ajax,，到底代表着什么含义？它从何发展而来？在当今,Web,开发领域中扮演什么样的角色，有着如何的影响？未来又将去往何处？,1,、,Ajax,概述,Ajax,是“,Asynchronous JavaScript and XML”,的简写，即为“异步,JavaScript,和,XML”,。,特点：,JavaScript,编写、程序异步执行、用,XML,来封装和传输数据。,由四部分组成：,JavaScript+DOM+XMLHttpRequest+CSS,为什么需要,Ajax?,传统的,Web,浏览技术已无法胜任高层次网络访问需求，新的方法能提供给用户更好的体验。,Ajax,只需要使用绝大多数计算机上现有的技术，就能完成任务,改善用户感受。,举例：,Google,Suggest,Google,Maps,Gmail,Google,Earth,等,传统,Web,应用与,Ajax,应用的比较,在传统的Web应用模型下，大部分的用户操作都会发送一个HTTP请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。当服务器处理请求时，用户能够做什么呢？只有等待！,在传统的,Web,应用模型下,，,客户机（浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响应。当客户机等待的时候，会用某种形式通知您正在处理：,沙漏（特别是,Windows 上）,这正是传统,Web,应用程序让人感到笨拙或缓慢的原因,缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长,Google Suggest,Google Earth,Gmail,1.1,为什么需要,Ajax,富客户端？,什么是富客户端？,富：是指客户端的交互模式，要有多样化的输入方式和符合直觉的及时反馈手段。,客户端：是与服务器通信的一个程序。,1.1.1,比较用户体验，如,excel,1.1.1,比较用户体验,-n,层架构,举例：网上书店：,www.china-,可见交互的方式就是点击那些超链接，填写电子表格，如用户不进行任何操作，则永远得不到反馈信息。,1.1.2,网络延迟,本地调用,远程调用,可见，远程调用不可能和本地调用一样有效率的，更糟糕的是，网络的不稳定性更让这些效率损失捉摸不定，难以预计。相比之下，运行在本地内存的本地调用，在这一点上无疑有很多优势。,远程调用横穿整个网络，需要执行大量的额外操作，它往往把系统拖慢，使用户察觉到延迟。网络延迟是导致实际应用交互性糟糕的一个普遍原因。,1.1.3,异步交互,用户界面的开发者对于网络延迟只能做最坏的打算，就是要尽可能让用户界面与网络活动无关。,对于任何用户界面来说，创建异步线程，让他在后台处理那些需要计算很久的任务，这样用户可以继续做其他的事情，当启动这个线程的时候，有必要阻塞用户的操作，但是在可以接受的很短的时间之后，阻塞即被解除。,然而。,HTTP,协议是一个请求,-,响应模型的协议，即单向的通信协议。客户端可以向服务器发起连接，但是服务器不可以向客户端发起连接，甚至当客户端下次发起通信请求时，健忘的服务器都记不起这个客户端是谁了。,1.2 Ajax,的四个基本原则,1,、浏览器中的是应用而不是内容,2,、服务器交付的是数据而不是内容,3,、用户交互变得流畅而连续,4,、有纪律严肃的编程,1,、浏览器中的是应用而不是内容,传统的,Web,应用中，浏览器扮演哑终端的角色。他对用户处于操作流程中的哪一阶段一无所知，信息完全保存在服务器上，确切地说就是用户会话上。,用户登陆时，服务器交给浏览器一个复杂的多的文档，其中包括大量的,JavaScript,代码。这个文档将在整个会话的生命周期内与用户相伴，在这一过程中，随着与用户的交互，它的外观可能会发生很大的变化，他知道如何响应用户输入，以决定这些请求是自行处理还是交给服务器处理。,因为该文档在整个用户会话中都存在，所以它可以保持状态。例如购物车的内容可以保存在浏览器中而不是服务器会话中。,2,、服务器交付的是数据不是内容,传统的,Web,应用中，服务器在每个步骤都需要把模板文件、内容和数据混合发到浏览器，而基于,ajax,的方式，只需要发送相关的数据（如价格）就行了，因为模板文件、导航列表和页面布局已经随着初始界面发送至浏览器了。,3,、用户交互变得流畅而连续,在传统的,Web,应用中，与服务器交互需要点击超链接或提交表单，然后等待页面的刷新，这打断了用户的工作流程。与之相对应的是，让服务器响应鼠标移动、拖拽或者键盘输入这样的用户事件，也就是说，服务器在用户身边为用户服务，而不是挡在用户前面，打断她的操作。,Ajax,通过异步方式发送数据的，响应用户的操作速度很快。,Ajax,可以对丰富的用户操作进行捕捉，类似于拖拽这样复杂的,ui,概念不再是遥不可及，这是的,Web,应用的,ui,体验可以全面提升至与桌面应用,ui,组件相媲美的高度。,4,、有纪律的严肃编程,传统的,Web,应用有时候也用,Javascript,主要为页面增加一些花哨的效果。,在,Ajax,中，提交给用户的应用一直运行直到用户关闭程序为止，不崩溃不变慢，没有内存泄漏等，则需要高性能、可维护的代码。,真实世界的,Ajax,富客户端,1,、,Gmail,：,除了其阔绰的容量之外，最令人称道的是他的用户界面，它允许用户依次打开多个电子邮件，并且用户正在写邮件，邮件列表也能自动更新。完全的跨平台，可以在任何平台任何地方使用,Gmail,服务,2,、,Google Suggest,可以为用户提供与输入字符相符的提示，帮助他们完成想要键入的搜索字符串。,3,、,Google Maps,第一、触发下载新地图数据的操作不是点击一个特定的“取得地图”的按钮，而是用户的操作，如移动地图。用户的工作流程没有被与服务器的通信所打断,第二、请求是异步的，这就意味着当获取新数据时，相关的链接、缩放控件以及页面上的其他功能仍然可以使用。,4,、,Google Earth,下章主要任务,第二章会介绍,Ajax,的技术要点，并开始动手开发一些代码。,