与RIA有关的AJAX技术(AsynchronousJavaScriptAndXML)在本讲中重点掌握如下知识点什么是AJAX技术Ajax与传统的应用对比AJAX中的三大核心技术AJAX技术的工作原理AJAX技术的典型应用TheEmphasesinTeachingMaterials1、什么是AJAXAsynchronousJavaScriptAndXML(异步JavaScript和XML有关的技术)。2、应用AJAX技术的Web应用所具有的特性(1)Web应用的桌面客户端化Ajax技术可以使Web应用具有类似于桌面客户端软件的交互效果,从而给基于Web的应用系统在加载动态化和操作客户端化两方面带来了革命性的突破。你了解RIA技术吗?也就是现在比较流行的RIA的应用效果(2)不需要刷新整个页面就可以实现提交因为Ajax能够提供让客户端程序与服务器端程序进行异步通信的能力,从而使用户从请求/响应中解脱出来并提高了系统响应的效率。特别是J2EE平台中对表示层中所涉及的技术比较贫乏!(3)减轻了Web服务器的负担、并提高响应速度这也是用户应用AJAX后明显感觉到的一个效果(4)AJAX是标准化的并被广泛支持的技术不需要再下载插件或者其它的小程序等安装到客户端----而WebStart和MSClickOnce、FlashFLEX等目前的RIA技术实现需要安装客户端插件。3、为什么应用AJAX技术后能够提高系统的响应速度(1)AJAX的数据处理原则是“按需取数据”可以最大程度地减少请求/响应过程中的数据量,当然也就降低了对服务器所造成的负担。(2)在大多数网站的页面中至少90%都是重复一样的比如:结构、格式、页头、页尾、广告等,所不同的只是一小部分的内容但每次服务器都会生成完整的页面标签数据再返送给客户端浏览器,这无形之中是一种浪费。4、为什么要提出AJAX技术(1)由C/S到B/S的技术发展C/S结构的胖客户端的主要问题----部署问题、升级困难、维护困难、安全问题等等---相应地产生了B/S架构技术。(2)但B/S方式同样也面临如下的一些问题表现能力方面比较贫乏(产生UI也只有表单中的一些控件)HTTP协议是一个无状态的协议,需要进行状态跟踪集中式的后台业务处理,服务器负载加重每次都需要进入请求/响应循环,响应速度和性能低下(3)常规的B/S方式中的同步请求处理的方式将导致客户机会处于漫长的等待中5、RIA(RichInternetApplications)富互联网应用技术(1)C/S模式实现(2)B/S模式(3)C/S模式实现采用JavaSwing(JFC)+ApacheHttpClient组件。(4)B/S模式实现采用CSS+Div+JS+AJAX技术实现。6、AJAX中的三大技术特征(1)异步交互无需刷新整个页面内容(局部刷新)(2)JavaScript脚本JavaScript绑定和处理所有数据(3)XML封装数据利用DOM进行数据交换7、体验应用AJAX技术的效果(1)GoogleMaps站点客户端程序异步地向服务器端发送请求并更新页面的显示内容(2)GoogleSuggest站点请注意“自动补全”,这是AJAX的一个典型的应用(3)在线WebOffice应用系统技术能够实现与应用程序相类似的效果!Google也提供在线文档编辑8、AJAX中的异步-----Ajax中的第一个“A”代表“异步(Asynchronous)”(1)什么是异步-----异步?在Java中也就是多线程并发。所谓的异步请求也就是不需要等待服务器响应完毕,发送请求后应用程序可以完成其它的任务(比如用户仍然可在Web表单中进行操作等)。(2)常规的Web应用实现的过程是同步交互过程下一个请求必须在前一个请求已经被处理完毕后,才能发出,无法对客户端的请求实现并行处理。请求与响应的循环过程你知道在普通的Java程序中是如何实现异步功能的?(3)常规的Web应用和基于AJAX技术的Web应用工作过程的对比注意:在浏览器和Web服务器之间有一个AJAXEngine引擎注意其中的AJAXEngine9、AJAX技术中的异步实现---借助于XMLHttpRequest对象(1)Ajax中的最核心的技术就是XMLHttpRequest(2)XMLHttpRequest对象能够异步地(多线程)向后台发送请求、并且异步地获得Web服务器返回的数据(交互)这样将使得JavaScript可以在不刷新页面的情况下获得服务器端所返送回的数据,或者向服务器端提交请求数据(3)应用AJAX的某个应用场景示例10、AJAX技术常见的应用——“实时性”、“局部更新”(1)表单驱动的交互(实时检查)(2)深层次、内容动态的树形导航菜单的设计实现(3)对数据进行过滤和操纵相关数据的场景——实时刷新数据(4)Web方式的进度条——局部更新(5)快速的用户与用户间的交流响应——IM系统(6)自动补全(7)实时刷新数据11、编程应用AJAX技术的一般流程(1)创建XMLHTTPRequest对象它是浏览器中内置的对象,并且是一个事实上的标准(但非W3C颁布)。(2)定义一个事件处理器(利用它获得服务器的返回值)(3)并将事件处理器注册给前面的XMLHTTPRequest请求对象,然后再实现与服务器的连接。(4)向服务器发送请求信息,服务器对请求进行处理并返回处理完毕的信息(5)每当XMLHTTPRequest的状态发生变化,自动触发事件处理器。只需要在事件处理器程序中获得返回的响应结果(由responseText或者responseXML包装)。(6)最后在事件处理器程序中动态地更新页面中的某部分以产生响应输出的结果。12、利用AJAX技术实现的在线表格数据编辑示例