使用JavaScript获取AccuWeather JSON数据失败，求代码排查修复

嘿，我一眼就看到你代码里的问题啦！你现在的代码只准备了请求，但还没真正发出去，而且也没写接收响应的逻辑，这就是为什么拿不到数据~

两个核心问题： #

• 你只调用了request.open()来配置请求，但没有调用request.send()来真正发起请求，就像你填好了快递单，但没把快递交给快递员一样。
• 缺少响应处理的回调逻辑，就算请求发出去了，你也没法获取并处理返回的JSON数据。

修正后的完整代码 #

<html>
<head>
    <meta charset="utf-8"/>
    <title>getting</title>
    <script>
        function start() {
            var requestURL = "http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true";
            var request = new XMLHttpRequest();

            // 设置请求完成后的回调函数
            request.onload = function() {
                if (request.status >= 200 && request.status < 300) {
                    // 请求成功，解析JSON数据
                    var responseData = JSON.parse(request.responseText);
                    console.log("获取到的数据：", responseData);
                    // 这里可以把数据渲染到页面上，比如更新loading div
                    document.getElementById('loading').textContent = "请求成功！已获取天气数据";
                } else {
                    // 请求失败，打印错误信息
                    console.error("请求出错，状态码：", request.status);
                    document.getElementById('loading').textContent = "请求失败，请检查";
                }
            };

            // 设置请求出错的回调
            request.onerror = function() {
                console.error("网络请求失败");
                document.getElementById('loading').textContent = "网络请求失败";
            };

            // 配置并发送请求
            request.open('GET', requestURL);
            request.send(); // 关键：发送请求
        }

        window.addEventListener("load", start, false);
    </script>
</head>
<body>
    <div id="loading"></div>
</body>
</html>

关键改动说明： #

1. 添加了request.send()：这是发起请求的关键一步，没有它请求永远不会发送出去。
2. 新增request.onload回调：当请求完成时触发，在这里我们判断状态码是否成功，然后解析返回的JSON数据。
3. 新增request.onerror回调：处理网络层面的错误，比如断网的情况。
4. 把数据解析和页面更新的逻辑写在回调里：因为XMLHttpRequest是异步的，不能在open之后直接获取响应，必须等请求完成后在回调里处理。

现在你运行这段代码，就能在控制台看到返回的天气数据啦，页面上的loading div也会根据请求状态更新内容~

内容的提问来源于stack exchange，提问作者Benjamin So