javascript - 如何在纯 JavaScript 和 AJAX 上访问本地 json 文件并加载包含内容的菜单？

Question

我有一些网页模板的示例结构:

    <div class="navbar">
        <a id="home" href="#"></a>
        <a id="about" href="#"></a>
        <a id="team" href="#"></a>
        <a id="contact" href="#"></a>
    </div>

    <div>
        <p id="content"></p>         
    </div>

和本地menu.json文件:

[
    {"value":"Home" , "content":"This is default Home Page"},
    {"value":"About" , "content":"This is default About Page"},
    {"value":"Team" , "content":"This is default Team Page"},
    {"value":"Contact" , "content":"This is default Contact Page"}
]

我只想使用 Ajax 请求动态加载菜单项，然后将内容加载到段落中。但问题是我无法访问 menu.json 文件。请帮助我，这是我的 js 文件:

function loadJSON() {
    var request;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    request.open('GET', 'menu.json');
    request.onreadystatechange = function() {
        if((request.readyState===4) && (request.status===200)) {
            var items = JSON.parse(request.responseText);
            console.log(items);
        }
    }
    request.send();
}

Answer 1

这可能适用于 mozilla FF，如果你想让这项工作尝试使用网络服务器，它将在所有浏览器中工作，这是由于跨浏览器策略安全性