JavaEE教案 8.docx
- 文档编号:12064227
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:15
- 大小:104.58KB
JavaEE教案 8.docx
《JavaEE教案 8.docx》由会员分享,可在线阅读,更多相关《JavaEE教案 8.docx(15页珍藏版)》请在冰豆网上搜索。
JavaEE教案8
重庆正大软件职业技术学院教案(项目类)
授课对象
系别
软件系
本次课学时
4学时
年级班次
大二
章节题目
第2章ajax基础
目的要求(含技能要求)
理解ajax的概念
理解ajax执行过程
掌握XMLHttpRequest对象相关方法的使用
本节重点
掌握XMLHttpRequest对象相关方法的使用
本节难点
理解ajax执行过程
教学方法
项目教学法
教学用具
机房、屏幕广播
问题引入
通过用户注册案例中用户名唯一性检查,从而引出本次课程。
难点与重点讲解方法
引导、分析、讲解、实作演示
本次课小结
课程小结
教后礼记
讨论、思考题、作业(含实训作业)
完成本次课的课堂任务
填写实验报告
任务介绍(5分钟)
在注册页面中增加对输入的用户名的唯一性验证,要求使用ajax技术,当光标离开用户名输入框的时触发该验证;为简化业务逻辑,当输入用户名张三的时候用户名不唯一,输入其他用户名则验证通过。
注册的界面如图2.1-1a,当用户输入用户名“张三”后切换光标到其他输入框,结果如图2.1-1b所示,当用户输入用户名“李四”后切换光标到其他输入框,结果如图2.1-1c所示。
图2.1-1a注册用户名唯一验证-用户名输入
图2.1-1b注册用户名唯一验证-验证不通过
图2.1-1c注册用户名唯一验证-验证不通过
任务解析(50-60分钟)
1.编写注册界面及输入框失去焦点的触发事件代码
2.编写使用ajax方式提交的javascript函数
3.编写后台处理代码及相关配置
4.编写进行善后工作的javascript响应函数
详细步骤
1.在用户名输入框中添加失去焦点的触发事件代码
在用户名输入框中加入失去焦点的触发事件(onblur事件),触发自定义函数submitAjax,使用this.value传入当前输入框的值,关键代码如下:
textfieldname="name"onblur="submitAjax(this.value)">
textfield>
2.编写使用ajax方式提交的javascript函数
我们首先定义一个全局变量XMLHttpReq,接着定义一个名为submitAjax()的函数,参数为需要验证的用户名,关键代码如下:
varxmlHttpReq;//定义XMLHttpRequest类型的对象XMLHttpReq
functionsubmitAjax(name){
}
然后,在函数中编写代码创建XMLHttpRequest对象,关键代码如下:
//下面代码含义:
判断浏览器类型,根据不同浏览器调用系统函数创建XMLHttpRequest的对象到XMLHttpReq。
代码固定,照搬即可
if(window.XMLHttpRequest){
xmlHttpReq=newXMLHttpRequest();
if(xmlHttpReq.overrideMimeType){
xmlHttpReq.overrideMimeType("text/xml");
}
}elseif(window.ActiveXObject){
try{
xmlHttpReq=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlHttpReq=newActiveXObject("Microsoft.XMLHTTP");
}
}
if(!
xmlHttpReq){
window.alert("该浏览器不支持XMLHttpRequest!
");
return;
}
接下来就是使用对象xmlHttpReq的相关方法进行提交,具体提交过程有三个小步骤。
第一个小步骤:
设置提交参数。
调用XMLHttpRequest对象的open方法来设置提交参数。
关键代码如下:
(其中isExist是提交后台的地址)
xmlHttpReq.open("POST","isExist");
第二个小步骤:
指定响应函数。
关键代码如下:
(响应函数的名字取名为test)
xmlHttpReq.onreadystatechange=test;
第三个小步骤:
进行提交与中文乱码处理。
关键代码:
(传入用户名,参数取为name)
xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpReq.send("name="+name);
3.编写后台处理代码及相关配置
编写后台action,在UserIsExistAction类中添加用户名的成员变量,并生成get及set方法。
然后添加执行业务逻辑的userIsExist方法,在方法中判断前台传入的用户名是否为张三,若为张三则返回字符串true,否则返回字符串false,并使用PrintWriter对象返回执行结果给前台,关键代码如下:
publicclassUserIsExistActionextendsActionSupport{
privateStringname;//会员登陆名
publicStringuserIsExist()throwsException{
//获得response对象
HttpServletResponseresponse=ServletActionContext.getResponse();
//设置response的编码格式
response.setCharacterEncoding("UTF-8");
//得到输出对象pw
PrintWriterpw=response.getWriter();
//使用输出对象pw输出信息
//(下面只是举例用户名张三已经存在进行验证,实际中需连接数据库数据进行验证)
if(this.getName().equals("张三")){
pw.write("true");
}else{
pw.write("false");
}
pw.close();
returnnull;
}
//省略name的get及set方法
}
然后在struts.xml文件中编写action配置,注意类的包路径,关键代码如下:
class="com.zdsoft.action.UserIsExistAction"method="userIsExist"> 4.编写javascript响应函数进行善后工作 首先定义一个响应函数test,关键代码如下: functiontest(){ } 然后在函数test中使用XMLHttpRequest对象的readyState属性判断后台是否执行(取值为4表示执行完毕),使用XMLHttpRequest对象的status属性判断执行是否成功(取值为200表示执行成功),关键代码如下: if(xmlHttpReq.readyState==4){//判断对象状态 if(xmlHttpReq.status==200){//信息已经成功返回,开始处理信息 //善后工作的代码在此处编写 }else{//页面不正常 window.alert("您所请求的页面有异常。 "); } } 接着,在判断后台执行成功之后的if语句里边使用XMLHttpRequest对象的responseText属性获得后台返回的结果(得到的是一个字符串),关键代码如下: varreturnParam=xmlHttpReq.responseText; 最后,根据得到的结果,在该if语句中编写善后工作的代码(提示用户名存在或不存在),关键代码如下: if(returnParam=="true"){ alert('用户名已经存在! '); }else{ alert('用户名不存在,可以使用! '); } 到此,整个任务就完成了。 运行的效果如图2.1-1a、2.1-1b所示。 根据任务提出问题(45-55分钟) ●ajax是什么? ●如何实现ajax? 问题解析(45-55分钟) 1.关于ajax ajax是网页可以异步提交的一种技术。 异步提交的解释: 异步是相对于同步(如图2.1-2a所示)而言的,一般的网页,在提交到后台处理的时候是整个页面都提交的,在提交到后台进行处理的过程中,用户除了等待结果以外什么也做不了。 异步提交表现在于页面并不是全部提交的,只是局部提交,在局部提交进行后台处理的过程中,用户在页面没有进行提交的部分还可以操作,无需等待局部提交的完成,这样提高了用户的操作效率(如图2.1-2b所示)。 图2.1-2a经典Web应用模型(同步) 图2.1-2bAjaxWeb应用模型(异步) Ajax技术的实现原理: 是使用XMLHttpRequest对象来实现。 XMLHttpRequest对象是系统对象,它的作用是: 负责局部提交到后台;负责跟踪后台的执行情况,并获得后台的执行结果;当后台执行完毕后,负责返回到前台调用用户定义的javascript函数进行善后操作。 2.实现ajax技术 Ajax技术运行的一般程序流程: ●前面页面触发事件调用javascript函数(通常自定义的函数) ●在javascript函数中编写代码创建XMLHttpRequest对象,提交部分数据到后台进行处理 ●后台中使用java代码完成指定的业务逻辑并输出结果 ●XMLHttpRequest获得后台执行的结果,及时调用程序员定义的javascript响应函数进行善后工作 根据这个流程,下面以一个“用户你好”的小例子来说明整个过程的代码编写。 【例子2.1-1】制作一个输入用户名的界面(界面中有一个用户名输入框和确定按钮)(如图2.1-3a所示);当用户输入用户名之后点击确定按钮,弹出一对话框提示“xxx,你好! ”(xxx为用户输入的用户名)(如图2.1-3b所示)。 在整个过程中要求使用ajax技术局部提交到后台(后台处理: 仅仅在控制台输出用户名),而整个页面不能提交(不能跳转页面)。 图2.1-3a用户你好-输入用户名 图2.1-3b用户你好-提交结果 例子2.1-1步骤1: 根据流程“前面页面触发事件调用javascript函数”,编写本例子的页面(一个输入框和一个按钮);触发事件为点击按钮的onclick事件,关键代码如下: 用户名: 代码中onclick="sendhelloworld(f1.username.value);"的sendhelloworld(f1.username.value)就是本例要自定义的javascript函数。 我们需要通过此函数实现ajax。 例子2.1-1步骤2: 根据流程“在javascript函数中编写代码创建XMLHttpRequest对象,提交部分数据到后台struts2的action进行处理”,我们首先定义一个全局变量XMLHttpReq,接着定义一个名为sendhelloworld()的函数,参数有一个,为需要传值的用户名,关键代码如下: varxmlHttpReq;//全局变量,是XMLHttpRequest类型的对象 functionsendhelloworld(name){ } 然后,在函数中编写代码创建XMLHttpRequest对象,关键代码如下: //下面代码含义: 判断浏览器类型,根据不同浏览器调用系统函数创建XMLHttpRequest的对象到xmlHttpReq。 代码固定,照搬即可 if(window.XMLHttpRequest){ xmlHttpReq=newXMLHttpRequest(); if(xmlHttpReq.overrideMimeType){ xmlHttpReq.overrideMimeType("text/xml"); } }elseif(window.ActiveXObject){ try{ xmlHttpReq=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ xmlHttpReq=newActiveXObject("Microsoft.XMLHTTP"); } } if(! xmlHttpReq){ window.alert("该浏览器不支持XMLHttpRequest! "); return; } XMLHttpRequest对象xmlHttpReq创建完毕后,接下来就是使用对象xmlHttpReq的相关方法进行提交,具体提交过程有三个小步骤。 ①设置提交参数。 调用XMLHttpRequest对象open方法来设置提交参数。 语法格式: XMLHttpRequest对象.open("提交方式","提交地址"); 参数说明: 提交方式取值为get或post与表单提交方式相同,为避免乱码,建议用post;提交地址是action的名称。 本例的代码如下: (其中helloworld1是action的名称) xmlHttpReq.open("POST","helloworld1"); ②指定响应函数。 给XMLHttpRequest对象的onreadystatechange属性指定响应函数。 语法格式: XMLHttpRequest对象.onreadystatechange=响应函数名; 响应函数是我们一般需要自定义的一个javascript函数,它会在程序提交到后台执行action完毕后被XMLHttpRequest对象自动调用执行,该函数是为了进行ajax处理完毕后的善后工作。 本例的代码如下: (响应函数的名字取名为callbackhelloworld) xmlHttpReq.onreadystatechange=callbackhelloworld; ③进行提交。 使用XMLHttpRequest对象的send方法进行提交。 语法格式: xmlHttpReq.send(“参数名1=参数值1&参数名2=参数值2&…参数名n=参数值n”); send方法里边的参数是前台传递给后台的数据,以参数名=参数值的形式给出,多个数据之间用&符号隔开。 附加的一个小步骤: 中文乱码的处理。 由于send方法中可以传递数据到后台,如果数据中有中文,则需要增加对中文编码格式的处理语句,该语句设置提交的数据格式,必须在提交的代码之前加入: (代码固定不变,照搬即可) xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 最后,本例第三小步骤代码如下,将用户名作为参数传递到后台,参数名为username。 xmlHttpReq.send("username="+name); 例子2.1-1步骤3: 根据流程“后台中使用java代码完成指定的业务逻辑并输出结果”编写后台代码。 后台代码的业务逻辑是根据参数名username获得前台提交的用户名数据,然后打印到控制台,然后将获得的用户名再返回给前台。 编写action执行业务逻辑,并使用通过struts2提供的ServletActionContext类获得能响应信息给客户端的PrintWriter对象,并通过print方法将处理结果返回给前台,关键代码如下(类名为HelloWorld1Action,方法名为execute): Stringusername; publicStringexecute()throwsException{ //编码转换 Stringstr=newString(username.getBytes("ISO8859_1"),"UTF-8"); System.out.println(str); //输出信息: 获得response对象 HttpServletResponseresponse=ServletActionContext.getResponse(); //设置response的编码格式 response.setCharacterEncoding("UTF-8"); //得到输出对象pw PrintWriterpw=response.getWriter(); //使用输出对象pw输出信息 pw.print(str); returnnull; } publicStringgetUsername(){ returnusername; } 同时在struts.xml中声明该action,配置关键代码如下: 注: 因为在action的方法中已经调用了response对象来将处理后的信息从服务器端返回给客户端,所以在action方法中也没有必要再返回一个字符串对象给struts2框架让它做页面跳转(示范代码中返回的就是null)。 同时在struts.xml里该action的配置中,也不需要对该action配置任何result项,Ajax是异步传输,配置中加上result项是没有意义的。 例子2.1-1步骤4: 根据流程“XMLHttpRequest获得后台执行的结果,及时调用程序员定义的javascript响应函数进行善后工作”,首先定义一个在步骤2的第二个小步骤所指定的响应函数,本例为callbackhelloworld,关键代码如下: functioncallbackhelloworld(){ } 然后在函数callbackhelloworld中使用XMLHttpRequest对象的readyState属性判断后台是否执行(取值为4表示执行完毕),使用XMLHttpRequest对象的status属性判断执行是否成功(取值为200表示执行成功),关键代码如下: if(xmlHttpReq.readyState==4){//判断对象状态 if(xmlHttpReq.status==200){//信息已经成功返回,开始处理信息 //善后工作的代码在此处编写 }else{//页面不正常 window.alert("您所请求的页面有异常。 "); } } 接着,在判断后台执行成功之后的if语句里边使用XMLHttpRequest对象的responseText属性获得后台返回的结果(得到的是一个字符串),关键代码如下: varres=xmlHttpReq.responseText; 最后,根据得到的结果,在该if语句中编写善后工作的代码,本例是弹出提示“用户xxx,你好”,关键代码如下: if(res.length>0){ alert(res+",你好! "); } 到此,整个ajax技术的实现过程就完成了。 本例运行的效果如图2.1-3a、2.1-3b所示。 任务实施(95-110分钟) 任务小结(5分钟) 作业 完成课堂任务 完成实验报告
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaEE教案 JavaEE 教案
![提示](https://static.bdocx.com/images/bang_tan.gif)