教学材料《JSP设计与开发》-第11章

学习要点Ajax的基本概念Ajax的工作原理编写Ajax的一般过程Ajax技术的典型应用返回11.1Ajax概述11.1.1Web开发技术演变过程Web应用程序发展至今大体经历了3个阶段，第一个阶段使用的是简单的静态页面，第二个阶段使用的是ASP,JSP和PHP等动态脚本语言，第三个阶段是Web2.0阶段，而Ajax就是Web2.0中的核心技术。在Web应用程序发展的第一个阶段中，只能使用静态的HTML页面来开发Web应用程序，这个阶段的Web应用程序不能与客户产生任何互动，所实现的功能仅仅是信息的展示。但是客户的需求总是不断提高的，客户希望能够与Web应用产生互动，从而得到自己需要的信息。这种简单的静态Web应用已经不能满足客户日益提高的需求。这就促使了动态脚本语言的出现，是Web应用程序的开发进人第二个阶段。下一页返回11.1Ajax概述在Web应用程序开发的第二个阶段，出现了各种各样的动态脚本语言，如JSP,ASP和PHP等，开发人员可以使用这些动态的脚本语言开发出具有交互功能的Web应用程序。在这种Web应用程序中，客户可以通过表单提交自己的输入信息，服务器端的程序接收客户提交的表单以后，根据表单的内容进行处理，然后把处理结果返回给用户，这样就完成了一个简单的交互。这种Web应用程序的出现，大大提高了Web应用程序的交互性能，从而是Web应用程序的开发进人了一个一场繁荣的阶段，各种各样的Web应用程序采用了这样的开发模式。但是这种开发模式并不完善，在Web应用中，客户段依赖于通用的浏览器软件，而HTML语言中用来开发用户界面的标签是有限的，上一页下一页返回11.1Ajax概述从而导致了Web应用程序的用户界面变得非常单调，缺少类似桌面应用程序丰富的界面元素。而且在这种Web应用程序中，每次用户与服务器的交互都需要重新刷新页面，虽然其优势是很明显的，但是这些缺陷仍然会导致用户的不满，这就促使了Ajax技术的出现。在使用Ajax开发的Web程序中，可以模拟出类似传统桌面应用程序丰富的界面元索还可以选择局部刷新页面，从而减小了用户与服务器交互的通信量。由于Ajax的这些特性，在其推出的短短几年中，已经在很多Web应用中得到了广泛的应用。上一页下一页返回11.1Ajax概述11.1.2

什么是Ajax随着Ajax被广泛应用，现在Ajax所包含的范围已经非常广泛，所有的实现浏览器与服务器异步交互的技术都可以归人Ajax的范围，即无须刷新当前页面就可以实现与服务器的交互的技术，这种技术就是Ajax。与Java,JSP等是一种单独的技术不同，Ajax是一系列技术的集合，例如在时下与服务器的异步通信是需要用到XML,JavaScript和XMLHttpRequest等，使用这儿种技术可以实现与服务器的异步通信，所以Ajax是这儿种技术的综合体。传统的Web应用程序中，每个用户的请求都会重新刷新整个页面，而采用Ajax以后，只需要刷新局部的页面即可。实现与服务器的异步通信，这就是Ajax技术的核心所在。

上一页下一页返回11.1Ajax概述Ajax作为新近流行的技术，有优势也有劣势。其优势主要体现在以下几点。(1)AjaX可以在静态页面上动态地调用服务器的资源，大大减少了用户的等待时间，使界面更加友好。(2)Ajax允许用户的操作与服务器的操作异步进行，在服务器响应用户操作的同时，用户可以执行其他操作。(3)Ajax允许一些常规操作在客户端进行，有利于减轻服务器的负担。(4)使用Ajax技术，不必更新全部网页，只需要更新需要更新的内容或部分页面。大大减少了用户的等待时间，使界面更加友好。上一页下一页返回11.1Ajax概述Ajax的劣势主要体现在以下儿点。(1)由于Ajax是在客户端执行的，所以在编程时必须考虑客户可能用到的所有浏览器的类型。(2)由于Ajax需要在客户端执行一些操作，所以会在客户端占用更多的资源。(3)由于Ajax的脚本语言是直接存放在页面的HTML中的，所以不利于项日代码的保密。(4)由于Ajax可以不刷新页面就更新数据，通常会导致浏览器的“后退”功能失效。Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同上一页下一页返回11.1Ajax概述的浏览器和平台上经过严格的测试。同时，一些手持设备(如手机、PDA等)现在还不能很好地支持Ajax。Ajax的无刷新技术被认为是WPb技术上的一大突破，开发人员在使用Ajax技术时，不需要学习一种新的语言，也不必完全丢掉原先掌握的服务器端技术。因为Ajax是一个客户端技术，不论现在使用何种服务器技术(,lava,.NET,Ruby,PHP等)，都能使用Ajax。上一页下一页返回11.1Ajax概述11.1.3

