6：第三方API&&排序

难度系数：中等

此前我们制作的网页均只使用本地资源，从本任务开始，将正式学习前端网络通信。掌握 AJAX 异步请求、调用第三方后端 API、实现前后端数据交互，是前端从初级进阶到高阶的核心能力。

现在，你将通过调用真实的天气 API，让网页“活”起来——动态获取实时数据，并实现交互式排序功能。

你正在为微光工作室开发一个“全国城市天气看板”。这个看板需要能够自动获取多个城市的实时天气信息，并允许用户按照温度或天气状况进行排序，以便快速了解各地天气情况。

在这个任务中，你将第一次让前端页面与远程服务器通信，体验动态网页的核心工作原理。

最终效果示意：

• 页面加载后自动显示7个不同城市的实时天气（城市名、天气状况、温度）。
• 提供“温度升序”和“温度降序”两个按钮，点击后列表重新排序。
• 排序时，若温度相同，则按天气优先级排序：晴 ＞ 多云 ＞ 阴 ＞ 雨（包含所有雨天类型）。

1. 调用第三方API获取数据

   • 使用提供的天气 API 接口，通过 AJAX 异步请求获取 七个不同城市 的实时天气数据。
   • API 地址：https://api.seniverse.com/v3/weather/now.json?key=SWJEEWD_M17tT3zGk&location=城市名
   • 你需要自行选择七个城市，并分别发起请求（或批量处理）。

2. 动态渲染数据

   • 将获取到的每个城市的 名称、天气状况（如“晴”、“多云”）和 实时温度 渲染到页面中，以清晰美观的方式展示。

3. 实现排序功能

   • 提供两个按钮：“温度升序”和“温度降序”。
   • 点击按钮后，列表按温度排序并重新渲染，页面不能刷新。
   • 排序优先级规则：
     • 先按温度数值从小到大（升序）或从大到小（降序）排列；
     • 若温度相同，则按照天气类型优先级排列：晴 ＞ 多云 ＞ 阴 ＞ 雨（雨天包含小雨、中雨、大雨、暴雨、雷阵雨、阵雨等）。

4. 技术细节

   • 全程使用 AJAX 异步请求（可使用 XMLHttpRequest 或 fetch）。
   • 所有数据更新必须在当前页面动态完成，禁止刷新页面。

• 什么是 AJAX？异步请求与同步请求有什么区别？
• 如何测试第三方 API 接口是否可用？
• 如何使用 fetch 或 XMLHttpRequest 发送 GET 请求？
• 如何解析 JSON 数据并提取所需字段？
• 如何将排序后的数据重新渲染到 DOM 中？
• 菜鸟教程 AJAX 教程
• MDN 官方 Fetch API 教程
• JavaScript 数组排序 sort() 方法

提交完整可运行的 HTML + CSS + JS 源码文件（或单页 HTML）即可。

提交点这里

出题人：  Xx

QQ：2191131478

邮箱：2191131478@qq.com