1. 理解API响应的JSON数据结构
在从api获取数据之前，首先需要了解api返回的数据结构。一个典型的天气api响应通常是一个json对象，其中包含多个嵌套的对象和数组。例如，我们所使用的api（https://mm214.com/jsondemo.php）可能返回类似以下结构的json数据：
{
"coord": { /* ... */ },
"weather": [{
"id": 300,
"main": "Drizzle",
"description": "light intensity drizzle", // 我们需要的天气描述
"icon": "09d"
}],
"base": "stations",
"main": {
"temp": 280.32, // 我们需要的温度
"pressure": 1012,
"humidity": 81,
"temp_min": 279.15,
"temp_max": 281.15
},
"visibility": 10000,
"wind": { /* ... */ },
"clouds": { /* ... */ },
"dt": 1485789600,
"sys": { /* ... */ },
"id": 2643743,
"name": "London",
"cod": 200
}从上述结构中，我们可以看到：
- 温度（Temperature）：位于 main 对象内部的 temp 字段，通过 data.main.temp 访问。
- 天气描述（Weather Description）：位于 weather 数组的第一个元素（一个对象）内部的 description 字段。因此，需要通过 data.weather[0].description 访问。weather 字段是一个数组，即使只有一个天气状况，它也会被封装在一个数组中。
理解这种嵌套结构是正确获取数据的关键。
2. 使用XMLHttpRequest实现AJAX请求
XMLHttpRequest (XHR) 是浏览器内置的API，用于在不重新加载页面的情况下向服务器发送HTTP请求和接收响应。以下是一个封装了XHR请求的 getJSON 函数：
const getJSON = function(url, callback) {
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 初始化请求，使用GET方法，并设置为异步
xhr.responseType = 'json'; // 期望服务器响应的数据类型为JSON
// 监听请求状态变化或响应加载完成
xhr.onload = function() {
let status = xhr.status;
if (status === 200) { // HTTP状态码200表示请求成功
callback(null, xhr.response); // 调用回调函数，传递null作为错误，xhr.response作为数据
} else {
callback(status); // 如果状态码不是200，传递状态码作为错误
}
};
// 监听网络错误或CORS问题
xhr.onerror = function() {
callback('Network error or CORS issue');
};
xhr.send(); // 发送请求
};代码解析：
立即学习“Java免费学习笔记（深入）”；
- xhr.open('GET', url, true): 配置请求。'GET' 是HTTP方法，url 是API地址，true 表示请求是异步的。
- xhr.responseType = 'json': 告诉XHR期望服务器返回JSON格式的数据。这样，xhr.response 将自动被解析为JavaScript对象。
- xhr.onload: 当请求成功加载完成时触发。在这个回调中，我们检查 xhr.status 是否为 200（HTTP OK），然后调用传入的 callback 函数。
- xhr.onerror: 当请求遇到网络错误（如断网、CORS问题等）时触发。
- xhr.send(): 发送HTTP请求。
3. 在网页上显示天气数据
为了在网页上显示获取到的温度和天气描述，我们需要在HTML中准备相应的占位符元素。通常使用 标签并赋予唯一的 id。
当前天气信息
当前天气信息
温度: 加载中...
描述: 加载中...
关键点：
- HTML结构： 两个 元素，分别用于显示温度 (id="temp") 和天气描述 (id="weather-description")。
- 数据访问： 在 getJSON 的回调函数中，通过 data.main.temp 访问温度，通过 data.weather[0].description 访问天气描述。注意 weather 是一个数组，因此需要 [0] 来获取第一个天气对象。
- DOM更新： 使用 document.getElementById("id").innerHTML = value 将获取到的数据更新到对应的HTML元素中。
- 健壮性： 在访问 data.main.temp 和 data.weather[0].description 之前，添加了对 data、data.main、data.weather 以及 data.weather.length 的存在性检查，以防止因API响应不完整或结构不符导致错误。
- 温度单位： 示例中假定API返回的是开尔文温度，并添加了 " K" 后缀。实际应用中，您可能需要将其转换为摄氏度或华氏度。
4. 注意事项与最佳实践
错误处理： 始终实现健壮的错误处理机制。在 getJSON 函数中，我们处理了HTTP状态码非200的情况以及网络错误。在回调函数中，也应该优雅地显示错误信息给用户，而不是让页面崩溃。
API密钥： 许多公共API需要API密钥进行认证。在本示例中，API不需要密钥，但在实际项目中，请确保妥善管理和保护您的API密钥（例如，不要直接暴露在前端代码中，而通过后端代理请求）。
异步性理解： AJAX请求是异步的。这意味着 getJSON 函数会立即返回，而数据处理逻辑会在请求完成后（即 callback 被调用时）执行。
跨域资源共享 (CORS)： 如果您的网页与API位于不同的域，浏览器可能会阻止请求，出现CORS错误。这通常需要服务器端配置来允许跨域请求。
温度单位转换： 不同的天气API可能返回不同的温度单位（如开尔文、摄氏度、华氏度）。在显示之前，请确保进行必要的单位转换以符合用户预期。
-
现代替代方案： 尽管 XMLHttpRequest 功能强大，但现代JavaScript开发中更推荐使用 Fetch API 或第三方库如 Axios，它们提供了更简洁、更Promise化的API来处理HTTP请求。例如：
// 使用Fetch API fetch(API_URL) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { // 处理数据并更新DOM document.getElementById("temp").innerHTML = data.main.temp + ' K'; document.getElementById("weather-description").innerHTML = data.weather[0].description; }) .catch(error => { console.error('获取天气数据失败:', error); document.getElementById("temp").innerHTML = '获取失败'; document.getElementById("weather-description").innerHTML = '获取失败'; });
总结
通过本文，我们学习了如何使用原生JavaScript的 XMLHttpRequest 对象从API获取天气数据。关键在于理解API响应的JSON数据结构，特别是如何访问嵌套的对象属性和数组元素。通过清晰的HTML结构和JavaScript逻辑，我们可以轻松地将API数据动态地呈现在网页上，并结合错误处理和最佳实践，构建出健壮且用户友好的应用。虽然 XMLHttpRequest 是基础，了解现代的 Fetch API 也能帮助您编写更简洁高效的代码。