案例一:应用Ajax局部刷新显示用户【案例功能】局部刷新显示用户姓名。【案例日标】体验Ajax技术的应用并了解Ajax程序的基本枢架。

【案例要点】Ajax程序的基本枢架、Ajax技术在JSP中使用的一般形式、Ajax技术在JSP中的应用。

【案例步骤】

(1)创建JSP页面。【源码】AjaxShow.java上一页下一页返回11.1Ajax概述上一页下一页返回11.1Ajax概述上一页下一页返回11.1Ajax概述上一页下一页返回11.1Ajax概述【代码说明】在上面这个JSP页面中，使用JavaScript创建了XMLHttpRequest对象，通过这个对象把用户的输入信息作为参数传递给服务器。而且在JSP页面中，还接收服务器返回的处理结果，并在制定的区域中显示处理结果。下一节将对这些代码进行详细解释。(2)编写Servlet用于接收来自客户端的请求。【源码]】SayHello.java上一页下一页返回11.1Ajax概述上一页下一页返回11.1Ajax概述上一页下一页返回11.1Ajax概述【代码说明】在Servlet中，接收XMLHttpRequest对象传递过来的参数，并且根据处理的结果生成XML文档，然后把这个XML文档返回给JSP页面(3)修改配置文件web.Xml。【源码】web.xml上一页下一页返回11.1Ajax概述上一页下一页返回11.1Ajax概述(4)部署。(5)启动Tomcat，在浏览器中输入http://127.0.0.1:8080/ch10/AjaxShow.jsp，运行结果如图11-1所示。上一页返回11.2Ajax的工作原理Ajax作为JavaScript和XML等技术的结合体，通过页面与后台处理的异步进行来减少用户的等待时间和服务器的负担。基于这一特性，Ajax可以在普通的HTML页面上实现类似于软件界面的操作，在现代Web应用中逐渐流行起来。如图11-2所示，在一般的Web应用程序中，用户填写表单字段并单击“提交”按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本(通常是PHP或Java，也可能是CGI进程或者类似的东西)，脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空自，等到下一页返回11.2Ajax的工作原理服务器返回数据后再重新绘制。这就造成了交互性比较差，用户得不到立即反馈，因此感觉不同于桌面应用程序。Ajax把JaVaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据发送给一些JaVaScript代码而不是直接发送给服务器。相反，JaVaScript代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JaVaScript代码在幕后发送请求，用户甚至不知道请求的发出。请求是异步发送的，也就是说JaVaScript代码(和用户)不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。上一页下一页返回11.2Ajax的工作原理然后，服务器将数据返回JavaScript代码(仍然在Web表单中)，后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预!这就是XMLHttpRequest的强大之处。它可以根据需要自行与服务器进行交互，用户甚至完全不知道幕后发生的一切。

Ajax是通过Ajax引擎来实现Web页面与服务器的交互，达到客户端与服务器断的透明交互的，如图11-3所示。上一页下一页返回11.2Ajax的工作原理在基于Ajax的Web应用模型中，用户在页面上获得的数据是通过Ajax引擎提供的。由于页面不需要直接与服务器进行交互，因此客户端浏览器不需要刷新页面就能获得服务器的信息，大大提高了相应速度和页面的友好度。Ajax实质上也遵循Request/Server模式，所以这个框架基本的流程如下。

(1)创建XMLHttpRequest对象。(2)使用XMLHttpRequest对象发送请求。(3)服务器端处理用户请求。(4)客户端处理服务器相应。只不过这个过程是异步的。上一页下一页返回11.2Ajax的工作原理11.2.1

创建XMLHttpRequest对象XMLHttpRequest对象在Ajax中占据十分重要的地位，Ajax中的客户端就是通过XMLHttpRequest对象实现与服务器通信的。XMLHttpRequest对象需要在发送请求和接收响应之前创建。在IE浏览器中，XMLHttpRequest对象是以ActiveX组建的形式提供的;而在其他浏览器中则使用JavaScript的本地方法来创建。所以在创建XMLHttpRequest对象的时候，需要对此差别进行对应的判断和处理下面的代码就是创建XMLHttpRequest对象的通用代码上一页下一页返回11.2Ajax的工作原理上一页下一页返回11.2Ajax的工作原理【代码说明】(I)第3-5行:window.XMLHttpRequest可以用来判断浏览器是否通过JavaScript本地方法支持XMLHttpRequest对象，如果是，就用newXMLHttpRequest(

)创建这个对象，这就是除IE浏览器外，在其他浏览器中创建XMLHttpRequest对象的方法。(3)第8-14行:用window.ActiveXObject可以判断浏览器是否支持ActiveX，在IE浏览器中是通过ActiveX组件来支持XMLHttpRequest对象的，如果浏览器支持ActiveX，就可以使用newActiveXObject方法来创建XMLHttpRequest对象。在不同版本的IE浏览器中，对XMLHttpRequest对象的支持方法有所不同，可以通过代码中的判断来适应不同版本的IE浏览器。

上一页下一页返回11.2Ajax的工作原理在XMLHttpRequest对象创建以后，就可以对这个对象进行各种不同的操作，从而完成和服务器的通信。XMLHttpRequest对象的常用方法见表11-1。其中，open方法的参数见表11-2。在使用XMLHttpRequest对象时，需要通过属性获得其状态和信息。XMLHttpRequest对象的常用属性见表11-3。上一页下一页返回11.2Ajax的工作原理11.2.2

客户端向服务器发送请求在Ajax中，向服务器端发送请求使用的是XMLHttpRequest对象，在XMLHttpRequest对象成功创建以后，就可以通过这个对象与服务器进行通信。在向服务器发送请求之前，首先使用XMLHttpRequest对象的open方法建立对服务器的调用，然后才能向服务器发送请求信息。在成功创建XMLHttpRequest对象以后，可以使用下面的JavaScript代码向服务器发送请求。上一页下一页返回11.2Ajax的工作原理上一页下一页返回11.2Ajax的工作原理【代码说明】(1)第2行:调用11.2.1节介绍的creatXMLHttpRequest()方法来创建XMLHttpRequest对象。新创建的XMLHttpRequest对象的名称为XMLHttpReq，在后面的程序中可以通过这个名称来访问XMLHttpRequest对象。(2)第3行:调用XMLHttpRequest对象的open方法向服务器发送请求。url是访问服务器资源的位置，例如本例访问的服务器资源是http;://localhost:8080/ch10/SayHello,那么就需要在url中填入上面这个Servlet的访问路径。(3)第5行:但是当Ajax发送一个请求后，客户端无法确定什么时候会完成这个请求，所以需要用事件机制来捕获请求的状态，上一页下一页返回11.2Ajax的工作原理XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能。这类似于回调函数的做法。onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果。handleResponse是自定义的一个事件处理函数，用于处理服务器的响应内容，通常在事件中判断readyState的值是在请求完毕时才做处理的。handleResponse11函数功能在11.2.4节做详细介绍。(4)第7行:在传统的Web应用中，需要通过表单向服务器提交自己的输入信息，但是这种提交方式会刷新整个页面，而在Ajax中要实现的就是与服务器端的异步通信，所以不能使用表单向服务器发送请求信息。当请求内容比较少时，可以使用显示传参的方式，例如上一页下一页返回11.2Ajax的工作原理http://localhost:8080/ch10/SayHello?name=jdgeorge，访问的是SayHello这个Servlt,而且在经历服务器调用的同时传递了一个name=jdgeorge的参数。这种传值方式和一般Web页面中通过超链接传值方式的原理是一样的。在使用这种方式想服务器发送信息时，将http://localhost:8080/ch10/SayHello?name=jdgeorge赋给第3行代码中open方法的url参数即可，send方法中的参数可以用null代替。当向服务器发送的内容比较多而且格式比较复杂时，使用显示传参的方式就不现实了。在这种情况下，可以把要发送的内容组织成XML文档，然后通过send(“content”)就可以把参数的内容发送到服务器，其中content参数就是XML文档的内容。上一页下一页返回11.2Ajax的工作原理11.2.3服务器端处理用户请求在Ajax中，服务器接收到用户的请求以后，可以根据请求的内容进行相应的操作，然后把操作以合适的格式返回给客户端。服务器断的处理方式有很多种选择，可以选择JSP,ASP,CGI和Servlet中的任意一种作为相应客户端请求的服务程序，在本例中选择Servlet来实现服务器端逻辑处理的功能。由于客户端想服务器发送信息的时候，可以选择多种方式进行发送，所以服务器端就需要根据客户端发送信息的方式，对接收到的信息进行分析，从而取出进一步操作所需要的信息。当客户端使用超链接传递参数的时候，服务器端的处理比较简单，仅仅通过:request.getParameter(“参数名称”)就可以取出对应参数的值上一页下一页返回11.2Ajax的工作原理然后根据取得的值进行相应的逻辑操作。当客户端使用XML格式发送请求信息的时候，在服务器端就需要对接收的XML文档进行分析，可以使用DOM或者SAX从这个XML文档中取出需要的信息，然后才能进行相应的逻辑操作。在服务器端完成用户需要的逻辑处理后，需要把处理的结果返回给用户，在这种情况下，一般是把处理的结果组织成XML的格式，然后把这个XML文档返回给客户端。本例通过Servlet处理客户端的请求，在Servlet中可以完成对用户请求的处理，然后通过Servlet把处理的结果以XML的格式返回给客户端，Servlet代码如下。上一页下一页返回11.2Ajax的工作原理上一页下一页返回11.2Ajax的工作原理【代码说明】(1)第13行:生成XML文档内容。(2)第14行:把生成的内容放在PrintWriter对象中返回给用户。上一页下一页返回11.2Ajax的工作原理11.2.4

