电子教案 11__ch6.6_Ajax（AJAX应用）.docxVIP

PAGE2/NUMPAGES2

《动态网页设计（JSP）》教案

章节

第6章Servlet应用

6.6案例ch6.6_Ajax（AJAX应用）

学时

约3学时

知识

技能

掌握应用AJAX技术，实现用户登录验证

基本掌握在jQueryMobile类型的页面中实现用户登录验证

重点

AJAX技术的原理，AJAX的原生JavaScript代码

jQuery中的AJAX格式化代码

将参数附加到URL中

难点

AJAX的原生JavaScript代码

获取表单控件的值，并作为参数附加到ULR中

教学过程：

下发案例素材、课件，展示网页效果图。

讲解理论：AJAX原理与应用，“异步刷新”页面。

演示案例。创建Web项目ch6.6_Ajax，将网页素材复制到WebRoot文件夹；创建包com，将类文件复制到包com。

修改用户登录页index.jsp：应用AJAX的原生JavaScript代码，可分别尝试采用get方式和post方式，获取username和password，并附加到URL，注意连接符?、和=。将AJAX获得的响应信息显示在页面中，或实现页面自动跳转。

图6-28登录失败图6-29登录成功(1)

修改登录控制器LoginEL：将网页跳转相关的代码注释掉，然后从request获取msg，并输出给客户端。

修改用户登录页jQuery.jsp：增加viewport使得页面在移动端能正常显示，应用jQuery中的AJAX代码，实现用户登录功能。

留意之处：

将表单form予以注释掉，AJAX可不需要表单。

多个参数附加到URL时，注意连接符?、和=。

get方式与post方式的AJAX代码基本一致。不同页面的AJAX代码，通常只需修改目标程序名以及传递的参数。

jQuery中的AJAX相关代码更整齐易用。

应用AJAX技术时，不能在控制器Servlet类中跳转（重定向或转发）到其它网页，需由应用AJAX技术页面中的JavaScript代码实现页面跳转功能。

课后作业：

完成练习案例ch6.4ex_calculate（加法口算）-的应用AJAX部分。

全部完成第6章的章末练习题。

预习第7章的内容。

图6-34计算错误图6-35计算正确