Ajax 天气预报API案例

以下是一个简化的JavaScript代码示例，用于通过Ajax调用OpenWeatherMap天气预报API，并在网页上显示结果。

// 设置API的URL和你的API密钥
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric";
 
// 创建一个新的XMLHttpRequest对象
const request = new XMLHttpRequest();
 
// 配置请求
request.open('GET', apiUrl, true);
 
// 设置请求完成的处理函数
request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // 请求成功，处理响应
    const response = JSON.parse(this.response);
    // 假设响应格式中包含了天气状况描述和温度信息
    const weatherDescription = response.weather[0].description;
    const temperature = response.main.temp;
 
    // 更新页面上的信息
    document.getElementById("weather-description").textContent = weatherDescription;
    document.getElementById("temperature").textContent = temperature + "°C";
  } else {
    // 请求失败，处理错误
    console.error('Error occurred:', this.statusText);
  }
};
 
// 发送请求
request.send();

在这个示例中，我们首先定义了一个API URL，其中包含了城市名称（这里是伦敦—London）、你的API密钥以及所需的温度单位（这里是公制单位—metric）。然后，我们创建了一个新的XMLHttpRequest对象，并设置了请求方法为GET以及请求的URL。我们还设置了一个onload事件处理函数，它会在请求完成时被调用，并根据响应结果更新页面上的信息。最后，我们调用send方法发送请求。

请注意，你需要替换YOUR_API_KEY为你自己的OpenWeatherMap API密钥，并确保相应的HTML元素存在于页面上，例如：

<p id="weather-description">天气状况描述</p>
<p id="temperature">温度</p>