Ajax与三层架构实训教案

教 案

课程：    Ajax与三层架构    

单位：      信息工程学院    

教师：      XXX         

课程简介

《Ajax与三层架构》是一门实用性强，知识面广的课程，该课程的先修课程为《Java程序设计》、《Jsp WEB开发》。主要包含网页设计概论，J2EE站点创建，网页基本元素的插入，网页布局技术，网页高级操作和网页设计综合训练。通过本课程学习，使学生能熟练运用J2EE中的文字、链接、列表、表格、表单、图像、多媒体、框架元素标志及属性设计出多窗口网页、动态网页；掌握使用MyEclipse10进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能；能独立设计中小型WEB站点。最终通过掌握网页设计的各种技能，培养学生综合运用所学知识的能力和动手能力，真正能使用所学的知识进行网站建设。该课程以案例和项目驱动，采用集中式授课和练习。

章节内容：

• 了解JQuery入门 4学时
• 掌握JQuery高级API的使用 4学时
• 掌握层次选择、迭代选择器的使用 4学时
• 掌握JQuery的事件原理及其使用方法 4学时
• 异步调用及其应用 8学时
• 掌握Ajax组件动画效果 8学时
• 在线商城综合案例一 8学时
• 在线商城综合案例二8学时

参考教材：

[1]王凯. MyEclipse 10网站设计教程.人民邮电出版社，2013.6

[2]牛国勇. MyEclipse 10白金手册.清华大学出版社,2014.8

[3]邓超贤. 网页设计与制作.大连理工大学出版社，2011.8

授课班级：2016级软件1班、2班

总学时48学时，其中理论24学时，实践24学时

 

课程教学日历

课程名称 Ajax与三层架构       院（系）  信息工程学院       

专业  计算机科学与技术        年级  16级             

 

课程 学期 总学时		周 学 时	学   分	考核 方式		采用 教材 情况			教材名称	疯狂Ajax讲义
									主编（著）	李刚
									出版社 名称	中国工信出版社
48		6	6	考查					出版时间	2017.1
周 次	日 期	每周时 数分配					教学内容				备 注
		讲 授	实验 (实践)		合计时数
1	9.10-9.14	2	2		4			第一章：JQuery入门 jQuery简介  基本选择器 常规语法
2	9.17-9.21	2	2		4			第二章：JQuery高级API 2.1 熟悉Jquery的基本$符号含义 2.2熟悉HBuilder工具使用 2.3掌握$(function(){});
3	9.25-9.28	2	2		4			第三章： 层次选择器和迭代选择器 3.1基本选择器 3.2熟悉层次选择器 3.3掌握迭代选择器
4	10.1-10.5											国庆
5	10.8-10.12	4	4		8			第四章：事件原理及其运用 4.1jQuery事件 4.2事件绑定
6	10.15-10.19	4	4		8			第五章：Ajax及动画效果 5.1Ajax原理 5.2Ajax应用 5.3Ajax动画
7	10.22-10.26	4	4		8			第六章：异步调用及插件使用 6.1异步调用案例 6.2插件使用
8	10.29-11.2	4	4		8			第七章：在线商城综合案例一 7.1 在线商城案例剖徐 7.2 页面框架讲解
9	11.6-11.10	4	4		8			第八章：在线商城综合案例二 8.1 jQuery函数在项目中的应用 82. jQuery事件、动画等应用

 

 

 

说明：1.教学内容按每次授课内容填写。

2.考核方式分考试与考查两种。

3.任课教师在每学期开课以前根据教学大纲编写课程教学日历，一式三份，经教研室主任（负责人）审阅同意后，一份自存，一份交所在院（系部），一份交学生

教研室主任（负责人）签名：

任课教师签名：

 

郑州工业应用技术学院教案

