java web编程学习(精品).ppt

《java web编程学习(精品).ppt》由会员分享，可在线阅读，更多相关《java web编程学习(精品).ppt（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第9 9章章 AjaxAjax技术基础知识技术基础知识Ajax技术是一个可以构建动态的、响应迅速的技术是一个可以构建动态的、响应迅速的Web应应用程序，并可以使用程序，并可以使Web应用程序界面达到传统桌面程序的应应用程序界面达到传统桌面程序的应用效果。可以提高用户对用效果。可以提高用户对Web程序的控制力与响应速度。本程序的控制力与响应速度。本章将介绍章将介绍Ajax技术的含义、核心技术以及它与传统的技术的含义、核心技术以及它与传统的Web开开发模式的区别。本章重点：发模式的区别。本章重点：了解了解Ajax技术的基础知识。技术的基础知识。Ajax主要核心技术的作用与使用。主要核心技术的作用

2、与使用。提交信息时，无刷新页面与刷新页面的比较。提交信息时，无刷新页面与刷新页面的比较。Ajax技术的具体应用实例。技术的具体应用实例。9.1 9.1 AjaxAjax概述概述Ajax目前是在目前是在Web2.0热潮中，人们谈论最频繁的技术热潮中，人们谈论最频繁的技术术语之一。其实，术语之一。其实，Ajax是不一种技术，它只是由多种功能强是不一种技术，它只是由多种功能强大的技术的综合体。它可以实现用大的技术的综合体。它可以实现用JavaScript对对XML的操作，的操作，使用使用DOM模型实现内容的动态显示等。因此，模型实现内容的动态显示等。因此，Ajax技术在技术在Web开发中是不可缺少的

3、。在本小节中，将介绍开发中是不可缺少的。在本小节中，将介绍Ajax技术的技术的基本知识包括：基本知识包括：Ajax的基本概念、的基本概念、Ajax的工作原理、的工作原理、Ajax的开发模式以及一个简单的的开发模式以及一个简单的Ajax示例。示例。9.1.1 9.1.1 AjaxAjax的基本概念的基本概念Ajax是是Asynchronous JavaScript And XML的简称，的简称，它是由它是由Adaptive Path公司的公司的Jesse James Garrett首次提首次提出的，它的意思是异步出的，它的意思是异步JavaScript和和XML，它不是一项新技它不是一项新技术，

4、而是一种可以实现动态交互的网页开发技术，它主要包术，而是一种可以实现动态交互的网页开发技术，它主要包括的技术如下：括的技术如下：（1）基于）基于web标准的标准的XHTML+CSS表示。表示。（2）使用）使用DOM（Document Object Model）进行动进行动态显示和交互。态显示和交互。（3）使用）使用XML和和XSLT标签进行数据交换操作。标签进行数据交换操作。（4）使用）使用XMLHttpRequest与服务器进行异步数据查与服务器进行异步数据查询和检索。询和检索。（5）使用）使用JavaScript绑定。绑定。9.1.2 9.1.2 AjaxAjax的工作原理的工作原理Aja

5、x的工作原理其实就是创建一个的工作原理其实就是创建一个XmlHttpRequest对对象，并用该对象向服务器发送异步请求，当获取从服务器返象，并用该对象向服务器发送异步请求，当获取从服务器返回的数据时，便使用回的数据时，便使用javascript的的DOM模型对象更新页面。模型对象更新页面。在使用在使用Ajax开发的程序中，最主要的特点就是将同步开发的程序中，最主要的特点就是将同步请求转换成异步请求。异步请求则表客户端和服务器之间不请求转换成异步请求。异步请求则表客户端和服务器之间不需要时间等待，也就是说在服务器接收请求后，在处理的过需要时间等待，也就是说在服务器接收请求后，在处理的过程中，客

6、户端不必处于休眠状态等待结果，相反它可以进行程中，客户端不必处于休眠状态等待结果，相反它可以进行其他的操作。当结果返回时，它在处理返回后的结果。例如：其他的操作。当结果返回时，它在处理返回后的结果。例如：小小A和小和小B两人去买饭，小两人去买饭，小A要吃包子而小要吃包子而小B则要吃馒头，如则要吃馒头，如果小果小B在等小在等小A买完包子后，在一起去买馒头，那么这个过买完包子后，在一起去买馒头，那么这个过程就相当于同步；如果小程就相当于同步；如果小B在小在小A买包子时，而自己去买馒买包子时，而自己去买馒头，那么这个过程就相当于是异步。头，那么这个过程就相当于是异步。9.1.3 9.1.3 Ajax

7、Ajax的开发模式的开发模式在传统在传统Web的开发中，采取的是请求的开发中，采取的是请求刷新刷新显示的显示的开发模式，每个请求都是通过一个单独的页面显示出来的，开发模式，每个请求都是通过一个单独的页面显示出来的，页面的刷新其实指的就是重新请求该页面。所以每发送一个页面的刷新其实指的就是重新请求该页面。所以每发送一个请求时，页面都会刷新一次。当用户单击按扭或超链接向服请求时，页面都会刷新一次。当用户单击按扭或超链接向服务器送请求时，由服务器直接接收并处理，处理完毕后，再务器送请求时，由服务器直接接收并处理，处理完毕后，再将处理结果返回给客户端的浏览器。然而是服务器处理的过将处理结果返回给客户端

8、的浏览器。然而是服务器处理的过程中，浏览器一直处于休眠状态，显示为程中，浏览器一直处于休眠状态，显示为“正在打开网页正在打开网页”，此时用户只能等待处理结果。，此时用户只能等待处理结果。相比起传统的相比起传统的Web开发，开发，Ajax更趋向于传统桌面程序，更趋向于传统桌面程序，使使Web页面越来越独立化。使用页面越来越独立化。使用Ajax的主要目的是告诉用户的主要目的是告诉用户浏览器正在干什么，而用户可以一边进行其他方面的操作一浏览器正在干什么，而用户可以一边进行其他方面的操作一边等待处理结果。边等待处理结果。9.2 9.2 AjaxAjax核心技术核心技术在前面的概述中讲到在前面的概述中讲

9、到Ajax是由多种技术组合在一起的，是由多种技术组合在一起的，其中包括其中包括XMLHTTPRequest对象、对象、JavaScript脚本语言、脚本语言、DOM对象文档模型、对象文档模型、CSS样式表以及样式表以及XML可扩展标记语言。可扩展标记语言。其中后四项技术每个人都很了解它们的使用方法和具体作用，其中后四项技术每个人都很了解它们的使用方法和具体作用，那么在这里就简单的介绍一下。对于那么在这里就简单的介绍一下。对于XMLHTTPRequest是是一个不经常见并使用较少的技术，在本章会详细介绍一个不经常见并使用较少的技术，在本章会详细介绍XMLHTTPRequest的具体作用与使有方法

10、。的具体作用与使有方法。9.2.1 9.2.1 XMLHttpRequestXMLHttpRequest技术技术XMLHttpRequest对象是在对象是在JavaScript中创建并使用，中创建并使用，在在Ajax程序任何一个功能都不能缺少程序任何一个功能都不能缺少XMLHttpRequest对象，对象，例如：例如：XMLHttpRequest+DOM+CSS可实现局部刷新的功可实现局部刷新的功能；单独使用能；单独使用XMLHttpRequest对象可以实现页面无刷新的对象可以实现页面无刷新的功能。在本节中，将会介绍功能。在本节中，将会介绍XMLHttpRequest的属性和方法、的属性和方

11、法、XMLHttpRequest的创建流程和综合实例。的创建流程和综合实例。1 1XMLHttpRequestXMLHttpRequest的属性、方法和事件的属性、方法和事件XMLHttpRequest技术是整个技术是整个Ajax的核心，它具有可的核心，它具有可以在网页的背后和浏览器进行异步通信，而无需刷新整个页以在网页的背后和浏览器进行异步通信，而无需刷新整个页面的作用。所以如果没有它，那么面的作用。所以如果没有它，那么Ajax将无法工作。将无法工作。XMLHttpRequest对象利用它自身的各种属性、方法和事件对象利用它自身的各种属性、方法和事件方便方便JavaScript脚本处理和控制

