Question

假设以下目录结构：

/web
    example.html
    example.js
/example.json

我用浏览器打开example.html并运行example.js，尝试使用以下调用同步加载example.json中的数据：

$.ajax({url: "file:///example.json",
        dataType: "json",
        async: false,
        success: function(data) {
            console.log(data)
        },
        error: function(request, status, error) {
            console.log(request);
            console.log(status);
            console.log(error);
        }
});

这会导致错误消息“访问受限制的URI被拒绝”和错误代码1012.到目前为止，我已经查看了Access to restricted URI denied“ code: ”1012 - Cross domain Ajax request和Access to restricted URI denied code: 1012。第一个链接建议我使用jQuery的getJSON方法，但此方法只能异步工作。第二个链接提示某种JSONP回调，但我无法理解这些是如何工作的。

请注意，如果我将example.json移动到/web/example.json，这个问题很容易消失，但我想避免这种情况，因为我的实际问题存在一些情况（我在这里介绍的是我实际的简化）问题）。

编辑：我正在尝试这个JSONP代码，但我仍遇到同样的错误：

$.ajax({url: "file:///example.json",
    dataType: "jsonp",
    success: function(data) {
        console.log(data)
    },
    error: function(request, status, error) {
        console.log(request);
        console.log(status);
        console.log(error);
    }
});

Answer 1

默认情况下，不允许跨域AJAX请求。您需要使用CORS从其他服务器获得权限，或者您可以使用JSONP。

Answer 2

您使用同步ajax的原因是错误的。如果您想等到所有ajax请求完成，请使用以下方法。

var ajaxRequest1 = $.ajax();
var ajaxRequest2 = $.ajax();
var ajaxRequest3 = $.ajax();
$.when(ajaxRequest1, ajaxRequest2, ajaxRequest3).done(function(){});

这比在循环内执行一系列同步ajax请求更有效/更快。

Answer 3

跨域请求和dataType：“jsonp”请求不支持同步操作。

Look at documentation here.

同步跨域AJAX请求

3 个答案: