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