课时内容	第1章 了解JQuery入门	计划学时	4
教学目标	（1）熟悉Jquery框架开发环境的构建过程、开发环境的使用方法。 （2）熟悉Jquery框架基本运行流程和基本配置。 （3）掌握Action的开发和Result配置。 （4）理解拦截器的工作原理和意义，掌握拦截器的配置、自定义拦截的使用、了解系统默认拦截器。 （5）掌握Jquery 标签库的基本用法。 （6）了解Jquery 的类型转换和对OGNL的支持。 （7）掌握Jquery 的验证框架技术。 （8）了解Jquery 的国际化。 （9）掌握Jquery 的文件上传和下载。
教学重点	þ  HTML基础。 þ  MyEclipse 2012的工作界面组成。 þ  创建站点和管理站点的操作。
教学难点	HTML常用标签及其使用 如何正确规划网站内容。
教学设计	教学思路：（1）介绍网页设计课程的主要知识结构；（2）介绍课程的性质及考核的方式；（3）引入网页设计课程的主要学习目标和作用，奠定学生学习的兴趣；（4）介绍MyEclipse 2012的界面和网页制作的流程；（5）演示创建“千履千寻公司”站点的具体步骤，让学员了解如何创建站点；（6）演示管理“千履千寻公司”站点的操作，让学员熟悉站点的基本操作；（7）安排上机实训。 教学手段：（1）结合相关案例讲解，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举例说明。 教学资料及要求：除教材中的实例外，可以再找一些已建立和制作完成的站点进行演示，便于学员理解。
教学内容
课程导入：通过与学生问题式交流，引入该门课程。 介绍该课程的授课基本情况。 欣赏“贵美商城”、“e客在线”等网站作品，引入本章网页设计概述的学习主要知识。 讨论问题：1、为什么要首先建立站点？           2、一个网站最基本的功能有哪些？ 一、 二、J2EE基础（重点、难点） http://www.w3school.com.cn/html/ N" "http://mybatis.org/dtd/mybatis-3-config.dtd"HTML文档基本结构 <标记>受标记影响的内容<标记> 【案例】标记属性说明。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//E> <configuration> <!-- 加载属性文件 --> <properties resource="config/db.properties"> <!--properties中还可以配置一些属性名和属性值  --> <!-- <property name="jdbc.driver" value=""/> --> </properties> <settings> <!--开启延迟加载--> <setting name="lazyLoadingEnabled" value="true"/> <!--按需延迟加载--> <setting name="aggressiveLazyLoading" value="false"/> <!-- 开启二级缓存 --> <setting name="cacheEnabled" value="true"/> </settings> <typeAliases> <package name="com.neuedu.pojo"/> </typeAliases> <mappers> <package name="com.neuedu.mapper"/> </mappers> </configuration>  七、实训——创建“快乐旅游”站点 实训目标 本实训的目标是为“人事系统”网站创建站点，包括站点中的各种文件和文件夹。要求首先规划站点结构，然后创建站点以及其中的文件对象。 专业背景 “贵美商城”站点除了应该具备商城的普遍特点之外，还应该突出“高效”一词，这需要通过有效地设计和整合色彩、布局以及简单轻松的文字等方面，才能达到效果。 操作思路（视频演示）   拓展知识                  课堂案例1——创建站点              课堂案例2——管理站点        上机实训——创建“贵美商城”站点
小结	上完课以后在写
思考及作业	想一想： 站点的作用是什么？站点有何意义？举例日常浏览网页时遇到的站点，并分析其分为几大板块？ 练一练： （1）查看HBuilder中“表单”插入栏包含的内容。 （2）在浮动面板组中将“资源”、“行为”和“组件”3个面板排列到同一个面板中（首先需要利用“窗口”菜单显示出这些面板）。 （3）创建名为“wodewangzhan”的站点，将位置设置在D盘的“OK”文件夹中，然后通过编辑站点的方法将其重命名为“mynet”，最后删除站点并取消操作。 （4）规划并构思一个美食站点，创建一个导航草图，其中必须包含“菜谱”和“食材”两大板块，要求整个站点结构能满足一般的浏览和查询美食资源的要求。 （5）在上一题的基础上，启动MyEclipse 2012，创建该美食站点并在其中添加相应的文件夹和文件。
教学后记
课时内容	第2章 JQuery高级API	计划学时	4
教学目标	（1）熟悉Jquery的基本$符号含义。 （2）熟悉HBuilder工具使用 （3）掌握$(function(){}); （4）理解拦截器的工作原理和意义，掌握拦截器的配置、自定义拦截的使用、了解系统默认拦截器。
教学重点	þ $(function(){});
教学难点	常规API使用
教学设计	1、JQuery 事件处理方法是 jQuery 中的核心函数。  2、事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。  3、通常会把 jQuery 代码放到 部分的事件处理方法中：
教学内容
课程导入：通过与学生问题式交流，引入该门课程。 1、如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。  2、当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）： 二、J2EE基础（重点、难点） http://www.w3school.com.cn/html/ N" 由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：  1、把所有 jQuery 代码置于事件处理函数中  2、把所有事件处理函数置于文档就绪事件处理器中  3、把 jQuery 代码置于单独的 .js 文件中  4、如果存在名称冲突，则重命名 jQuery 库拓展知识                  课堂案例1——计算器                                    上机实训——创建“个人计算器 ”
小结	上完课以后在写
思考及作业	想一想： 直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。练一练： （1）查看HBuilder中“表单”插入栏包含的内容。 （2）在浮动面板组中将“资源”、“行为”和“组件”3个面板排列到同一个面板中（首先需要利用“窗口”菜单显示出这些面板）。 （3）创建名为“wodewangzhan”的站点，将位置设置在D盘的“OK”文件夹中，然后通过编辑站点的方法将其重命名为“mynet”，最后删除站点并取消操作。 （4）规划并构思一个美食站点，创建一个导航草图，其中必须包含“菜谱”和“食材”两大板块，要求整个站点结构能满足一般的浏览和查询美食资源的要求。 （5）在上一题的基础上，启动MyEclipse 2012，创建该美食站点并在其中添加相应的文件夹和文件。
教学后记
课时内容	第3章 层次选择器和迭代选择器	计划学时	4
教学目标	（1）基本选择器 （2）熟悉层次选择器 （3）掌握迭代选择器
教学重点	þ  迭代选择器。     层次选择器
教学难点	迭代选择器如何使用
教学设计
教学内容
课程导入：通过与学生问题式交流，引入该门课程。 介绍该课程的授课基本情况。 欣赏“贵美商城”、“e客在线”等网站作品，引入本章网页设计概述的学习主要知识。 讨论问题：1、简化方案是什么？           参考代码： <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果您点击我，我会消失。</p> <p>点击我，我会消失。</p> <p>也要点击我哦。</p> </body> </html> <!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $(document).ready(function(){   $(".ex .hide").click(function(){     $(this).parents(".ex").hide("slow");   }); });</script><style type="text/css"> div.ex{background-color:#e5eecc;padding:7px;border:solid 1px #c3c3c3;}</style></head> <body> <h3>中国办事处</h3><div class="ex"><button class="hide" type="button">隐藏</button><p>联系人：张先生<br />  北三环中路 100 号<br /> 北京</p></div> <h3>美国办事处</h3><div class="ex"><button class="hide" type="button">隐藏</button><p>联系人：David<br />  第五大街 200 号<br /> 纽约</p></div>/body></html> 8、jQuery animate()  演示简单的 jQuery animate() 函数。 <!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>  $(document).ready(function(){   $("button").click(function(){     var div=$("div");     div.animate({height:'300px',opacity:'0.4'},"slow");     div.animate({width:'300px',opacity:'0.8'},"slow");     div.animate({height:'100px',opacity:'0.4'},"slow");     div.animate({width:'100px',opacity:'0.8'},"slow");   }); });</script> </head> <body> <button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </body></html>   实训目标   专业背景   操作思路（视频演示）
小结
思考及作业	想一想：             练一练：
教学后记
课时内容	第4章 事件原理及其使用	计划学时	4
教学目标	4.1jQuery事件 4.2事件绑定
教学重点	þ
教学难点
教学设计
教学内容
课程导入：通过与学生问题式交流，引入该门课程。 介绍该课程的授课基本情况。
小结	上完课以后在写
思考及作业	想一想：             练一练：
教学后记
课时内容	第五章：Ajax及动画效果	计划学时	8
教学目标	5.1Ajax原理 5.2Ajax应用 5.3Ajax动画
教学重点
教学难点
教学设计
教学内容
课程导入：通过与学生问题式交流，引入该门课程。 介绍该课程的授课基本情况。 欣赏“贵美商城”、“e客在线”等网站作品，引入本章网页设计概述的学习主要知识。 讨论问题：
小结	上完课以后在写
思考及作业	想一想：       练一练：
教学后记
课时内容	第六章：异步调用及插件使用	计划学时	8
教学目标	6.1异步调用案例 6.2插件使用
教学重点	þ
教学难点
教学设计
教学内容
课程导入：通过与学生问题式交流，引入该门课程。 介绍该课程的授课基本情况。   讨论问题：1
小结	上完课以后在写
思考及作业	想一想：           练一练：
教学后记
课时内容	第6章 在线商城综合实训一	计划学时	8
教学目标	7.1 在线商城案例剖徐 7.2 页面框架讲解
教学重点	þ
教学难点
教学设计
教学内容
课程导入：通过与学生问题式交流，引入该门课程。 介绍该课程的授课基本情况。   讨论问题：1
小结	上完课以后在写
思考及作业	想一想：           练一练：
教学后记
课时内容	第八章：在线商城综合案例二	计划学时	8
教学目标	8.1 jQuery函数在项目中的应用 82. jQuery事件、动画等应用
教学重点	þ
教学难点
教学设计
教学内容
课程导入：通过与学生问题式交流，引入该门课程。 介绍该课程的授课基本情况。   讨论问题：1
小结	上完课以后在写
思考及作业	想一想：           练一练：
教学后记