Web应用开发技术教学课件-第14章基于AjaxWeb应用.ppt

计算机系统 第 14 章基于Ajax的Web应用 14.1 传统Web的弊病 问题2： 你们知道这些按钮的含义吗？ 好不容易输入完成后如何保存？ 感受： 如果这是企业的应用系统，作为一名员工，如果你每天要在这样的系统环境下工作，你会怎么样？ 要么拒绝使用？要么崩溃！ 14.1 传统Web的弊病 经典的Web应用程序模型工作方式如下： 用户动作在界面上提交数据，激发一个HTTP请求到Web服务器；服务器获取数据和处理数据，并返回一个新的HTML到客户端。 在传统Web中，一个Web页面是作为一个静态视图出现在应用中，一个Web应用包含多个Web页面。应用中的计算完全在服务器端实现，并将处理的结果生成页面，通过浏览器下载到客户端显示。用户可能的交互形式是向页面的表单输入数据并向服务器提交表单，或者单击一个链接打开另外一个页面。这两种操作都会导致整个页面的刷新(即页面重载)，用户每次与服务器交互都获得一个新的文档页面。 页面上的任何小的变动都会导致整个页面的刷新，包括数据、样式和结构等所有的部分，大量信息的网络传输引起页面响应的长时间延迟。例如更新CRM中的一条客户的信息会导致整个页面的更新，返回一个新的页面。 14.1 传统Web的弊病 这样的模型适合于以超文本为基础的Web应用程序，但并不一定满足软件应用程序的要求。 在面向消费者的公众型(或称社区型)Web应用中，主要是以超文本为基础的静态文本和图片信息以及少量的数据录入，这种以页面为单元的信息组织与传输模式尚可以接受；但在大型Web应用中，这种交互性弱的静态页面对复杂的业务逻辑处理和数据的高并发性就显得力不从心，并且由于大量的数据录入、频繁的数据更新所导致页面的频繁加载，使得Web页面的这种响应迟缓和交互性差的缺点被放大。 其主要问题是：页面的弱交互性、服务器的负荷过重、大量信息的网络传输引起页面响应的延迟以及页面的频繁刷新给用户带来糟糕的用户体验。 14.1 传统Web的弊病 对桌面应用Web化的企图几乎是伴随Internet的诞生而产生的，但由于传统Web应用存在的固有缺陷，桌面应用程序所拥有的丰富功能和响应能力是Web无法达到的，要做出足以替代桌面应用的可用性几乎是不可能的。用户感觉到Web应用与桌面应用的可用性和用户体验之间的巨大差距。 不过，随着Ajax的出现，这种差距正被逐渐缩小。最成功的例子是Google Suggest和Google Maps。 Google Suggest会根据用户输入的内容，立即列出相关的条目。 而Google Maps，则利用光标在刻度线上移动来放大或者缩小地图。 所有的一切几乎都是即时完成的，完全不用等待页面的刷新。Google Suggest和Google Maps是新型Web应用的两个典型例子，其良好的用户体验正是由于使用了Ajax技术。 14.2 Ajax带来的变化 多年来Web一直停留在点击提交(Submit)按钮或链接(Link)并产生新的页面的浏览方式。Ajax改写了网页必须不断重新载入的运行方式，页面只更新局部的内容，从本质上改变了客户端与服务器的交互模式。Ajax带来的变化主要体现在： 用户体验的改善。用户请求无需等待刷性，也不会中断当前的浏览器线程。 数据通讯模式的变化。通过微请求(Micro Request)和异步通讯，Ajax从根本上改变了客户端与服务器的数据通讯方式，使得原来以页面文档(Document)为单元的通讯变为以更小粒度的页面中的数据对象为通讯单元。 响应速度的变化。用户长时间复用一个视图页面，只是第一次下载该页面时可能需要花费更多时间。 对服务器负荷的影响。Ajax技术可以将服务器的部分工作转移到客户端，减轻服务器和带宽的负担。 应用开发模式的变化。Ajax技术很大程度上依赖于JavaScript语言来实现。 14.2.2 Ajax技术的优势 与传统Web应用相比，使用Ajax技术主要有如下优势。 无刷新页面。Ajax采用异步的方式发送请求，页面的更新在客户端由JavaScript操作DOM完成，用户感受不到更新延迟。 减少网络传输量。传统Web服务器的每次响应都是一个完整的页面；而基于Ajax技术的Web应用中，服务器的响应只是必须更新的数据。 减轻了客户端的内存消耗。Ajax的根本理念是“按需取数”，所以最大可能地减少了冗余请求，避免了客户端内存加载大量冗余数据。 不过，新技术就像一把双刃剑。 在整个应用中盲目增加大量的Ajax交互会增加服务器负荷，从而导致整个应用的性能下降。 另一方面，部署Web应用需要进行安全方面的防范，以避免关键的信息不会被恶意入侵者修改或被竞争对手截获。 14.3 Ajax及技术实现—Ajax简介 Ajax（A