《JSP程序设计教程 第2版 教学课件 ppt 作者 郭珍 王国辉 JSP程序设计教程(第9章)》由会员分享，可在线阅读，更多相关《JSP程序设计教程 第2版 教学课件 ppt 作者 郭珍 王国辉 JSP程序设计教程(第9章)（89页珍藏版）》请在金锄头文库上搜索。
1、JSP程序设计教程课件 制作人：王国辉,JSP程序设计教程,第9章 JSP高级程序设计,课件制作人：王国辉,第 9章 JSP高级程序设计,9.1 JSP与Ajax技术 9.2 EL表达式及标签 9.3 JSP框架技术,课件制作人：王国辉,9.1 JSP与Ajax技术,Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript与XML。Ajax并不是一门新的语言或技术，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，它可以实现客户端的异步请求操作。这样可以实现在不需要刷新页面的情况下与服务器进行通信，从而减少了用户的等待
2、时间。,9.1.1 Ajax的开发模式 9.1.2 Ajax使用的技术 9.1.3 搭建Ajax开发框架 9.1.4 Ajax开发需要注意的几个问题,课件制作人：王国辉,9.1.1 Ajax的开发模式,在传统的Web应用模式中，页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求，服务器进行相应的处理（获得数据、运行与不同的系统会话）后，返回一个HTML页面给客户端，如下图所示。,课件制作人：王国辉,9.1.1 Ajax的开发模式,而在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据
3、插入到页面的指定位置，如下图所示。,课件制作人：王国辉,9.1.1 Ajax的开发模式,从上面两个图中可以看出，对于每个用户的行为，在传统的Web应用模式中，将生成一次HTTP请求，而在Ajax应用开发模式中，将变成对Ajax引擎的一次JavaScript调用。在Ajax应用开发模式中通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低了网络流量，给用户带来了更好的体验。,课件制作人：王国辉,9.1.2 Ajax使用的技术,JavaScript是一种在Web页面中添加动态脚本代码的解释性程序语言，其核心已经嵌入到目前主流的Web浏览器中。虽然平时应用最多的是通过J
4、avaScript实现一些网页特效及表单数据验证等功能，其实JavaScript可以实现的功能远不止这些。JavaScript是一种具有丰富的面向对象特性的程序设计语言，利用它能执行许多复杂的任务，例如，Ajax就是利用JavaScript将DOM、XHTML（或HTML）、XML以及CSS等技术综合起来，并控制它们的行为。因此要开发一个复杂高效的Ajax应用程序，就必须对JavaScript有深入的了解。,1JavaScript脚本语言,课件制作人：王国辉,9.1.2 Ajax使用的技术,Ajax技术之中，最核心的技术就是XMLHttpRequest，它是一个具有应用程序接口的JavaScr
5、ipt对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE 5.0浏览器中率先推出的。现在许多浏览器都对其提供了支持，不过实现方式与IE有所不同。 通过XMLHttpRequest对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来做，这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。,2XMLHttpRequest,课件制作人：王国辉,上面语法中的Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE浏览器的不同版本而进行设置的，目
6、前比较常用的是这两种。,9.1.2 Ajax使用的技术,在使用XMLHttpRequest对象发送请求和处理响应之前，首先需要初始化该对象，由于XMLHttpRequest不是一个W3C标准，所以对于不同的浏览器，初始化的方法也是不同的。,（1）IE浏览器 IE浏览器把XMLHttpRequest实例化为一个ActiveX对象。具体方法如下：,var http_request = new ActiveXObject(“Msxml2.XMLHTTP“); 或者 var http_request = new ActiveXObject(“Microsoft.XMLHTTP“);,课件制作人：王国辉
7、,为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象。创建一个跨浏览器的XMLHttpRequest对象其实很简单，只需要判断一下不同浏览器的实现方式，如果浏览器提供了XMLHttpRequest类，则直接创建一个实例，否则使用IE的ActiveX控件。具体代码如下：,9.1.2 Ajax使用的技术,（2）Mozilla、Safari等其他浏览器 Mozilla、Safari等其他浏览器把它实例化为一个本地JavaScript对象。具体方法如下：,var http_request = new XMLHttpRequest();,课件制作人：王国辉,说明：由于JavaS
8、cript具有动态类型特性，而且XMLHttpRequest对象在不同浏览器上的实例是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性的方法，不需要考虑创建该实例的方法是什么。,9.1.2 Ajax使用的技术,if (window.XMLHttpRequest) / Mozilla、Safari. http_request = new XMLHttpRequest(); else if (window.ActiveXObject) / IE浏览器 try http_request = new ActiveXObject(“Msxml2.XMLHTTP“); catch (
9、e) try http_request = new ActiveXObject(“Microsoft.XMLHTTP“); catch (e) ,课件制作人：王国辉,在上面的语法中，method用于指定请求的类型，一般为get或post；URL用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串；asyncFlag为可选参数，用于指定请求方式，同步请求为true，异步请求为false，默认情况下为true；userName为可选参数，用于指定求用户名，没有时可省略；password为可选参数，用于指定请求密码，没有时可省略。,9.1.2 Ajax使用的技术,下面对XMLHtt
10、pRequest对象的常用方法进行详细介绍。,open(“method“,“URL“,asyncFlag,“userName“, “password“);,（1）open()方法 open()方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息，具体语法如下：,课件制作人：王国辉,在上面的语法中，content用于指定发送的数据，可以是DOM对象的实例、输入流或字符串。如果没有参数需要传递可以设置为null。,9.1.2 Ajax使用的技术,（2）send()方法 send()方法用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。具体语法格式如下：
11、,send(content);,（3）setRequestHeader()方法 setRequestHeader()方法为请求的HTTP头设置值。具体语法格式如下：,课件制作人：王国辉,在上面的语法中，label用于指定HTTP头；value用于为指定的HTTP头设置值。,9.1.2 Ajax使用的技术,setRequestHeader(“label“, “value“);,注意：setRequestHeader()方法必须在调用open()方法之后才能调用。,（4）abort()方法 abort()方法用于停止当前异步请求。,（5）getAllResponseHeaders()方法 getA
12、llResponseHeaders()方法用于以字符串形式返回完整的HTTP头信息，当存在参数时，表示以字符串形式返回由该参数指定的HTTP头信息。,课件制作人：王国辉,9.1.2 Ajax使用的技术,XMLHttpRequest对象的常用属性如下表所示。,课件制作人：王国辉,9.1.2 Ajax使用的技术,XML是Extensible Markup Language（可扩展的标记语言）的缩写，它提供了用于描述结构化数据的格式。XMLHttpRequest对象与服务器交换的数据，通常采用XML格式，但也可以是基于文本的其他格式。,3XML语言,4DOM,课件制作人：王国辉,9.1.2 Ajax
13、使用的技术,DOM是Document Object Model（文档对象模型）的缩写，是表示文档（如HTML文档）和访问、操作构成文档的各种元素（如HTML标记和文本串）的应用程序接口（API）。W3C定义了标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历树和添加、修改、查找树的节点的方法和属性。在Ajax应用中，通过JavaScript操作DOM，可以达到在不刷新页面的情况下实时修改用户界面的目的。,课件制作人：王国辉,9.1.2 Ajax使用的技术,CSS是Cascading Style Sheet（层叠样式表）的缩写，用于（增强）控制网页样式并允许将样式信息与网页内容
14、分离的一种标记性语言。在Ajax出现以前，CSS已经广泛地应用到传统的网页中了。在Ajax中，通常使用CSS进行页面布局，并通过改变文档对象的CSS属性控制页面的外观和行为。,5CSS,课件制作人：王国辉,【例9-1】 通过Ajax实现不刷新页面，从另一个页面请求信息,9.1.3 搭建Ajax开发框架,应用Ajax技术开发Web应用程序时，首先需要搭建Ajax开发框架。下面将通过具体实现介绍如何在JSP中搭建Ajax框架。,课件制作人：王国辉,9.1.4 Ajax开发需要注意的几个问题,Ajax使用了大量的JavaScript和Ajax引擎，而这些内容需要浏览器提供足够的支持。目前提供这些支持
15、的浏览器有IE 5.0及以上版本、Mozilla 1.0、NetScape 7及以上版本。Mozilla虽然也支持Ajax，但是提供XMLHttpRequest对象的方式不一样。所以使用Ajax的程序必须测试针对各个浏览器的兼容性。,1浏览器兼容性问题,课件制作人：王国辉,9.1.4 Ajax开发需要注意的几个问题,Ajax技术的实现主要依赖于XMLHttpRequest对象，但是在调用其进行异步数据传输时，由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁，所以如果不对该对象进行封装处理，在下次需要调用它时就得重新构建，而且每次调用都需要写一大段的代码，使用起来很不方便。不
16、过，现在很多开源的Ajax框架都提供了对XMLHttpRequest对象的封装方案，其详细内容这里不做介绍，请参考相关资料。,2XMLHttpRequest对象封装,课件制作人：王国辉,9.1.4 Ajax开发需要注意的几个问题,由于Ajax将大量的计算从服务器移到了客户端，这就意味着浏览器将承受更大的负担，而不再是只负责简单的文档显示。由于Ajax的核心语言是JavaScript，而JavaScript并不以高性能知名。另外，JavaScript对象也不是轻量级的，特别是DOM元素耗费了大量的内存。因此，如何提高JavaScript代码的性能对于Ajax开发者来说尤为重要。下面是3种优化Ajax应用执行速度的方法： （1）优化for循环； （2）将DOM节点附加到文档上； （3）尽量减少点“.”号操作符的使用。,3性能问题,课件制作人：王国辉,9.1.4 Ajax开发需要注意的几个问题,Ajax不支持多种字符集，它默认的字符集是UTF-8，所以在应用Ajax技术的程序
