《Web交互开发》实验教学指导/实验五:AJAX 《Web交互开发》实验教学指导 实验五:AJAX 、实验目的(5分) 1、了解AJAX的作用 2、理解AJAX的工作原理; 3、掌握XML和JSON数据格式; 4、掌握 JavaScript操作AJAX的方法 5、掌握 jQuery操作AJAX的方法 二、实验环境(5分) 1、 Windows xP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 、实验要求(5分) 1、实现学生成绩册的显示 2、完成伸缩式导行菜单 3、使用插件进行表单验证功能 4、图片放大效果的实现 四、实验原理(5分) 1、AJAX的工作原理; 2、XML和JSON数据格式 3、 JavaScript操作AJAX 4、 jQuery操作AJAX 五、实验步骤(40分) 1、学生成绩册的显示 (1)使用XML对学生成绩数据进行保存: (2)部分代码如下 S(function i S"#menu li").each(function(index)( S(this). click(function( i SC"#menu li. tabFocus"). remove Class("tab Focus"); S(this).add Class("tabFocus") S"#content lr eq("+index +")").showO siblings).hide(; 本讲共计5页|当前第1页
《Web 交互开发》实验教学指导 / 实验五 ：AJAX 本讲共计 5 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验五：AJAX 一、实验目的（5 分） 1、了解 AJAX 的作用； 2、理解 AJAX 的工作原理； 3、掌握 XML 和 JSON 数据格式； 4、掌握 JavaScript 操作 AJAX 的方法； 5、掌握 jQuery 操作 AJAX 的方法； 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、实现学生成绩册的显示； 2、完成伸缩式导行菜单； 3、使用插件进行表单验证功能； 4、图片放大效果的实现； 四、实验原理（5 分） 1、AJAX 的工作原理； 2、XML 和 JSON 数据格式； 3、JavaScript 操作 AJAX； 4、jQuery 操作 AJAX。 五、实验步骤（40 分） 1、学生成绩册的显示 （1）使用 XML 对学生成绩数据进行保存： （2）部分代码如下： $(function() { $("#menu li").each(function(index) { $(this).click(function() { $("#menu li.tabFocus").removeClass("tabFocus"); / $(this).addClass("tabFocus"); $("#content li:eq(" + index + ")").show() .siblings().hide(); });
《Web交互开发》实验教学指导/实验五:AJAX (3)请完成以下任务 任务一:对上述脚本代码进行逐行注释。(3分) 任务二:列举 jQuery中事件绑定的方法?(2分) 任务三:将上述代码改为通过鼠标移动至标题来实现内容的隐藏或显示。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、伸缩式导航菜单 (1)伸缩式导航菜单如图42-1,422所示 用户管理 商品管理 添加用户 订单管理 刪除用息 退出系统 商品管理 订单管理 退出系统 图4-2-1伸缩式菜单1 图4-2-2伸缩式菜单2 (2)部分如下所示 /div> 用户管理 添加用户 商品管理 添加商品 修改商品 本讲共计5页当前第2页
《Web 交互开发》实验教学指导 / 实验五 ：AJAX 本讲共计 5 页 | 当前第 2 页 }); }) （3）请完成以下任务： 任务一：对上述脚本代码进行逐行注释。（3 分） 任务二：列举 jQuery 中事件绑定的方法？（2 分） 任务三：将上述代码改为通过鼠标移动至标题来实现内容的隐藏或显示。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、伸缩式导航菜单 （1）伸缩式导航菜单如图 4-2-1，4-2-2 所示。 （2）部分如下所示： 用户管理 添加用户 删除用息 商品管理 添加商品 修改商品 图 4-2-1 伸缩式菜单 1 图 4-2-2 伸缩式菜单 2
Wdb交互开发》实验教学指导/实验五:AAX3 删除商品 订单管理 订单查询 K/dd /div> (3)请完成下面的任务 任务一:编写 jQuery代码完成如图42-1与42-2所示的效果。(5分) 任务二:如何实现元素的淡入淡出效果?(2分) 任务三:使用 animate()方法可以创建自定义动画,它可以带有几个参数,分 别表示什么意思?(3分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、使用插件实现表单验证 (1)从官网上下载插件,实现如图4-3-1、4-3-2所示的表单验证功能 请输入下列资料 请输入下列资料 用户名 必选字段 输入正确格式电子邮件 提交 图4-3-1表单 必选字段 匚提交 图4-3-2表单验证 (2)请完成下面的任务: 任务一:开发代码,显示效果如图4-3-1所示。(5分) 任务二:点击提交按钮实现检测用户名、邮箱、网址都不能为空?(4分) 任务三:点击提交按钮,检测用户名不能少于5个字符。(3分) 任务四:点击提交按钮,验证邮箱与网址的格式正确。(3分) 本讲共计5页当前第3页
《Web 交互开发》实验教学指导 / 实验五 ：AJAX 本讲共计 5 页 | 当前第 3 页 删除商品 订单管理 订单查询 删除订单 退出系统 （3）请完成下面的任务： 任务一：编写 jQuery 代码完成如图 4-2-1 与 4-2-2 所示的效果。（5 分） 任务二：如何实现元素的淡入淡出效果？（2 分） 任务三：使用 animate（）方法可以创建自定义动画，它可以带有几个参数，分 别表示什么意思？（3 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、使用插件实现表单验证 （1）从官网上下载插件，实现如图 4-3-1、4-3-2 所示的表单验证功能。 （2）请完成下面的任务： 任务一：开发代码，显示效果如图 4-3-1 所示。（5 分） 任务二：点击提交按钮实现检测用户名、邮箱、网址都不能为空？（4 分） 任务三：点击提交按钮，检测用户名不能少于 5 个字符。（3 分） 任务四：点击提交按钮，验证邮箱与网址的格式正确。（3 分） 图 4-3-1 表单 图 4-3-2 表单验证
Wdb交互开发》实验教学指导/实验五:AM4 任务五:列举其他至少三种常用的插件,并简单介绍其用途。(5分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 1、文章排版的实现 (1)页面如图44-1和44-2所示。 (2)完成下述任务。 任务一:完成页面的编写。(5分) 任务二:编写 jQuery实现如图4-4-1与4-4-2的效果。(5分) 要求 请将完成上述任务的步骤,填写到实验报告册中。 背影 背影 作者:朱自青/创作时间:1925年 作者:朱自清/创作时间:1925年 我与父亲不相见已二年余了,我最不能忘记的是他的背影。那 我与父亲不相见已二年余了,我最不能忘记的是他的背影。那 年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子, 年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子, 我从北京到徐州,打算跟看父亲奔丧回家。到徐州见看父亲,看见 我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见 海狼藉的东西,又想起祖母,不梦地流下眼泪。父亲 满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲 说,“郭如比,不必难过,好在天无绝人之路!” 说,“事如比,不必难过,好在天无绝人之路!” 甲多》 回家变卖曲质,父亲还了亏空;又借钱办了丧事。这些日子 家中光景很是惨修淡,一半为了丧事,一半为了父亲赋闲。丧事完 图4-4-1背影1 毕,父亲要到南京谋事,我也要回北京念书,我们便同行 图4-42背影 2、图片放大效果的实现。 (1)页面如图45所示。 (2)完成下述任务。 任务一:完成页面的编写。(5分 任务二:编写 jQuery插件实现如图4-5效果。(5分)
《Web 交互开发》实验教学指导 / 实验五 ：AJAX 本讲共计 5 页 | 当前第 4 页 任务五：列举其他至少三种常用的插件，并简单介绍其用途。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、文章排版的实现。 （1）页面如图 4-4-1 和 4-4-2 所示。 （2）完成下述任务。 任务一：完成页面的编写。（5 分） 任务二：编写 jQuery 实现如图 4-4-1 与 4-4-2 的效果。（5 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 2、图片放大效果的实现。 （1）页面如图 4-5 所示。 （2）完成下述任务。 任务一：完成页面的编写。（5 分） 任务二：编写 jQuery 插件实现如图 4-5 效果。（5 分） 图 4-4-1 背影 1 图 4-4-2 背影 2
Wdb交互开发》实验教学指导/实验五:MJMX5 七、思考及问答(20分) 1、S( document) ready(方法和 window onload有什么区别?(5分) 2、 jQuery中的 hover0和 toggle有什么区别?(5分) 3、 jQuery中的事件冒泡是怎么执行的,如何停止冒泡事件的发生?(5分) 4、 jQuery中$.get)提交和$ post(提交有什么区别?(5分) 本讲共计5页|当前第5页
《Web 交互开发》实验教学指导 / 实验五 ：AJAX 本讲共计 5 页 | 当前第 5 页 七、思考及问答（20 分） 1、$(document).ready()方法和 window.onload 有什么区别？（5 分） 2、jQuery 中的 hover()和 toggle()有什么区别？（5 分） 3、jQuery 中的事件冒泡是怎么执行的，如何停止冒泡事件的发生？（5 分） 4、jQuery 中$.get()提交和$.post()提交有什么区别？（5 分）