Javascript：无法从本地主机加载 JSON 文件

Question

我目前正在阅读“Head first HTML5 programming”一书。我想从我自己机器上的 Web 服务器加载名为 sales.json 的文件的内容。我为此使用了 wampserver。

在文件夹wamp/www/gumball/ 中，我放置了所有相关的.html、.js 和.css 文件，以及sales.json 文件。

我的 JavaScript 代码很简单：

window.onload = function() {
    var url = "http://localhost/gumball/sales.json";
    var request = new XMLHttpRequest();
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            updateSales(request.responseText);
        }
    };
    request.send(null);
}

function updateSales(responseText) {
    var salesDiv = document.getElementById("sales");
    salesDiv.innerHTML = responseText;
}

这没有任何作用！在我的浏览器中输入链接：http://localhost/gumball/sales.json 会打开正确的文件，因此链接应该是正确的。即使使用本书附带的.js 文件（以及我正在尝试制作的应用程序的完成版本），也没有加载任何内容。

使用警报语句进行测试告诉我request.onload 事件永远不会发生。我不知道为什么会这样。

一个我还不太明白的事实：当我在浏览器中输入：http://localhost/gumball/sales.json:（我在链接末尾添加了一个冒号）时，我收到了 403 Forbidden 错误！为什么会这样？这跟我的问题有关系吗？

Answer 1

我用firefox打开html文档

您的 HTML 文档必须使用http:// 中的 URL 而不是 file:// 打开，如果您希望它能够在 javascript 中打开另一个文档，除非第二个文档使用相关的CORS headers 提供。

这是由于same origin policy。

由于您有本地 WAMP 服务器，所以没有问题：只需使用 http:// URL 打开您的文件，就像您打开 JSON 文件一样。