XMLHttpRequest GET请求无响应问题求助

你的代码主要有三个核心问题导致异常：

1. 异步请求未正确处理 #

XMLHttpRequest是异步操作，xhr.send()后立即读取responseText时，请求还未完成，此时responseText是空值，后续的字符串处理也不会生效。同时你没有监听请求成功完成的事件，无法正确获取响应数据。

2. 跨域请求限制（Network Error的触发原因） #

浏览器的跨域资源共享（CORS）限制可能阻止请求，虽然Census Geocoder API理论上支持CORS，但旧的XMLHttpRequest对跨域场景的处理不够友好，容易触发错误。

3. 响应处理方式脆弱 #

直接通过字符串索引截取"Census Tracts"的方式极不可靠，API返回的JSON格式一旦有微小变化，就会导致功能失效，应该解析为JSON对象后再提取数据。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<body>
    <label for="streetInput">Street:</label>
    <input type="text" id="streetInput"><br><br>
    
    <label for="cityInput">City:</label>
    <input type="text" id="cityInput"><br><br>
    
    <label for="stateInput">State:</label>
    <input type="text" id="stateInput"><br><br>
    
    <label for="zipInput">Zip:</label>
    <input type="text" id="zipInput"><br><br>
    
    <button onclick="searchCensusData()">Search Census Data</button>

    <p id="result"></p>

    <script>
    async function searchCensusData() {
        const street = encodeURIComponent(document.getElementById('streetInput').value);
        const city = encodeURIComponent(document.getElementById('cityInput').value);
        const state = encodeURIComponent(document.getElementById('stateInput').value);
        const zip = encodeURIComponent(document.getElementById('zipInput').value);
        
        // 用URLSearchParams自动构建参数，避免手动拼接的格式错误
        const params = new URLSearchParams({
            street,
            city,
            state,
            zip,
            benchmark: "Public_AR_Current",
            vintage: "Current_Current",
            format: "json"
        });
        const apiUrl = `https://geocoding.geo.census.gov/geocoder/geographies/address?${params}`;
            
        document.getElementById('result').innerText = apiUrl;

        try {
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error(`请求失败，状态码: ${response.status}`);
            }
            const data = await response.json();
            // 从解析后的JSON中精准提取Census Tracts信息
            const censusTracts = data.result?.geographies?.["Census Tracts"];
            if (censusTracts && censusTracts.length > 0) {
                document.getElementById('result').innerText = `找到Census Tract: ${censusTracts[0].TRACT}`;
            } else {
                document.getElementById('result').innerText = "未找到相关Census Tracts数据";
            }
        } catch (error) {
            alert(`请求错误: ${error.message}`);
            console.error(error);
        }
    }
    </script>
</body>
</html>

修复说明 #

• 改用fetch API替代XMLHttpRequest，原生支持Promise和async/await，异步处理更简洁，跨域兼容性更好。
• 使用URLSearchParams构建查询参数，自动处理编码和格式，避免手动拼接字符串的潜在错误。
• 解析JSON响应后通过对象属性访问数据，比字符串截取更稳定可靠，适配API返回格式的正常变动。
• 添加完整的错误捕获机制，能精准定位错误类型（网络问题、HTTP状态错误等），方便排查。
• 移除不必要的空格替换操作，encodeURIComponent生成的%20符合URL规范，API可正常识别。

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