IE11兼容页面点击加载JSON API数据（禁用fetch）报错排查求助

嘿，这个报错我太熟了！咱们一步步来拆解问题：

核心问题：脚本执行时机不对 + 漏发请求 #

你看到的"Unable to get property 'addEventListener' of undefined or null reference"报错，根源是你的JS代码在页面DOM元素渲染前就执行了。当浏览器解析到<script>标签时，<button id="btn">和<input id="apikey">还没被创建出来，所以document.getElementById("btn")返回的是null，自然没法调用addEventListener。

另外，你原来的代码里还漏了调用ourRequest.send()——这也是API请求没发起的关键原因！

修复方案：调整脚本位置 + 完善代码逻辑 #

最简单直接的修复是把脚本移到<body>标签的末尾，确保浏览器先渲染所有DOM元素，再执行JS代码。同时我们还要补充一些兼容IE11的容错逻辑：

<body>
Enter API key: <input type="text" id="apikey">
<button id="btn">Click me</button>
<p id="title"></p>

<script>
var btn = document.getElementById("btn");
var titleElement = document.getElementById("title");

btn.addEventListener("click", function() {
    var apikeyValue = document.getElementById("apikey").value;
    
    // 先检查用户是否输入了API密钥
    if (!apikeyValue.trim()) {
        titleElement.textContent = "请输入有效的API密钥！";
        return;
    }

    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', 'http://example.example?apikey=' + apikeyValue);
    
    ourRequest.onload = function() {
        // 处理成功响应
        if (ourRequest.status >= 200 && ourRequest.status < 400) {
            try {
                var ourData = JSON.parse(ourRequest.responseText);
                // 检查返回的数据结构是否符合预期，避免IE11报错
                if (ourData && ourData.data && ourData.data.length > 0) {
                    titleElement.textContent = ourData.data[0].name;
                } else {
                    titleElement.textContent = "返回的数据格式不符合预期";
                }
            } catch (parseError) {
                titleElement.textContent = "数据解析失败：" + parseError.message;
            }
        } else {
            // 处理HTTP错误
            titleElement.textContent = "请求失败，状态码：" + ourRequest.status;
        }
    };

    // 处理网络错误（比如断网、域名无法访问）
    ourRequest.onerror = function() {
        titleElement.textContent = "网络请求出错，请检查网络连接";
    };

    // 发送请求——这步你之前漏掉了！
    ourRequest.send();
});
</script>
</body>

关键修改点说明 #

• 脚本位置调整：把<script>移到<body>末尾，确保DOM元素已被浏览器创建，能正常获取到按钮和输入框。
• 补充send()调用：这是发起XMLHttpRequest请求的必要步骤，没这一步请求根本发不出去。
• 增加输入校验：避免用户空输入就发送请求，提升用户体验。
• try...catch包裹JSON解析：IE11对无效JSON的容错性很低，用try...catch可以防止页面直接崩溃。
• 数据结构校验：检查返回的ourData是否包含预期的data数组，避免访问不存在的属性导致报错。
• 错误处理完善：增加了HTTP状态码错误和网络错误的处理，让用户能明确知道问题出在哪。

IE11兼容额外注意事项 #

• IE11支持XMLHttpRequest和addEventListener，但要避免使用ES6+语法（比如箭头函数、let/const），你用var的写法是对的。
• 确保API返回的响应头包含Content-Type: application/json，否则IE11可能无法正确解析JSON数据。
• textContent在IE11中是支持的，不需要换成innerText（那是更老IE版本的需求）。

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