跨域同步AJAX请求

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。到目前为止，我查看了访问“拒绝受限制的URI”代码：“ 1012-跨域Ajax请求和访问受限制的URI拒绝代码” ：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”请求不支持同步操作。

在这里查看文档。