12、脚本处理和控制HTTP请求与响应。请求与响应。2 2XMLHttpRequestXMLHttpRequest的创建流程的创建流程上节课我们学习了上节课我们学习了ajax的核心技术的核心技术XMLHTTPRequest，这节我们来具体的说一下它是如何发送和接收这节我们来具体的说一下它是如何发送和接收XMLHTTPRequest请求的基本过程。总体上说，有请求的基本过程。总体上说，有6个步骤：个步骤：（1）创建）创建XMLHTTPRequest对象，并初始化。对象，并初始化。（2）发送请求）发送请求（3）服务器接收请求进行处理）服务器接收请求进行处理（4）返回响应数据）返回响应数据（5）客户端接收

13、并处理返回的结果）客户端接收并处理返回的结果（6）依据响应数据修改客户端页面内容）依据响应数据修改客户端页面内容9.2.2 9.2.2 JavaScriptJavaScript（JavaJava脚本语言）脚本语言）JavaScript是一种脚本语言，它可以使用在是一种脚本语言，它可以使用在HTML、JSP等等Web页网中，动态的完成由某种操作所产生的动作，页网中，动态的完成由某种操作所产生的动作，同时也会产生一些特殊的效果，比如：图片或文字可以随着同时也会产生一些特殊的效果，比如：图片或文字可以随着鼠标移动、会滚动的文字以及美丽的烟花效果等。鼠标移动、会滚动的文字以及美丽的烟花效果等。在在Aj

14、ax中，中，JavaScript也起到重要的作用，它就像一也起到重要的作用，它就像一座无形的桥梁将座无形的桥梁将HTML与与DOM、XMLHttpRequest、CSS以以及及XML等对象联系起来。等对象联系起来。Ajax利用利用Javascript的特有的事件的特有的事件实现实现Web应用程序与用户行为之间触发的请求应用程序与用户行为之间触发的请求响应响应处理处理等一系列的动作，包括鼠标的监听事件、键盘的监听事件、等一系列的动作，包括鼠标的监听事件、键盘的监听事件、页面的载入或离开事件以及获页面的载入或离开事件以及获/失焦点事件等。而可以触发失焦点事件等。而可以触发Javascript事件的

15、绝大多数是表单元素，通过这些元素所具事件的绝大多数是表单元素，通过这些元素所具有的事件来控制响应用户的操作行为，有的事件来控制响应用户的操作行为，9.2.3 9.2.3 DOMDOM（文档对象模型）文档对象模型）DOM也称为文档对象模型，它封装了许多可以对文档也称为文档对象模型，它封装了许多可以对文档对象操作的接口，例如可以对对象操作的接口，例如可以对HTML操作的接口、对操作的接口、对XML操操作的接口。作的接口。在在Ajax中，中，DOM的主要作用是将从服务器上返回来的的主要作用是将从服务器上返回来的处理结果显示在客户端浏览器上，来更改页面内容。如果，处理结果显示在客户端浏览器上，来更改页

16、面内容。如果，没有没有DOM，那么局部刷新、异步请求等操作将无法进行。那么局部刷新、异步请求等操作将无法进行。所支所支DOM也是也是Ajax中不可缺少的内容之一。下面表中不可缺少的内容之一。下面表9.3和和9.4分别列出了分别列出了DOM结点的属性和方法，结点的属性和方法，9.2.4 9.2.4 CSSCSS（样式表）样式表）由于由于Java Web开发越来越来注意页面的美化效果，所开发越来越来注意页面的美化效果，所以，以，CSS也是越来越来红火了。在也是越来越来红火了。在Ajax中，中，CSS同样肩负的同样肩负的美化页面的重担。在美化页面的重担。在JavaScript中，利用中，利用HTML

17、标签来控制标签来控制页面的外观与布局，无疑会代码的数量大增，加重了运行的页面的外观与布局，无疑会代码的数量大增，加重了运行的压力与维护的难度。同时，也便整个代码杂乱无章，无法将压力与维护的难度。同时，也便整个代码杂乱无章，无法将开发人员和美工人员的工作区分开，不便于修改。如果使用开发人员和美工人员的工作区分开，不便于修改。如果使用CSS则会很好的解决上述问题中的麻烦。美工人员只需将控则会很好的解决上述问题中的麻烦。美工人员只需将控制页面的样式写入一个制页面的样式写入一个*.css文件中即可，开发人员只需通文件中即可，开发人员只需通过过语句便可以将全部的样式导入进来，就语句便可以将全部的样式导入

