我在 XMLHttpRequest 中缺少啥？

Posted 2023-02-27

【中文标题】我在 XMLHttpRequest 中缺少啥？

【英文标题】：What am I missing in the XMLHttpRequest?我在 XMLHttpRequest 中缺少什么？

【发布时间】：2011-01-29 18:54:39

【问题描述】：

我对 javascript 和 ajax 世界完全陌生，但正在努力学习。

现在我正在测试 XMLHttpRequest，即使是最简单的示例也无法正常工作。这是我要运行的代码

    <script type="text/javascript">
        function test() 
            xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function() 
                if (xhr.readyState == 4 && xhr.status == 200)
                    var container = document.getElementById('line');
                    container.innerhtml = xhr.responseText;
                 else 
                    alert(xhr.status);
                
              

            xhr.open('GET', 'http://www.google.com', true);                  
            xhr.send(null); 
        
    </script>

而且我总是收到状态为 0 的警报。我已经阅读了大量关于此的网站，但我不知道我错过了什么。我将不胜感激，谢谢！

【参考方案1】：

您遇到了Same Origin Policy。

除非您的代码实际上在 www.google.com 上运行（这不太可能），否则这会出错。

此外，虽然目前这不会给您带来问题，但这是一种糟糕的做法，并且可能会导致竞争条件，您正在到处使用全局变量。

将 xhr 变量设为函数的局部变量

var xhr = new XMLHttpRequest();

并在onreadstatechange 方法中使用this 引用它。

if (this.readyState == 4 && this.status == 200)
// etc etc

【参考方案2】：

来自David's answer:

您必须使用相对路径才能保持同源策略。否则大多数浏览器只会返回一个空的responseText 和status == 0。

作为一种可能的解决方法，您可以设置一个非常简单的reverse proxy（如果您使用的是 Apache，则使用mod_proxy）。这将允许您在 AJAX 请求中使用相对路径，而 HTTP 服务器将充当任何“远程”位置的代理。

在 mod_proxy 中设置反向代理的基本配置指令是 ProxyPass。您通常会按如下方式使用它：

ProxyPass     /ajax/     http://google.com/

在这种情况下，浏览器将请求/ajax/search?q=stack+overflow，但服务器将通过充当http://google.com/search?q=stack+overflow 的代理来提供此服务。

【参考方案3】：

除了同源策略问题之外，您的alert 处于不合逻辑的位置。当您使用 XMLHttpRequest 时，分配给 xhr.onreadystatechange 的函数将在 readyState 更改时被调用。 readyState 应该（理论上）从 0（初始化）到 1（发送）到 2（加载）到 3（交互）到 4（完成）。

您的代码所做的是检查 readyState 并查看请求是否完成 (if (xhr.readyState == 4))，如果没有完成，则检查 alert HTTP status code。由于请求尚未发送（或刚刚发送），因此应该还没有 HTTP 状态。

理想情况下，您应该将alert 移动到if 块内，以便它在完成时通知您。