我编写了一段原生Ajax代码：

function buatajax(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } return null; }
function checkout() { var url = "index3.php"; url = url+"&sid="+Math.random(); ajaxku = buatajax(); ajaxku.onreadystatechange=checkoutisi; ajaxku.open("GET",url,true); ajaxku.send(null); }
function checkoutisi() { if(ajaxku.readyState == 4){ data = ajaxku.responseText; document.getElementById('isiecon').innerHTML = data; alert(data); } }

当前我在本地服务器环境下运行这段代码，alert弹出提示显示请求的URL未找到。由于我不理解jQuery Ajax的用法，想咨询如何排查该问题，并按自己的方式正确使用原生Ajax。

一、先搞定404（URL未找到）的核心问题 #

从你的代码和描述来看，问题大概率出在URL相关的细节上，按以下步骤逐一排查：

• 确认文件路径完全匹配：
  你请求的index3.php必须和当前调用checkout()的页面（比如index.html）在同一个目录下。如果index3.php在子文件夹（比如api/index3.php）或者上级目录，要把路径写对，比如./api/index3.php或者../index3.php。

• 修正URL参数拼接的低级错误：
  你现在写的是url = url+"&sid="+Math.random();，这里犯了一个关键错误——GET参数的开头应该是?而不是&！正确的写法是url = url + "?sid=" + Math.random();。如果用&开头，服务器会把&sid当成文件名的一部分，自然找不到对应的文件，这几乎就是你当前404的元凶。

• 用浏览器开发者工具锁定问题：
  按F12打开开发者工具，切换到「网络」标签，触发checkout()函数，查看请求的完整URL和状态码。如果是404，直接对比请求路径和你本地文件的实际路径，就能快速定位问题。

二、优化你的原生Ajax代码（更健壮、更安全） #

你的代码功能没问题，但有几个可以优化的点，比如避免全局变量、增加错误处理，让代码更可靠：

// 创建XHR对象的函数，简化写法并保留兼容性
function createAjax() {
    return window.XMLHttpRequest ? new XMLHttpRequest() : 
           window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : null;
}

function checkout() {
    var url = "index3.php";
    // 修正参数拼接：用?开头，多参数时再用&分隔
    url = url + "?sid=" + Math.random();
    // 用局部变量存储请求对象，避免污染全局作用域
    var ajaxku = createAjax();
    
    // 先判断浏览器是否支持Ajax
    if (!ajaxku) {
        alert("你的浏览器不支持Ajax功能，请升级浏览器！");
        return;
    }
    
    // 用匿名函数作为回调，避免依赖全局变量
    ajaxku.onreadystatechange = function() {
        if (ajaxku.readyState === 4) {
            // 不仅要判断请求完成，还要判断HTTP状态码是否成功（200-299区间）
            if (ajaxku.status >= 200 && ajaxku.status < 300) {
                var data = ajaxku.responseText;
                document.getElementById('isiecon').innerHTML = data;
                alert(data);
            } else {
                // 处理请求失败的情况，比如404、500服务器错误
                alert(`请求失败，状态码：${ajaxku.status}`);
            }
        }
    };
    
    ajaxku.open("GET", url, true);
    ajaxku.send(null);
}

三、额外的实用建议 #

• 避免全局变量：原来的ajaxku是全局变量，如果多次调用checkout()，会覆盖之前的请求对象，可能导致逻辑混乱，改成局部变量更安全。
• 必须判断HTTP状态码：readyState == 4只代表请求完成，但不代表成功。加上status的判断，能区分是请求成功、资源未找到（404）还是服务器内部错误（500）。
• 参数拼接要规范：GET参数必须以?开头，多个参数用&分隔，比如index3.php?id=1&sid=xxx，这样服务器才能正确解析这些参数。

内容的提问来源于stack exchange，提问作者Eric Anthony Wu