18、进来，就可以根据设置的类属性和可以根据设置的类属性和id属性对元素进行相应的样式控制。属性对元素进行相应的样式控制。9.2.5 XML9.2.5 XMLXML是一种可扩展的标记语言。它的使用语法与是一种可扩展的标记语言。它的使用语法与HTML的语法在某种程度上相类似。它也是由标签和文本组成的，的语法在某种程度上相类似。它也是由标签和文本组成的，但在定义方式和突出内容上略有不同。如：但在定义方式和突出内容上略有不同。如：HTML中的标签中的标签是定义好的，不可以更改的，而是定义好的，不可以更改的，而XML中的标签是由用户自定中的标签是由用户自定义的；义的；HTML标记主要倾向于文本的显示形式，例

19、如：字体标记主要倾向于文本的显示形式，例如：字体的颜色、大小、相对位置等，而的颜色、大小、相对位置等，而XML则更关心与文本的内容，则更关心与文本的内容，与样式无关。与样式无关。由于由于XML具有较强的表达能力和良好的通用性，因此具有较强的表达能力和良好的通用性，因此成为数据间信息交换的最佳选择。所以成为数据间信息交换的最佳选择。所以Ajax也选择了也选择了XML作作为客户端与服务器端之间的通信。在为客户端与服务器端之间的通信。在Ajax中，中，XML被作为一被作为一种数据信息的载体，它将客户端的信息放入种数据信息的载体，它将客户端的信息放入XML提交给服务提交给服务器进行处理。器进行处理。9

20、.3 9.3 实现录入实现录入显示信息的显示信息的WebWeb方式方式通过第一节的学习，了解了通过第一节的学习，了解了Web开发与开发与Ajax开发上的开发上的区别，下面在本节中将分别介绍这两种形式的开发流程，然区别，下面在本节中将分别介绍这两种形式的开发流程，然后找出两者间不同之处。下面实现一个从表单上录入信息提后找出两者间不同之处。下面实现一个从表单上录入信息提交给交给Servlet，然后再将返回来的结果重新显示在该页面上。然后再将返回来的结果重新显示在该页面上。它的实现具体可以分为以下几个步骤：它的实现具体可以分为以下几个步骤：（1）编写客户端的）编写客户端的JSP页面，可以进行相关信息

21、的录页面，可以进行相关信息的录入和对信息的显示。入和对信息的显示。（2）编写服务端的）编写服务端的Servlet，将传来的信息变成将传来的信息变成XML格格式并返回。式并返回。（3）在）在Tomcat中对中对Servlet程序进行访问配置。程序进行访问配置。（4）启动）启动Tomcat服务器，查看运行结果服务器，查看运行结果9.3.1 9.3.1 编写编写JSPJSP页面页面Student_Web.Student_Web.jspjspWeb的请求响应模式为：请求的请求响应模式为：请求刷新刷新显示。所以在显示。所以在使用使用Web请求响应方式时，首先是将客户端中的用户信息提请求响应方式时，首先是

22、将客户端中的用户信息提交给服务器，服务器端接收请求并进行处理，并把处理结果交给服务器，服务器端接收请求并进行处理，并把处理结果重新返回给客户端，在这个过程中需要刷新整个页面才能得重新返回给客户端，在这个过程中需要刷新整个页面才能得到服务器返回的结果。到服务器返回的结果。Student_Web.jsp的主要作用向服务的主要作用向服务器提交了信息、发送请求，在本程序中将会由下面的器提交了信息、发送请求，在本程序中将会由下面的Servlet来接收、处理。来接收、处理。9.3.2 9.3.2 编写编写ServletServlet程序程序Student_Web.javaStudent_Web.javaS

23、tudent_Web.java的主要作用是处理该的主要作用是处理该Servlet接收到接收到请求，在本程序的第请求，在本程序的第5-8行从行从request中获取传递的参数，第中获取传递的参数，第9-12行处理信息，第行处理信息，第13行将处理结果放入行将处理结果放入request或或session中。第中。第14行通过行通过request.getRequestDispatcher()跳转到跳转到Student_Web.jsp页面。页面。9.3.3 9.3.3 配置配置web.web.xmlxml上面的程序需要在上面的程序需要在Java Web服务器上才可以运行，本服务器上才可以运行，本程序程

