第13章教案_天气预报查询的设计与实现.doc

《JavaScript与jQuery网页前端开发与设计-第2版》教案

第13章天气预报查询的设计与实现

一、教学目标：

学习掌握第三方服务平台密钥申请和调用方法；

学习掌握JavaScript和jQuery基础知识；

学习掌握jQueryAJAX的用法实现服务器请求和回调处理。

二、教学重点和难点：

重点：学习掌握jQueryAJAX的用法实现服务器请求和回调处理；

难点：服务器请求和回调处理原理的理解。

三、教学方法与手段：

采取互动式教学方法，理论教学使用多媒体投影教室。

四、课程简介：

本章将从零开始详解如何调用第三方服务平台接口制作一款天气预报查询程序。通过对完整项目实例的解析与实现，提高开发者项目分析能力以及强化对于JavaScript和jQuery的综合应用能力。

五、教学基本内容：

13.1案例背景

探索我国的气象历史文脉，就一定会提到北极阁。北极阁是南京城内的一座丘陵，又名钦天山，位于鼓楼东面，北依台城、玄武湖，西连鼓楼岗，东连覆舟山，因刘宋时山上建立日观台而得名。古名“鸡鸣山”，因形似鸡笼又名“鸡笼山”，明时“国朝于山巅置仪表，以测玄纬，名观象台，更名钦天山”。

北极阁气象历史源远流长。早在南北朝时，北极阁即建有“灵台候楼”，用以观天测候；明，洪武年间，在此建“观象台”，又名“钦天台”，既观气象又观天象；清，康熙皇帝第六次下江南，曾登台远眺，亲笔“旷观”；民国时期，卓越的气象、地理学家——竺可桢先生，在此创建中国历史上第一个气象研究所。我国近、现代一批顶级气象学家，如涂长望、赵九章、叶笃正、陶诗言等都曾在此工作、学习过。因此，南京北极阁被海内外气象学界誉为中国近代气象发祥地。新中国成立至今，北极阁一直是江苏气象台所在地，是江苏气象业务服务中心。1999年，北极阁被国家科技部、教育部、中央宣传部和中国科协命名为“全国青少年科技教育基地”。2000年，北极阁被南京大学选定为“产学科研基地”。（摘自“中国天气网”/）

北极阁既见证了民族历史的沧桑一隅，也经历了气象创业的悠久历程。

13.2案例需求

本章将综合应用jQueryAJAX技术开发一个天气预报查询页面，用户通过切换城市名称可以查询该地区当天的天气情况。为达到真实效果，本示例将选用一款具有气象数据服务的免费开源API作为AJAX请求接口。

用户可以使用下拉菜单切换城市，利用jQueryAJAX技术获取当前城市的一系列气象数据，最后将数据展现在界面上。本示例节选了四个直辖市（北京、重庆、上海和天津）的天气数据。

13.3准备工作

13.3.1API密钥申请

本小节主要介绍如何申请获得开源API的密钥。由于百度APIStore目前已经不再提供服务，因此这里选择了可以提供全球气象数据服务接口的和风天气API，其官方网址为/。用户使用邮箱进行注册并激活后每次使用都可以免费获取未来三天之内全球各地区的实时天气，免费接口调用流量为1000次/天、频率为200次/分钟，该数据基本可以满足读者的开发学习需求。

注册完毕之后可以访问/#/console来查看账号信息，用户登陆后即可看到开发者申请到的个人认证key，如果列表是空白的则可点击“添加key”按钮创建一个新的应用key。

开发者需记录上述页面中的个人认证key，该信息在AJAX请求时会作为身份识别的标识一并发送给服务器。至此，开源API的密钥申请就已经顺利完成，读者可以进行下一节的学习，了解如何调用API获取气象数据。

13.3.2API调用方法

免费用户可以调用的接口地址为：/v7/，其服务器节点在中国境内。该接口地址后面追加不同的关键词将获取不同的气象数据信息，例如alarm为天气自然灾害预警，读者可以访问官方文档/docs/api/了解各类关键词的使用方法。

本示例将选用关键词weather/now进行实况天气数据的获取。实况天气即为当前时间点的天气状况以及温湿风压等气象指数，具体包含的数据：体感温度、实测温度、天气状况、风力、风速、风向、相对湿度、大气压强、降水量、能见度等。目前该接口允许查询的城市覆盖范围为全球任意一个城市。

基于关键词weather/now的接口具有2个必填参数和3个可选参数，如下表所示。

表weather接口参数一览表

参数名称

参数类型

解释

location

必填参数

用于规定需要查询的地区。可以填入查询地区的LocationID或经纬度坐标（十进制）。

例如：

location=101010100（查询地区的LocationID）

location=120.343,36.088（经纬度）

key

必填参数

需要填入用户的个人认证key字符串。接口将通过该数据判断是否为授权用户，并可以进一步判断是否为付费用户。

例如：key=123abc456