如何在JavaScript中发送HTTP请求？IP信息页面无输出问题排查与修正

我帮你排查出了代码里的几个核心问题，这就是为什么页面既没报错也没有数据输出的原因：

• 异步请求的执行时机问题：AJAX请求是异步的，你在回调函数外面直接执行DOM更新代码，这时候请求还没返回数据，response1根本不存在，自然无法更新页面。而且response1是回调内部的局部变量，外部代码也访问不到它。
• 拼写错误：回调函数的参数写成了resonse（少了一个字母p），后面解析时用response会导致变量未定义；另外HTML里的状态消息元素ID是stausMessage（少了字母t），和JS里的statusMessage不匹配。
• 缺少错误处理：原代码没有处理请求失败的情况，就算请求出错也不会有任何提示，不利于调试。

下面是修正后的完整代码，我改用了更现代简洁的fetch API（如果偏好XMLHttpRequest，后面也会给你对应的修正版本）：

<!DOCTYPE html>
<html>
<head>
    <title>JS Get Request</title>
</head>
<body>
    <center>JavaScript Get Request Test</center>
    statusCode : <p id="statusCode"></p><br/>
    statusMessage : <p id="statusMessage"></p><br/>
    ipAddress : <p id="ipAddress"></p><br/>
    countryCode : <p id="countryCode"></p><br/>
    countryName : <p id="countryName"></p><br/>
    regionName : <p id="regionName"></p><br/>
    cityName : <p id="cityName"></p><br/>
    zipCode : <p id="zipCode"></p><br/>
    latitude : <p id="latitude"></p><br/>

    <script type="text/javascript">
        const url = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
        
        // 使用Fetch API发起请求
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`请求失败：${response.status}`);
                }
                return response.json(); // 直接解析JSON，不用手动JSON.parse
            })
            .then(data => {
                // 请求成功后更新DOM
                document.getElementById("statusCode").textContent = data.statusCode;
                document.getElementById("statusMessage").textContent = data.statusMessage;
                document.getElementById("ipAddress").textContent = data.ipAddress;
                document.getElementById("countryCode").textContent = data.countryCode;
                document.getElementById("countryName").textContent = data.countryName;
                document.getElementById("regionName").textContent = data.regionName;
                document.getElementById("cityName").textContent = data.cityName;
                document.getElementById("zipCode").textContent = data.zipCode;
                document.getElementById("latitude").textContent = data.latitude;
            })
            .catch(error => {
                // 处理请求错误
                console.error('获取IP信息失败:', error);
                alert('获取IP信息失败，请检查网络或API地址');
            });
    </script>
</body>
</html>

如果你更习惯使用XMLHttpRequest，这里是对应的修正版本：

<!DOCTYPE html>
<html>
<head>
    <title>JS Get Request</title>
</head>
<body>
    <center>JavaScript Get Request Test</center>
    statusCode : <p id="statusCode"></p><br/>
    statusMessage : <p id="statusMessage"></p><br/>
    ipAddress : <p id="ipAddress"></p><br/>
    countryCode : <p id="countryCode"></p><br/>
    countryName : <p id="countryName"></p><br/>
    regionName : <p id="regionName"></p><br/>
    cityName : <p id="cityName"></p><br/>
    zipCode : <p id="zipCode"></p><br/>
    latitude : <p id="latitude"></p><br/>

    <script type="text/javascript">
        var HttpClient = function(){
            this.get = function(aUrl, aCallback, errorCallback){
                var anHttpRequest = new XMLHttpRequest();
                anHttpRequest.onreadystatechange = function() {
                    if(anHttpRequest.readyState == 4){
                        if(anHttpRequest.status == 200){
                            aCallback(anHttpRequest.responseText);
                        } else {
                            errorCallback(anHttpRequest.status);
                        }
                    }
                }
                anHttpRequest.open("GET", aUrl, true);
                anHttpRequest.send(null);
            }
        }

        var theurl = 'http://api.ipinfodb.com/v3/ip-city/?key=c7b0a48b0232ec3a0154bac3af7707170dd8268116543d6719262d49724bfc38&ip=106.51.76.69&format=json';
        var client = new HttpClient();
        
        client.get(theurl, function(response){
            var response1 = JSON.parse(response);
            // 把DOM更新放到回调内部
            document.getElementById("statusCode").innerHTML = response1.statusCode;
            document.getElementById("statusMessage").innerHTML = response1.statusMessage;
            document.getElementById("ipAddress").innerHTML = response1.ipAddress;
            document.getElementById("countryCode").innerHTML = response1.countryCode;
            document.getElementById("countryName").innerHTML = response1.countryName;
            document.getElementById("regionName").innerHTML = response1.regionName;
            document.getElementById("cityName").innerHTML = response1.cityName;
            document.getElementById("zipCode").innerHTML = response1.zipCode;
            document.getElementById("latitude").innerHTML = response1.latitude;
        }, function(status){
            console.error('请求失败，状态码:', status);
            alert('获取IP信息失败，请检查网络');
        });
    </script>
</body>
</html>

关键修正点总结 #

1. 调整DOM更新时机：把所有DOM操作代码移到请求成功的回调函数内部，确保只有当数据返回后才更新页面。
2. 修正所有拼写错误：修复了回调参数名、HTML元素ID的拼写问题。
3. 添加错误处理：新增了请求失败的处理逻辑，方便调试和给用户反馈。
4. 优化数据解析：Fetch API可以直接通过response.json()解析JSON，省去手动调用JSON.parse()的步骤。

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