JavaWeb_12_Ajax使用.docVIP

第3章 Ajax使用 在前面的章节中学习了Java Web应用程序的开发知识，使用前面的所学习到的知识可以制作出功能完整的web应用程序。今天我们将为大家介绍一周在Web应用程序中提高用户体验的新技术——Ajax。 3.1 Ajax概述 AJAX全称为Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。国内通常的读音为阿贾克斯和阿贾克斯足球队读音一样。Web应用的交互如FlickrBackpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于网页的Web应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe来加载数据，但仅到现在我们才看到传统的开发人员和公司开始采用这些技术。就像新的编程语言或模型伴随着更多的痛苦，开发人员需要学习新的技巧及如何最好利用这些新技术。 Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括： XHTML和CSS 使用文档对象模型(Document Object Model)作动态显示和交互 使用XML和XSLT做数据交互和操作 使用XMLHttpRequest进行异步数据接收 使用JavaScript将它们绑定在一起 传统的web应用模型工作起来就象这样：大部分界面上的用户动作触发一个连接到Web服务器的HTTP请求。服务器完成一些处理---接收数据，处理计算，再访问其它的数据库系统，最后返回一个HTML页面到客户端。这是一个老套的模式，自采用超文本作为web使用以来，一直都这样用,限制了Web界面没有桌面软件那么好用。 这种旧的途径让我们认识到了许多技术，但它不会产生很好的用户体验。当服务器正在处理自己的事情的时候，用户在做什么？没错，等待。每一个动作，用户都要等待。 很明显，如果我们按桌面程序的思维设计Web应用，我们不愿意让用户总是等待。当界面加载后，为什么还要让用户每次再花一半的时间从服务取数据？实际上，为什么老是让用户看到程序去服务器取数据呢？ 传统Web应用模型(左)与Ajax模型的比较(右) 通过在用户和服务器之间引入一个Ajax引擎，可以消除Web的开始－停止－开始－停止这样的交互过程它就像增加了一层机制到程序中，使它响应更灵敏，而它的确做到了这一点。 不像加载一个页面一样，在会话的开始，浏览器加载了一个Ajax引擎---采用JavaScript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互－－不用等待服务器的通讯。所以用户再不用打开一个空白窗口，看到等待光标不断的转，等待服务器完成后再响应。 通常要产生一个HTTP请求的用户动作现在通过JavaScript调用Ajax引擎来代替任何用户动作的响应不再要求直接传到服务器---例如简单的数据校验，内存中的数据编辑，甚至一些页面导航---引擎自己就可以处理它如果引擎需要从服务器取数据来响应用户动作---假设它提交需要处理的数据，载入另外的界面代码，或者接收新的数据---引擎让这些工作异步进行，通常使用XML不用再担误用户界面的交互。 图3-2 传统Web应用的同步请求 图3-3 Ajax模式的异步请求 3.2 Ajax实现 通过图3-3的Ajax原理图可以看出，使用Ajax可以可以减少客户端的等待时间、提高用户体验。在Ajax模式的原理中，需要在客户端浏览器中添加一个Ajax引擎，该Ajax引擎实际上就是使用JavaScript脚本编写的异步访问和处理代码。 在Ajax引擎中主要分为两部分：一部分是请求发送，另一部分是处理服务器的响应信息。 3.2.1 客户端发送请求 在Ajax引擎中发送请求所包含的步骤如图3-4所示。 图3-4 Ajax发送请求的步骤 1、创建XMLHttpRequest请求对象 和传统的http同步请求相同，Ajax的异步请求也需要一个请求对象来封装请求的一些参数，比如：请求地址、方式、数据等等。但传统的HTTP同步请求的请求信息是由浏览器自动封装和发送，而Ajax异步请求需要开发人员使用JavaScript脚本语言自己创建请求对象。 由于不同的浏览器封装数据请求参数的方式不相同，所以在Ajax引擎创建请求对象时需要根据相应的浏览器做处理，一般分为Microsort公司的IE浏览器和非IE浏览器两类。IE以ActiveX方式提供XMLHTTP类别，