《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)部分代码如下 <script type="text/javascript"> 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）部分代码如下： <script type="text/javascript"> $(function() { $("#menu li").each(function(index) { $(this).click(function() { $("#menu li.tabFocus").removeClass("tabFocus"); / $(this).addClass("tabFocus"); $("#content li:eq(" + index + ")").show() .siblings().hide(); });