《JSP程序设计实例教程 国家级精品课程配套教材 教学课件 ppt 刘志成 第9章 Ajax应用》由会员分享，可在线阅读，更多相关《JSP程序设计实例教程 国家级精品课程配套教材 教学课件 ppt 刘志成 第9章 Ajax应用（23页珍藏版）》请在金锄头文库上搜索。
1、第9章 Ajax应用,主编：刘志成,本章学习导航,本章学习导航,本章学习要点,（1）Ajax的基本概念。 （2）Ajax中使用的技术。 （3）Ajax技术框架。 （4）编写Ajax的一般过程。 （5）Ajax技术的典型应用。 建议课时：4课时,9.1 认识Ajax,Ajax是多种技术的综合应用，主要包括JavaScript技术、XML技术、DOM技术和 XMLHttp Request对象等。Ajax作为Web 2.0的一个重要技术，大大推动了Web技术的发展。 Ajax技术在1998年前后得到了应用。 2005年2月18日，Adaptive Path公司负责用户体验策略的主管杰西詹姆斯.加勒特
2、(Jesse James Garrett)发表了一篇题为AJAX：一个WEB应用的新途径的论文，明确地将Ajax定义为Asynchronous JavaScript + XML，即异步的JavaScript和XML处理。,什么是Ajax,9.1 认识Ajax,Ajax可以在静态页面上动态地调用服务器的资源，优化浏览器和服务器之间的沟通，减少不必要的数据传输、时间及降低网络上的数据流量。 Ajax允许用户的操作与服务器的操作异步进行，在服务器响应用户操作的同时，用户可以执行其他操作。 Ajax允许一些常规操作在客户端进行，将原本由服务端负责处理的工作，通过Ajax让客户端分担部分工作，有利于减轻
3、服务器的负担，这样平衡了前、后端的负载。 应用Ajax技术，不必更新全部网页，只需要更新需要更新的内容或部分页面。大大减少了用户的等待时间，使界面更加友好。,Ajax的优点,9.1 认识Ajax,由于Ajax是在客户端执行的，因此在编程时必须考虑客户可能用到的所有浏览器的类型。如果用户浏览器不同或者版本不一致，有可能会造成无法动作的问题。 由于Ajax需要在客户端执行一些操作，所以会在客户端占用更多的资源，也会造成客户端会过“肥”，太多程序代码放在客户端也会造成开发上的成本的增加。 由于Ajax的脚本语言是直接存放在页面的HTML代码中，可能会暴露服务端，被恶意攻击、篡改，因而造成安全上的漏洞
4、，所以不利于项目代码的保密。 由于Ajax可以不刷新页面就更新数据，因此通常会导致浏览器的“后退”功能失效。,Ajax的缺点,9.1 认识Ajax,Ajax作为JavaScript和XML等技术的结合体，通过页面与后台处理的异步执行来减少用户的等待时间和服务器的负载。,Ajax的工作原理,基于Ajax的Web应用模型,传统Web应用模型,课堂案例1第一个Ajax程序,体验Ajax技术的应用并了解Ajax程序的基本框架 。,案例学习目标,Ajax程序的基本框架、 Ajax技术在JSP中使用的一般形式、Ajax技术在JSP中的应用。,案例知识要点,课堂案例1第一个Ajax程序,案例完成步骤,添加标
5、题文字,（1）在Tomcat的webapps文件夹中创建保存第9章程序文件的文件夹chap09。 （2）复制WEB-INF文件夹和web.xml文件。 （3）编写应用Ajax技术的JSP程序ajaxdemo.jsp。 （4）编写用于被请求的HTML文件demo.htm。 （5）启动Tomcat服务器后，打开IE，在地址栏中输入“http:/localhost:8080/chap09/ajaxdemo.jsp”。,添加标题文字,教师演示讲解,9.2 Ajax中使用的技术,1JavaScript JavaScript是一种面向过程的客户端脚本语言，主要目的是解决服务器端语言（比如Perl）遗留的速
6、度问题，为客户提供更流畅的浏览效果。 2XMLHttpRequest XMLHttpRequest是Ajax技术体系中最为核心的技术。 3XML XML（eXtensible Markup Language）即可扩展标记语言，与HTML一样，也是SGML(Standard Generalized Markup Language,标准通用标记语言)。XML是Internet环境中跨平台的依赖于内容的技术，是当前处理结构化文档信息的有力工具。 4DOM DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http:/www.w3. org/DOM/），DO
7、M是一种与浏览器、平台、语言无关的接口。 5CSS CSS（Cascading Style Sheets ，层叠样式表）主要用于改善页面布局效果，采用CSS+DIV进行网页重构。,Ajax中使用的技术概述,9.2 Ajax中使用的技术,1创建XMLHttpRequest对象 XMLHttpRequest是一个JavaScript对象，创建该对象很简单，一般语句格式如下： var xmlHttp = new XMLHttpRequest(); ,XMLHttpRequest对象,9.2 Ajax中使用的技术,2XMLHttpRequest对象方法和属性,XMLHttpRequest对象,9.2
8、Ajax中使用的技术,2XMLHttpRequest对象方法和属性,XMLHttpRequest对象,9.2 Ajax中使用的技术,3设置XMLHttpRequest对象,XMLHttpRequest对象,同步方式 xmlhttp.open(“GET“, “http:/ true); 异步方式 xmlhttp.onreadystatechange=function() .; 此外，为了很好地支持中文和国际化，字符集一般都使用UTF-8，这可以通过调用XMLHttp Request对象上的setRequestHeader方法来设置，一般语句格式如下： xmlhttp.setRequestHead
9、er(“Content-Type“,“text/xml;charset=utf-8“);,课堂实践 1,（1）讨论Ajax技术的主要特点。 （2）编写简单的应用Ajax技术的特点。,操作要求,（1）注意Ajax技术中的多种技术的应用。 （2）注意Ajax技术的主要技术特点。,操作提示,9.3 在JSP中应用Ajax,Ajax开发框架,1初始化对象并发出XMLHttpRequest请求 2指定响应处理函数 http_request.onreadystatechange = processRequest; http_request.onreadystatechange = function() ;
10、 3发出HTTP请求 http_request.open(GET, http:/www.example.org/some.file,true); http_request.send(null); 4处理服务器返回的信息 if (http_request.readyState = 4) / 信息已经返回，可以开始处理 else / 信息还没有返回，等待 ,课堂案例2应用Ajax检测用户名,学习使用Ajax技术检测用户名的方法。,案例学习目标,用户注册功能的设计、“检测用户名”的实现、Ajax技术在检测用户名中的应用。,案例知识要点,课堂案例2应用Ajax检测用户名,案例完成步骤,添加标题文字,（
11、1）打开webapps文件夹中保存第9章程序文件的文件夹chap09。 （2）编写输入用户名的JSP文件register.jsp。 （3）编写检测用户名JSP文件checkUser.jsp。 （4）编写连接数据库进行用户名检测的JavaBean文件ConnDB.java。 （5）启动Tomcat服务器后，在IE的地址栏中输入“http:/localhost:8080/chap09/ register.jsp”，输入用户名“liuzc518”，运行结果如下页图所示。,添加标题文字,教师演示讲解,课堂案例2应用Ajax检测用户名,案例完成步骤,添加标题文字,添加标题文字,教师演示讲解,用户名验证后
12、结果,输入用户名,课堂案例3使用Ajax实现级联下拉列表,学习使用Ajax技术实现商品类别和所属小类之间的级联效果的方法 。,案例学习目标,商品添加功能的设计、添加商品类别、利用Ajax实现商品类别和所属小类间的级联 。,案例知识要点,课堂案例3使用Ajax实现级联下拉列表,案例完成步骤,添加标题文字,（1）打开webapps文件夹中保存第9章程序文件的文件夹chap09。 （2）编写添加商品的JSP文件index.jsp。 （3）编写实现商品小类级联列表的JSP文件selSubType.jsp。 （4）编写实现数据库操作的JavaBean文件ConnDB.java 。 （5）启动Tomcat服务器后，在IE的地址栏中输入“http:/localhost:8080/chap09/index.jsp”。,教师演示讲解,课堂案例3使用Ajax实现级联下拉列表,案例完成步骤,添加标题文字,教师演示讲解,默认的“厨卫系列”商品类别的级联列表,“电视机系列”商品类别的级联列表,改造eBook网上书城的用户注册功能，使用Ajax技术实现“检测用户名”的功能。,任务1,改造eBook网上书城的后台管理中的商品管理功能，使用Ajax技术实现“图书大类”和“图书小类”间的级联功能 。,任务2,
