教学材料《JSP设计与开发》-第11章 Ajax技术应用

1第10章Ajax技术应用学习要点Ajax的基本概念Ajax的工作原理编写Ajax的一般过程Ajax技术的典型应用210.1Ajax概述Ajax的全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，在现在的Web应用系统中得到了广泛的应用。从本质上讲，Ajax并不是一种全新的技术，它只是综合利用已经存在的各种技术，从而生成一种全新的应用。310.1.1Web开发技术演变过程Web应用程序发展至今大体经历了三个阶段，第一个阶段使用的是简单的静态页面，第二个阶段使用的是ASP、JSP和PHP等动态脚本语言，第三个阶段是Web2.0阶段，而Ajax就是Web2.0中的核心技术。在使用Ajax开发的Web程序中，可以模拟出类似传统桌面应用程序丰富的界面元素，还可以选择局部刷新页面，从而减小了用户与服务器交互的通信量。由于Ajax的这些特性，在其推出的短短几年中，已经在很多Web应用中得到了广泛的应用。410.1.2什么是Ajax与Java、JSP等是一种单独的技术不同，Ajax是一系列技术的集合，例如在时下与服务器的异步通信是，需要用到XML、JavaScript和XMLHttpRequest等，使用这几种技术可以实现与服务器的异步通信，所以Ajax是这几种技术的综合体。传统的Web应用程序中，每个用户的请求都会重新刷新整个页面，而采用Ajax以后，只需要刷新局部的页面即可。实现与服务器的异步通信，这就是Ajax技术的核心所在。510.1.2什么是AjaxAjax作为新近流行的技术，有优势也有劣势。其优势主要体现在以下几点。Ajax可以在静态页面上动态地调用服务器的资源，大大减少了用户的等待时间，使界面更加友好。Ajax允许用户的操作与服务器的操作异步进行，在服务器响应用户操作的同时，用户可以执行其他操作。Ajax允许一些常规操作在客户端进行，有利于减轻服务器的负担。使用Ajax技术，不必更新全部网页，只需要更新需要更新的内容或部分页面。大大减少了用户的等待时间，使界面更加友好。Ajax的劣势主要体现在以下几点。由于Ajax是在客户端执行的，所以在编程时必须考虑客户可能用到的所有浏览器的类型。由于Ajax需要在客户端执行一些操作，所以会在客户端占用更多的资源。由于Ajax的脚本语言是直接存放在页面的HTML中的，所以不利于项目代码的保密。由于Ajax可以不刷新页面就更新数据，通常会导致浏览器的“后退”功能失效。610.1.3案例一：应用Ajax局部刷新显示用户

【案例功能】局部刷新显示用户姓名。【案例目标】体验Ajax技术的应用并了解Ajax程序的基本框架。【案例要点】Ajax程序的基本框架、Ajax技术在JSP中使用的一般形式、Ajax技术在JSP中的应用。【案例步骤】（1）创建JSP页面。（2）编写Servlet用于接收来自客户端的请求。（3）修改配置文件web.xml。（4）部署。（5）启动Tomcat，在浏览器中输入:8080/ch10/AjaxShow.jsp，运行结果如图10-1所示。710.2Ajax的工作原理在一般的Web应用程序中，用户填写表单字段并单击提交按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本（通常是PHP或Java，也可能是CGI进程或者类似的东西），脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。810.2Ajax的工作原理Ajax把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据发送给一些JavaScript代码而不是直接发送给服务器。相反，JavaScript代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说JavaScript代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。然后，服务器将数据返回JavaScript代码（仍然在Web表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是XMLHttpRequest的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。910.2Ajax的工作原理Ajax实质上也遵循Request/Server模式，所以这个框架基本的流程是：创建XMLHttpRequest对象使用XMLHttpRequest对象发送请求服务器端处理用户请求客户端处理服务器相应只不过这个过程是异步的。1010.2.1创建XMLHttpRequest对象XMLHttpRequest对象在Ajax中占据十分重要的地位，Ajax中的客户端就是通过XMLHttpRequest对象实现与服务器通信的。XMLHttpRequest对象需要在发送请求和接收响应之前创建。在IE浏览器中，XMLHttpRequest对象是以ActiveX组建的形式提供的；而在其他浏览器中则使用JavaScript的本地方法来创建。所以在创建XMLHttpRequest对象的时候，需要对此差别进行对应的判断和处理。下面的代码就是创建XMLHttpRequest对象的通用代码。1110.2.2客户端向服务器发送请求在Ajax中，向服务器端发送请求使用的是XMLHttpRequest对象，在XMLHttpRequest对象成功创建以后，就可以通过这个对象与服务器进行通信。在向服务器发送请求之前，首先使用XMLHttpRequest对象的open方法建立对服务器的调用，然后才能向服务器发送请求信息。1210.2.3服务器端处理用户请求在Ajax中，服务器接收到用户的请求以后，可以根据请求的内容进行相应的操作，然后把操作以合适的格式返回给客户端。服务器断的处理方式有很多种选择，可以选择JSP、ASP、CGI和Servlet中的任意一种作为相应客户端请求的服务程序，在本例中选择Servlet来实现服务器端逻辑处理的功能。由于客户端想服务器发送信息的时候，可以选择多种方式进行发送，所以服务器端就需要根据客户端发送信息的方式，对接收到的信息进行分析，从而取出进一步操作所需要的信息。当客户端使用超链接传递参数的时候，服务器端的处理比较简单，仅仅通过request.getParameter("参数名称")就可以取出对应参数的值，然后根据取得的值进行相应的逻辑操作。当客户端使用XML格式发送请求信息的时候，在服务器端就需要对接收的XML文档进行分析，可以使用DOM或者SAX从这个XML文档中取出需要的信息，然后才能进行相应的逻辑操作。在服务器端完成用户需要的逻辑处理后，需要把处理的结果返回给用户，在这种情况下，一般是把处理的结果组织称XML的格式，然后把这个XML文档返回给客户端。1310.2.4客户端处理服务器响应当服务器端结束对用户请求的处理以后，会把处理的结果返回给用户，在客户端对返回的内容进行处理，然后根据其处理结果对页面的内容进行调整，到这一步为止，客户端对服务器端的异步通信就完成了。当服务器端用PrintWriter对象返回一般字符串时，在客户端可以通过XMLHttpRequest对象的responseText属性取出服务器返回的内容。更多时候，服务器会用XML文档返回逻辑处理的结果，在客户端可以通过XMLHttpRequest对象的responseXML属性取出服务器返回的响应文档。在JavaScript中，可以用DOM方式分析这个XML文档，从而取出用户需要的内容。在对服务器返回的响应文档文档解析结束以后，，就可以根据解析的结果来调整页面的内容，从而把服务器的处理结果表现在页面上。通常情况下会使用JavaScript来完成这个任务，通过使用innerText或者innerH