java web编程学习.ppt

1、第9章 Ajax技术基础知识,Ajax技术是一个可以构建动态的、响应迅速的Web应用程序，并可以使Web应用程序界面达到传统桌面程序的应用效果。可以提高用户对Web程序的控制力与响应速度。本章将介绍Ajax技术的含义、核心技术以及它与传统的Web开发模式的区别。本章重点： 了解Ajax技术的基础知识。 Ajax主要核心技术的作用与使用。 提交信息时，无刷新页面与刷新页面的比较。 Ajax技术的具体应用实例。,9.1 Ajax概述,Ajax目前是在Web2.0热潮中，人们谈论最频繁的技术术语之一。其实，Ajax是不一种技术，它只是由多种功能强大的技术的综合体。它可以实现用JavaScript对X

2、ML的操作，使用DOM模型实现内容的动态显示等。因此，Ajax技术在Web开发中是不可缺少的。在本小节中，将介绍Ajax技术的基本知识包括：Ajax的基本概念、Ajax的工作原理、Ajax的开发模式以及一个简单的Ajax示例。,9.1.1 Ajax的基本概念,Ajax是Asynchronous JavaScript And XML的简称，它是由Adaptive Path公司的Jesse James Garrett首次提出的，它的意思是异步JavaScript和XML，它不是一项新技术，而是一种可以实现动态交互的网页开发技术，它主要包括的技术如下： （1）基于web标准的XHTML+CSS表示。

3、 （2）使用DOM（Document Object Model）进行动态显示和交互。 （3）使用XML和XSLT标签进行数据交换操作。 （4）使用XMLHttpRequest与服务器进行异步数据查询和检索。 （5）使用JavaScript绑定。,9.1.2 Ajax的工作原理,Ajax的工作原理其实就是创建一个XmlHttpRequest对象，并用该对象向服务器发送异步请求，当获取从服务器返回的数据时，便使用javascript的DOM模型对象更新页面。 在使用Ajax开发的程序中，最主要的特点就是将同步请求转换成异步请求。异步请求则表客户端和服务器之间不需要时间等待，也就是说在服务器接收请求

4、后，在处理的过程中，客户端不必处于休眠状态等待结果，相反它可以进行其他的操作。当结果返回时，它在处理返回后的结果。例如：小A和小B两人去买饭，小A要吃包子而小B则要吃馒头，如果小B在等小A买完包子后，在一起去买馒头，那么这个过程就相当于同步；如果小B在小A买包子时，而自己去买馒头，那么这个过程就相当于是异步。,9.1.3 Ajax的开发模式,在传统Web的开发中，采取的是请求刷新显示的开发模式，每个请求都是通过一个单独的页面显示出来的，页面的刷新其实指的就是重新请求该页面。所以每发送一个请求时，页面都会刷新一次。当用户单击按扭或超链接向服务器送请求时，由服务器直接接收并处理，处理完毕后，再将处

5、理结果返回给客户端的浏览器。然而是服务器处理的过程中，浏览器一直处于休眠状态，显示为“正在打开网页”，此时用户只能等待处理结果。 相比起传统的Web开发，Ajax更趋向于传统桌面程序，使Web页面越来越独立化。使用Ajax的主要目的是告诉用户浏览器正在干什么，而用户可以一边进行其他方面的操作一边等待处理结果。,9.2 Ajax核心技术,在前面的概述中讲到Ajax是由多种技术组合在一起的，其中包括XMLHTTPRequest对象、JavaScript脚本语言、DOM对象文档模型、CSS样式表以及XML可扩展标记语言。其中后四项技术每个人都很了解它们的使用方法和具体作用，那么在这里就简单的介绍一下

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

7、的属性、方法和事件,XMLHttpRequest技术是整个Ajax的核心，它具有可以在网页的背后和浏览器进行异步通信，而无需刷新整个页面的作用。所以如果没有它，那么Ajax将无法工作。XMLHttpRequest对象利用它自身的各种属性、方法和事件方便JavaScript脚本处理和控制HTTP请求与响应。,2XMLHttpRequest的创建流程,上节课我们学习了ajax的核心技术XMLHTTPRequest，这节我们来具体的说一下它是如何发送和接收XMLHTTPRequest请求的基本过程。总体上说，有6个步骤： （1）创建XMLHTTPRequest对象，并初始化。 （2）发送请求 （3）

8、服务器接收请求进行处理 （4）返回响应数据 （5）客户端接收并处理返回的结果 （6）依据响应数据修改客户端页面内容,9.2.2 JavaScript（Java脚本语言）,JavaScript是一种脚本语言，它可以使用在HTML、JSP等Web页网中，动态的完成由某种操作所产生的动作，同时也会产生一些特殊的效果，比如：图片或文字可以随着鼠标移动、会滚动的文字以及美丽的烟花效果等。 在Ajax中，JavaScript也起到重要的作用，它就像一座无形的桥梁将HTML与DOM、XMLHttpRequest、CSS以及XML等对象联系起来。Ajax利用Javascript的特有的事件实现Web应用程序与

