《jsp应用开发与实践 教学课件 刘乃琦 王冲 第13章 jsp与ajax》由会员分享，可在线阅读，更多相关《jsp应用开发与实践 教学课件 刘乃琦 王冲 第13章 jsp与ajax（86页珍藏版）》请在金锄头文库上搜索。
1、在线教务辅导网：http:/,教材其余课件及动画素材请查阅在线教务辅导网,QQ:349134187 或者直接输入下面地址：,http:/,本章要求：,第13章 JSP与Ajax,Ajax使用的技术 传统的Ajax的工作流程 jQuery的基本使用方法 使用jQuery发送GET和POST请求 使用Ajax需要注意的几个问题,主要内容,1. Ajax简介 2. 使用XMLHttpRequest对象 3. 传统Ajax的工作流程 4. jQuery实现Ajax 5. 需要注意的几个问题 6. 综合实例多级联动下拉列表,第13章 JSP与Ajax,13.1.1 什么是Ajax 13.1.2 Ajax
2、开发模式与传统开发模式的比较 13.1.3 Ajax的优点 13.1.4 Ajax使用的技术,13.1 Ajax简介,Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript与XML。Ajax并不是一门新的语言或技术，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端的异步请求操作。从而可以实现在不需要刷新页面的情况下与服务器进行通信，减少了用户的等待时间，减轻了服务器和带宽的负担，提供更好的服务响应。,13.1.1 什么是Ajax,在Web 2.0时代以前，多数网站都采用传统的开发模式，而随着Web 2
3、.0时代的到来，越来越多的网站都开始采用Ajax开发模式。为了让读者更好的了解Ajax开发模式，下面将对Ajax开发模式与传统开发模式进行比较。 在传统的Web应用模式中，页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求，服务器进行相应的处理（获得数据、运行与不同的系统会话）后，返回一个HTML页面给客户端。如图13-1所示。 图13-1 Web应用的传统模型,13.1.2Ajax开发模式与传统开发模式的比较,而在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位
4、置。如图13-2所示。 图13-2 Web应用的Ajax模型 从图13-1和图13-2中可以看出，对于每个用户的行为，在传统的Web应用模型中，将生成一次HTTP请求，而在Ajax应用开发模型中，将变成对Ajax引擎的一次JavaScript调用。在Ajax应用开发模型中通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低了网络流量，给用户带来了更好的体验。,与传统的Web应用不同，Ajax在用户与服务器之间引入一个中间媒介（Ajax引擎），从而消除了网络交互过程中的处理等待处理等待的缺点。使用Ajax的优点具体表现在以下几方面。 （1）减轻服务器的负担。Ajax
5、的原则是“按需求获取数据”，这可以最大程度的减少冗余请求和响应对服务器造成的负担。 （2）可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本。 （3）无刷新更新页面，从而使用户不用再像以前那样在服务器处理数据时，只能在死板的白屏前焦急的等待。Ajax使用XMLHttpRequest对象发送请求并得到服务器响应，在不需要重新载入整个页面的情况下，就可以通过DOM及时将更新的内容显示在页面上。 （4）可以调用XML等外部数据，进一步促进页面显示和数据的分离。 （5）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。,13.1
6、.3 Ajax的优点,Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。其中，只有XMLHttpRequest对象是新技术，其他的均为已有技术。下面我们就对Ajax使用的技术进行简要介绍。 1XMLHttpRequest对象 Ajax使用的技术中，最核心的技术就是XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE 5.0浏览器中率先推出的。现在许多浏览器都对其提供了支持，不过实现方式与IE有所不同。关于XML
7、HttpRequest对象的使用将在13.2节进行详细介绍。 2XML XML是Extensible Markup Language（可扩展的标记语言）的缩写，它提供了用于描述结构化数据的格式，适用于不同应用程序间的数据交换，而且这种交换不以预先定义的一组数据结构为前提，增强了可扩展性。XMLHttpRequest对象与服务器交换的数据，通常采用XML格式。 说明： 关于XML的详细介绍请读者参见本书的第12章。,13.1.4 Ajax使用的技术,3JavaScript JavaScript是一种在Web页面中添加脚本代码的解释性程序语言，其核心已经嵌入到目前主流的Web浏览器中。虽然平时应用
8、最多的是通过JavaScript实现一些网页特效及表单数据验证等功能，其实JavaScript可以实现的功能远不止这些。JavaScript是一种具有丰富的面向对象特性的程序设计语言，利用它能执行许多复杂的任务，例如，Ajax就是利用JavaScript将DOM、XHTML（或HTML）、XML以及CSS等技术综合起来，并控制它们的行为的。因此要开发一个复杂高效的Ajax应用程序，就必须对JavaScript有深入的了解。 说明： 关于JavaScript脚本语言的详细介绍请读者参见本书的第2章的2.3节。,4CSS CSS是Cascading Style Sheet（层叠样式表）的缩写，用于
9、（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在Ajax出现以前，CSS已经广泛地应用到传统的网页中了，所以本书不对CSS进行详细介绍。在Ajax中，通常使用CSS进行页面布局，并通过改变文档对象的CSS属性控制页面的外观和行为。 5DOM DOM是文档对象模型的简称，是表示文档（如HTML文档）和访问、操作构成文档的各种元素（如HTML标记和文本串）的应用程序接口。W3C定义了标准的文档对象模型，它以树形结构表示HTML和XML文档，并且定义了遍历树和添加、修改、查找树的节点的方法和属性。在Ajax应用中，通过JavaScript操作DOM，可以达到在不刷新页面的情况下
10、实时修改用户界面的目的。 说明： 关于DOM的详细介绍请读者参见本书第2章的2.3.6节。,13.2 使用XMLHttpRequest对象,13.2.1 初始化XMLHttpRequest对象 13.2.2 XMLHttpRequest对象的常用方法 13.2.3 XMLHttpRequest对象的常用属性,在使用XMLHttpRequest对象发送请求和处理响应之前，首先需要初始化该对象，由于XMLHttpRequest不是一个W3C标准，所以对于不同的浏览器，初始化的方法也是不同的。通常情况下，初始化XMLHttpRequest对象只需要考虑两种情况，一种是IE浏览器，另一种是非IE浏览器
11、，下面分别进行介绍。 IE浏览器 IE浏览器把XMLHttpRequest实例化为一个ActiveX对象。具体方法如下： var http_request = new ActiveXObject(“Msxml2.XMLHTTP“); 或者 var http_request = new ActiveXObject(“Microsoft.XMLHTTP“); 在上面的语法中，Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE浏览器的不同版本而进行设置的，目前比较常用的是这两种。 非IE浏览器 非IE浏览器（例如，Firefox、Opera、Safari等）把XMLHttpR
12、equest对象实例化为一个本地JavaScript对象。具体方法如下： var http_request = new XMLHttpRequest();,13.2.1 初始化XMLHttpRequest对象,为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象。创建一个跨浏览器的XMLHttpRequest对象其实很简单，只需要判断一下不同浏览器的实现方式，如果浏览器提供了XMLHttpRequest类，则直接创建一个实例，否则实例化一个ActiveX对象。具体代码如下： if (window.XMLHttpRequest) /非IE浏览器 http_request
13、= new XMLHttpRequest(); else if (window.ActiveXObject) / IE浏览器 try http_request = new ActiveXObject(“Msxml2.XMLHTTP“); catch (e) try http_request = new ActiveXObject(“Microsoft.XMLHTTP“); catch (e) 在上面的代码中，调用window.ActiveXObject将返回一个对象，或是null，在if语句中，会把返回值看作是true或false（如果返回的是一个对象，则为true，否则返回null，则为fa
14、lse）。 说明： 由于JavaScript具有动态类型特性，而且XMLHttpRequest对象在不同浏览器上的实例是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性的方法，不需要考虑创建该实例的方法是什么。,XMLHttpRequest对象提供了一些常用的方法，通过这些方法可以对请求进行操作。下面对XMLHttpRequest对象的常用方法进行介绍。 open()方法 open()方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息，具体语法如下： open(“method“,“URL“,asyncFlag,“userName“, “password“) o
15、pen()方法的参数说明如表13-1所示。 表13-1 open()方法的参数说明,13.2.2 XMLHttpRequest对象的常用方法,例如，设置异步请求目标为register.jsp，请求方法为GET，请求方式为异步的代码如下： http_request.open(“GET“,“register.jsp“,true); send()方法 send()方法用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。send()方法的语法格式如下： send(content) content：用于指定发送的数据，可以是DOM对象的实例、输入流或字符串。如果没有参数
16、需要传递可以设置为null。 例如，向服务器发送一个不包含任何参数的请求，可以使用下面的代码： http_request.send(null); setRequestHeader()方法 setRequestHeader()方法用于为请求的HTTP头设置值。setRequestHeader()方法的具体语法格式如下： setRequestHeader(“header“, “value“) header：用于指定HTTP头。 value：用于为指定的HTTP头设置值。 注意：setRequestHeader()方法必须在调用open()方法之后才能调用。,例如，在发送POST请求时，需要设置Content-Type请求头的值为“application/x-www-form-urlencoded”，这时就可以通过s
