河南中医药大学：《Web交互开发》实验指导_07.实验七：Ajax[JH-2018版]

《Web交互开发》实验教学指导/实验七:Aiax 《Web交互开发》实验教学指导 实验七:Ajax 、实验目的(5分) 1、理解Ajax的工作原理 2、掌握XML和JSON数据格式; 3、掌握 JavaScript操作Ajax的方法; 4、掌握 jQuery操作Ajax的方法; 5、了解互联网API接口并能调用。 二、实验环境(5分) 1、 Windows xP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成 jQuery读取JSON数据; 2、使用 jQuery读取XML文件 3、使用 jQuery加载js文件; 4、实现天气预报代码。 四、实验原理(5分) 的工作原理; 2、XML和JSON数据格式 3、 JavaScript操作Ajax 4、 jQuery操作Ajax 五、实验步骤(40分) 1、使用 jQuery读取JsoN数据 (1)JSON数据显示如下所示 张三 email""zhangsan@163.com }, "name":"李四 email""lisia163.com 本讲共计3页|当前第1页

《Web 交互开发》实验教学指导 / 实验七 ：Ajax 本讲共计 3 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验七：Ajax 一、实验目的（5 分） 1、理解 Ajax 的工作原理； 2、掌握 XML 和 JSON 数据格式； 3、掌握 JavaScript 操作 Ajax 的方法； 4、掌握 jQuery 操作 Ajax 的方法； 5、了解互联网 API 接口并能调用。 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成 jQuery 读取 JSON 数据； 2、使用 jQuery 读取 XML 文件； 3、使用 jQuery 加载 js 文件； 4、实现天气预报代码。 四、实验原理（5 分） 1、Ajax 的工作原理； 2、XML 和 JSON 数据格式； 3、JavaScript 操作 Ajax； 4、jQuery 操作 Ajax。 五、实验步骤（40 分） 1、使用 jQuery 读取 JSON 数据。 （1）JSON 数据显示如下所示。 [ { "name": "张三", "sex": "男", "email": "zhangsan@163.com" }, { "name": "李四", "sex": "女", "email": "lisi@163.com" }

《Web交互开发》实验教学指导/实验七:Aiax (2)请完成下面的任务 任务一:创建JSON文件。(5分) 任务二:使用 jQuery读取JSON数据,并将其显示到网页上?(5分) 要求 请将上述任务的操作方法,填写到实验报告册中 2、使用 jQuery加载ⅩML文档 (1)请完成下面的任务: 任务一:将上述JSON文件存储为XML文档。(5分) 任务二:使用 jQuery取XML文件,并将其显示在网页上(5分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 3、使用 jQuery加载js文件 (1)JS文件数据显示,该文件的代码如下 “name”:”张 “sex”:男; “emai!”:”zha a163.com “name”:”李四”; “sex”:男; email:"isi@163com” (2)请完成下面的任务 任务一:创建JS文件。(5分) 任务二:使用 jQuery读取Js文件,并将其显示到网页上?(5分) 要求 请将上述任务的操作方法,填写到实验报告册中 4、天气预报 (1)实现如图7-1所示天气预报 郑州◎晴13℃~1℃星期三◎睛13℃~2℃详细x 图7-1所示 (2)请完成下面的任务 本讲共计3页|当前第2页

《Web 交互开发》实验教学指导 / 实验七 ：Ajax 本讲共计 3 页 | 当前第 2 页 ] （2）请完成下面的任务： 任务一：创建 JSON 文件。（5 分） 任务二：使用 jQuery 读取 JSON 数据，并将其显示到网页上？（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、使用 jQuery 加载 XML 文档 （1）请完成下面的任务： 任务一：将上述 JSON 文件存储为 XML 文档。（5 分） 任务二：使用 jQuery 取 XML 文件，并将其显示在网页上（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、使用 jQuery 加载 js 文件 （1）JS 文件数据显示，该文件的代码如下： var data=[ { “name”：”张三”； “sex”：男； “email”：”zhangsan@163.com” } { “name”：”李四”； “sex”：男； “email”：”lisi@163.com” } ] （2）请完成下面的任务： 任务一：创建 JS 文件。（5 分） 任务二：使用 jQuery 读取 JS 文件，并将其显示到网页上？（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 4、天气预报 （1）实现如图 7-1 所示天气预报。 （2）请完成下面的任务： 图 7-1 所示

b交互开发》实验教学指导/实验七:A3 任务一:实现如图所示的天气预报样式,查找天气预报接口。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 1、创建学生成绩文件,存储数据,然后将数据显示到网页上。 (1)创建数据存储文件,将数据显示到网页上。 (2)完成下述任务。 任务一:使用XML或者JSON存储数据。(5分) 任务二:读取数据显示到网页上。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、学习百度地图API接口,将地图显示到网页上。 (1)完成下述任务。 任务一:在网页上显示地图。(10分) 要求 请将上述任务的操作方法,填写到实验报告册中。 七、思考及问答(20分) 1、XML与JSON格式有什么区别与联系?(5分) 2、简述Ajax的工作原理?(5分) 3、什么是Ajax?为什么要使用Ajax?(5分) 4、 XmlhTtpreqUest对象的属性和方法有哪些?(5分) 本讲共计3页|当前第3页

《Web 交互开发》实验教学指导 / 实验七 ：Ajax 本讲共计 3 页 | 当前第 3 页 任务一：实现如图所示的天气预报样式，查找天气预报接口。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、创建学生成绩文件，存储数据，然后将数据显示到网页上。 （1）创建数据存储文件，将数据显示到网页上。 （2）完成下述任务。 任务一：使用 XML 或者 JSON 存储数据。（5 分） 任务二：读取数据显示到网页上。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、学习百度地图 API 接口，将地图显示到网页上。 （1）完成下述任务。 任务一：在网页上显示地图。（10 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 七、思考及问答（20 分） 1、XML 与 JSON 格式有什么区别与联系？（5 分） 2、简述 Ajax 的工作原理？（5 分） 3、什么是 Ajax？为什么要使用 Ajax?（5 分） 4、XMLHttpRequest 对象的属性和方法有哪些？（5 分）