9、用户行为之间触发的请求响应处理等一系列的动作，包括鼠标的监听事件、键盘的监听事件、页面的载入或离开事件以及获/失焦点事件等。而可以触发Javascript事件的绝大多数是表单元素，通过这些元素所具有的事件来控制响应用户的操作行为，,9.2.3 DOM（文档对象模型）,DOM也称为文档对象模型，它封装了许多可以对文档对象操作的接口，例如可以对HTML操作的接口、对XML操作的接口。 在Ajax中，DOM的主要作用是将从服务器上返回来的处理结果显示在客户端浏览器上，来更改页面内容。如果，没有DOM，那么局部刷新、异步请求等操作将无法进行。所支DOM也是Ajax中不可缺少的内容之一。下面表9.3和9

10、.4分别列出了DOM结点的属性和方法，,9.2.4 CSS（样式表）,由于Java Web开发越来越来注意页面的美化效果，所以，CSS也是越来越来红火了。在Ajax中，CSS同样肩负的美化页面的重担。在JavaScript中，利用HTML标签来控制页面的外观与布局，无疑会代码的数量大增，加重了运行的压力与维护的难度。同时，也便整个代码杂乱无章，无法将开发人员和美工人员的工作区分开，不便于修改。如果使用CSS则会很好的解决上述问题中的麻烦。美工人员只需将控制页面的样式写入一个*.css文件中即可，开发人员只需通过语句便可以将全部的样式导入进来，就可以根据设置的类属性和id属性对元素进行相应的样式

11、控制。,9.2.5 XML,XML是一种可扩展的标记语言。它的使用语法与HTML的语法在某种程度上相类似。它也是由标签和文本组成的，但在定义方式和突出内容上略有不同。如：HTML中的标签是定义好的，不可以更改的，而XML中的标签是由用户自定义的；HTML标记主要倾向于文本的显示形式，例如：字体的颜色、大小、相对位置等，而XML则更关心与文本的内容，与样式无关。 由于XML具有较强的表达能力和良好的通用性，因此成为数据间信息交换的最佳选择。所以Ajax也选择了XML作为客户端与服务器端之间的通信。在Ajax中，XML被作为一种数据信息的载体，它将客户端的信息放入XML提交给服务器进行处理。,9.

12、3 实现录入显示信息的Web方式,通过第一节的学习，了解了Web开发与Ajax开发上的区别，下面在本节中将分别介绍这两种形式的开发流程，然后找出两者间不同之处。下面实现一个从表单上录入信息提交给Servlet，然后再将返回来的结果重新显示在该页面上。它的实现具体可以分为以下几个步骤： （1）编写客户端的JSP页面，可以进行相关信息的录入和对信息的显示。 （2）编写服务端的Servlet，将传来的信息变成XML格式并返回。 （3）在Tomcat中对Servlet程序进行访问配置。 （4）启动Tomcat服务器，查看运行结果,9.3.1 编写JSP页面Student_Web.jsp,Web的请求响

13、应模式为：请求刷新显示。所以在使用Web请求响应方式时，首先是将客户端中的用户信息提交给服务器，服务器端接收请求并进行处理，并把处理结果重新返回给客户端，在这个过程中需要刷新整个页面才能得到服务器返回的结果。Student_Web.jsp的主要作用向服务器提交了信息、发送请求，在本程序中将会由下面的Servlet来接收、处理。,9.3.2 编写Servlet程序Student_Web.java,Student_Web.java的主要作用是处理该Servlet接收到请求，在本程序的第5-8行从request中获取传递的参数，第9-12行处理信息，第13行将处理结果放入request或sessio

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

15、入框中都是空的。那是因为提交表单以后，经过服务器处理，将结果返回时重新请求了JSP页面。所以在得到处理结果的同时，文本框已经被刷新，输入的内容就全都没有了。,9.4 实现录入显示信息的Ajax方式,在上面的实例中，演示了传统Web的请求和响应处理方式，下面在本节中，将演示在Ajax中如何处理请求响应的方式。它的实现步骤与传统Web方法完全相同。下面就逐一介绍每一步的具体操作方法。,9.4.1 编写JSP页面Student_Ajax.jsp,在Ajax处理请求响应的方式中，不会整个页面进行刷新，对于用户的输入信息，并不依靠表单来提交，而是通过XMLHttpRequest对象传递给服务器。,9.4.2 编写Servlet程序Student_Ajax.java,当Servlet接收到请求时，在第8行会通过“request.getParameter(name);”的形式获取从XMLHttpRequest对象中传递过来的参数，然后处理信息，例如：第12行进行用户名、密码的判断，从数据库中获取与信息相关的数据等。处理完毕后，会将结果生成一个XML文档并返回给客户端。,9.4.3 制做会走的时间,在Ajax中有一个比较经典的功能就是可以实现局部的刷