客户端处理服务器响应当服务器端结束对用户请求的处理以后，会把处理的结果返回给用户，在客户端对返回的内容进行处理，然后根据其处理结果对页面的内容进行调整，到这一步为止，客户端对服务器端的异步通信就完成了当服务器端用PrintWriter对象返回一般字符串时，在客户端可以通过XMLHttpRequest对象的reponseText属性取出服务器返回的内容更多时候，服务器会用XML文档返回逻辑处理的结果，在客户端可以通过XMLHttpRequest对象的reponseXML属性取出服务器返回的响应文档。在JavaScript中，可以用DOM方式分析这个XML文档，从而取出用户需要的内容。上一页下一页返回11.2Ajax的工作原理在对服务器返回的响应文档而解析结束以后，就可以根据解析的结果来调整页面的内容，从而把服务器的处理结果表现在页面上。通常情况下会使用JavaScript来完成这个任务，通过使用innerText或者innerHTML可以设置HTML页面元素内的显示内容;通过DOM操作，可以动态创建HTML元素;通过CSS可以控制页面HTML元素的显示风格。通过这些操作把服务器返回的处理结果充分展现在页面上，从而最终完成客户端和服务器的异步通信，这种处理方式不会对整个页面进行刷新。下面的案例代码展示了如何在客户端处理服务器的响应信息。上一页下一页返回11.2Ajax的工作原理上一页下一页返回11.2Ajax的工作原理【代码说明】

(1)第3行:当XMLHttpRequest的readyState属性为4时，说明请求的处理已经完成。(2)第5行:当XMLHttpRequest对象的status属性为200时，说明服务器的处理信息已经成功返回，可以取出返回的信息进行分析处理了。(3)第7行:使用XMLHttpRequest对象的responseXML属性取出XML响应文档。(4)第8行:使用DOM方式解析文档。(5)第9行:把解析的结果展示在HTML页面中。上一页返回11.3Ajax的典型应用11.3.1

案例二:注册用户身份验证【案例功能】验证用户注册身份的有效性。【案例日标】掌握使用Ajax技术检测用户身份的方法。【案例要点】用户注册功能的设计、身份验证功能的实现、Ajax技术在验证注册用户疾份功能中的应用。【案例步骤】(1)创建JSP页面。【源码】UserCheck.jsp下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用【代码说明】①第8-24行:crealeXMLHttpRequest(

)函数内容，创建XMLHttpRequest对象。②第26-37行:handleResponse(

)函数内容，客户端处理服务器相应，根据Servlet处理结果，输出信息。③第39-46行:sendRequest()函数内容，客户端向服务器端发送请求(2)在ch10中编写连接数据库的代码。【源码】beans.ConnDB.java上一页下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用(3)在ch10中编写Servlet代码。【源码】servlels.UserCheck.java上一页下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用上一页下一页返回11.3Ajax的典型应用(4)修改配置文件web.Xml。【源码】web.xml上一页下一页返回11.3Ajax的典型应用(5)部署。(6)启动Tomcat，在浏览器中输入http://localhost:8080/ch10/UserCheck.jsp，运行结果如图11-4和图11-5所示。上一页下一页返回11.3Ajax的典型