本文详细讲解如何使用原生JavaScript的XMLHttpRequest对象实现AJAX请求，从天气API获取数据。我们将重点演示如何准确地访问JSON响应中嵌套的温度（main.temp）和天气描述（weather[0].description）字段，并将这些信息同时显示在网页上，提供完整的代码示例和解析。
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。
当前天气信息 body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; } #weather-display { border: 1px solid #e0e0e0; padding: 15px; border-radius: 8px; max-width: 350px; background-color: #f9f9f9; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } #weather-display div { margin-bottom: 10px; display: flex; align-items: center; } #weather-display strong { display: inline-block; width: 80px; color: #333; font-size: 1.1em; } #temp, #weather-description { font-weight: bold; color: #007bff; font-size: 1.1em; } h1 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 20px; }当前天气信息
// getJSON 函数定义同上 const getJSON = function(url, callback) { let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'json'; xhr.onload = function() { let status = xhr.status; if (status === 200) { callback(null, xhr.response); } else { callback(status); } }; xhr.onerror = function() { callback('Network error or CORS issue'); }; xhr.send(); }; // 您的API端点 const API_URL = 'https://mm214.com/jsondemo.php'; getJSON(API_URL, function(err, data) { const tempElement = document.getElementById("temp"); const weatherDescElement = document.getElementById("weather-description"); if (err) { console.error('获取天气数据失败:', err); if (tempElement) tempElement.innerHTML = '获取失败'; if (weatherDescElement) weatherDescElement.innerHTML = '获取失败'; alert('获取天气数据时发生错误: ' + err); } else { // 确保数据存在且结构正确 if (data && data.main && typeof data.main.temp !== 'undefined') { // 假设API返回开尔文温度，可根据需要转换为摄氏度或华氏度 if (tempElement) tempElement.innerHTML = data.main.temp + ' K'; } else { if (tempElement) tempElement.innerHTML = 'N/A'; } // weather是一个数组，通常第一个元素包含主要的天气描述 if (data && data.weather && data.weather.length > 0 && data.weather[0].description) { if (weatherDescElement) weatherDescElement.innerHTML = data.weather[0].description; } else { if (weatherDescElement) weatherDescElement.innerHTML = 'N/A'; } } });温度: 加载中...描述: 加载中...
关键点：
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 APIfetch(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 也能帮助您编写更简洁高效的代码。
以上就是JavaScript原生AJAX实现天气API数据获取与展示：温度与描述的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520856.html
微信扫一扫 
支付宝扫一扫 
