我在XMLHttpRequest中缺少什么？

Posted 2021-04-06

我是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的警报。我已经阅读了大量关于此的网页，我不知道我错过了什么。我将不胜感激，谢谢！

答案

你遇到了Same Origin Policy。

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

此外，虽然目前这不会给你带来麻烦，但这种做法很糟糕并且可能导致竞争条件，你在整个地方使用全局变量。

将xhr变量设为函数的本地变量

var xhr = new XMLHttpRequest();

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

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

另一答案

以下来自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的代理服务。

另一答案

除了相同的原始政策问题，你的alert是一个不合逻辑的地方。当您使用XMLHttpRequest时，只要xhr.onreadystatechange发生更改，就会调用分配给readyState的函数。 readyState应该（理论上）从0（初始化）变为1（发送）到2（加载）到3（交互）到4（完成）。

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

理想情况下，你应该将alert移动到if块内，这样它就可以让你知道它何时完成。