24、序Tomcat服务器为例。为了可以实现服务器为例。为了可以实现Servlet与与JSP之间之间的正确访问。所以需要对的正确访问。所以需要对Tomcat中的中的Java工程文件夹下工程文件夹下/WebRoot/WEB-INF/web.xml进行配置。进行配置。9.3.4 9.3.4 运行程序并查看输出结果运行程序并查看输出结果上面程序实现的功能非常简单，就是在页面显示的表单上面程序实现的功能非常简单，就是在页面显示的表单中填入相应的信息。然后单击中填入相应的信息。然后单击“提交提交”按扭，然后，表单中按扭，然后，表单中的内容就显示在了下面。注意，表单中刚才填写的信息都不的内容就显示在了下面。注意

25、，表单中刚才填写的信息都不存在了，整个表单的输入框中都是空的。那是因为提交表单存在了，整个表单的输入框中都是空的。那是因为提交表单以后，经过服务器处理，将结果返回时重新请求了以后，经过服务器处理，将结果返回时重新请求了JSP页面。页面。所以在得到处理结果的同时，文本框已经被刷新，输入的内所以在得到处理结果的同时，文本框已经被刷新，输入的内容就全都没有了。容就全都没有了。9.4 9.4 实现录入实现录入显示信息的显示信息的AjaxAjax方式方式在上面的实例中，演示了传统在上面的实例中，演示了传统Web的请求和响应处理的请求和响应处理方式，下面在本节中，将演示在方式，下面在本节中，将演示在Aja

26、x中如何处理请求响应的中如何处理请求响应的方式。它的实现步骤与传统方式。它的实现步骤与传统Web方法完全相同。下面就逐一方法完全相同。下面就逐一介绍每一步的具体操作方法。介绍每一步的具体操作方法。9.4.1 9.4.1 编写编写JSPJSP页面页面Student_Ajax.Student_Ajax.jspjsp在在Ajax处理请求响应的方式中，不会整个页面进行刷处理请求响应的方式中，不会整个页面进行刷新，对于用户的输入信息，并不依靠表单来提交，而是通过新，对于用户的输入信息，并不依靠表单来提交，而是通过XMLHttpRequest对象传递给服务器。对象传递给服务器。9.4.2 9.4.2 编写

27、编写ServletServlet程序程序Student_Ajax.javaStudent_Ajax.java当当Servlet接收到请求时，在第接收到请求时，在第8行会通过行会通过“request.getParameter(name);”的形式获取从的形式获取从XMLHttpRequest对象中传递过来的参数，然后处理信息，对象中传递过来的参数，然后处理信息，例如：第例如：第12行进行用户名、密码的判断，从数据库中获取与行进行用户名、密码的判断，从数据库中获取与信息相关的数据等。处理完毕后，会将结果生成一个信息相关的数据等。处理完毕后，会将结果生成一个XML文文档并返回给客户端。档并返回给客户

28、端。9.9.4.34.3 制做会走的时间制做会走的时间在在Ajax中有一个比较经典的功能就是可以实现局部的中有一个比较经典的功能就是可以实现局部的刷新。使用这种刷新方式不会影响到该页面的其他部分。下刷新。使用这种刷新方式不会影响到该页面的其他部分。下面给出一个只对时间部分进行刷新的功能，使时间的在不断面给出一个只对时间部分进行刷新的功能，使时间的在不断的变化，而其他的部分则没有受到一点影响。从页面上看效的变化，而其他的部分则没有受到一点影响。从页面上看效果，真的有和电子表一样的效果。该功能是由果，真的有和电子表一样的效果。该功能是由TimeRefresh.java和和TimeRefresh.jsp共同完成的。共同完成的。9.5 9.5 本章习题本章习题习题习题1 在浏览器端如何得到服务器端响应的在浏览器端如何得到服务器端响应的XML数据？数据？习题习题2 XMLHttpRequest对象在对象在IE和和Firefox中创建方式有中创建方式有没有不同？没有不同？习题习题3 介绍一下介绍一下XMLHttpRequest对象的常用方法和属性对象的常用方法和属性