高德地图api接口免费查询天气Ajax方法实现学习笔记

// 高德地图天气查询API接口示例
// 使用Ajax异步请求获取天气信息
 
// 构造请求URL
var url = "https://restapi.amap.com/v3/weather/weatherInfo?key=您的高德API密钥&city=110000";
 
// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL以及是否异步处理
xhr.open('GET', url, true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
    // 请求完成并且响应状态码为200
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理响应的数据
        var response = JSON.parse(xhr.responseText);
        console.log(response);
        // 更新页面上的天气信息展示
        // 例如：document.getElementById('weather').innerText = response.weather;
    }
};
 
// 发送请求
xhr.send();

在这段代码中，我们首先构造了一个包含API密钥和城市代码的请求URL。然后，我们创建了一个新的XMLHttpRequest对象，并配置了请求类型、URL以及是否异步处理。我们设置了一个回调函数，当请求完成时会被调用，并对响应的数据进行处理。最后，我们发送了请求。这是一个典型的Ajax请求处理天气信息的例子。