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

Question

我目前正在阅读“最先实现HTML5编程”一书。我想sales.json在自己的机器上加载从Web服务器命名的文件的内容。我为此使用了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文件必须与一个URL打开http://，不file://，如果你希望它能够在JavaScript中打开另一个文件，除非第二份文件送达相关CORS标头。

这是由于相同的原产地政策。

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