技术咨询：使用AJAX发送POST数据及IE浏览器适配问题

咱们先聊聊你这段AJAX发送POST数据的代码，以及IE浏览器下的适配要点：

一、现有代码的潜在问题 #

你的代码能实现基础的POST请求，但有几个容易踩坑的地方：

• 缺少请求头设置：发送表单格式的数据时，需要设置Content-Type为application/x-www-form-urlencoded，否则部分后端框架可能无法正确解析你的请求参数
• 表单数据获取不够健壮：getElementsByTagName('input')[0]完全依赖DOM结构顺序，一旦表单里新增或调整input位置，代码就会出错，建议通过input的name属性来获取值
• 成功判断不严谨：load事件只代表请求完成，但不代表请求成功（比如返回404、500状态码），需要额外判断响应状态码
• 事件绑定兼容性不足：IE8及以下不支持addEventListener，需要做兼容处理

二、IE浏览器适配方案 #

IE不同版本对AJAX的支持差异较大，分情况处理：

1. IE8及以上版本 #

• 支持XMLHttpRequest，但事件绑定需要改用attachEvent（对应事件名要加on前缀，比如onload、onerror）
• 部分场景下可能出现请求缓存问题，可以通过添加请求头Cache-Control: no-cache来避免

2. IE6/7版本 #

• 不支持标准的XMLHttpRequest，需要使用ActiveXObject创建请求对象，常见的ActiveX组件有Microsoft.XMLHTTP和Msxml2.XMLHTTP，需要做兼容性判断
• 仅支持onreadystatechange事件，无法使用load、error这类现代事件，需要通过监听readyState变化来处理响应

三、优化后的兼容代码示例 #

const form = document.getElementById('form');
// 兼容IE的事件绑定方法
function addEvent(element, event, handler) {
    if (element.addEventListener) {
        element.addEventListener(event, handler);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, handler);
    } else {
        element['on' + event] = handler;
    }
}

function SendData(e) {
    e = e || window.event;
    // 兼容IE的阻止默认行为
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }

    // 更健壮的表单数据获取方式（假设input的name为"targetInput"）
    const input = form.elements['targetInput'];
    if (!input) return;
    const data = input.value.trim();
    if (!data) return;

    // 创建兼容IE的XHR对象
    let xhr;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        // 兼容IE6/7
        try {
            xhr = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e2) {
            try {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e3) {
                alert('当前浏览器不支持AJAX，请升级浏览器');
                return;
            }
        }
    }

    // 监听请求状态变化（兼容所有IE版本）
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            // 判断请求是否成功
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log(xhr.responseText);
            } else {
                console.log('请求失败，状态码：' + xhr.status + '，信息：' + xhr.statusText);
            }
        }
    };

    xhr.open('POST', '/db', true);
    // 设置表单格式的请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 禁用缓存（针对IE）
    xhr.setRequestHeader('Cache-Control', 'no-cache');
    xhr.send('data=' + encodeURIComponent(data)); // 对数据编码，避免特殊字符问题
}

addEvent(form, 'submit', SendData);

额外提示 #

• 对发送的数据使用encodeURIComponent编码，避免特殊字符（比如&、空格等）导致参数解析错误
• 如果你的项目允许引入第三方库，使用axios、jQuery.ajax这类封装好的库可以省去大量兼容代码，它们已经处理了IE的适配问题

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