json - jquery:Ajax Json简单渲染

Question

我正在尝试使用移动设备使用 jQuery 1.6.4 来获取简单的 json feed 并将其显示为学习练习。但我无法在 getJSON 中触发回调。 json feed 是开放且公开的，所以这很好。这可能是 jQuery 1.6.4 + 移动问题吗？

    $.getJSON('https://raw.github.com/currencybot/open-exchange-rates/master/latest.json', 
      function (data) {
        var items = [];

        $.each(data, function (key, val) {
            items.push('<li id="' + key + '">' + val + '</li>');
        });

        $('<ul/>', {
            'class': 'my-new-list',
            html: items.join('')
        }).appendTo('body');
    });

Answer 1

您无法对此 URL 执行 AJAX 请求，因为这会违反同源策略。请参阅http://e-mats.org/2010/01/jquery-getjson-and-the-same-origin-policy/以获得解释。引用如下:

When creating a simple mash-up with data from external sources, you usually want to read the data in a suitable format – such as JSON. The tool for the job tends to be javascript, running in your favourite browser. The only problem is that requests made with XHR (XMLHttpRequest) has to follow the same origin policy, meaning that the request cannot be made for a resource living on another host than the host serving the original request.

To get around this clients usually use JSONP – or a simple modification of the usual JSON output. The data is still JSON, but the output also includes a simple callback at the end of the request, triggering a javascript in the local browser. This way the creator of the data actually tells the browser (in so many hacky ways) that it’s OK, I’ve actually thought this through. Help yourself.

基本上，常规 AJAX 使用 XMLHtmlRequest，它具有相同域的安全策略。另一方面，JSONP 插入一个运行回调函数的脚本标签(没有同域来源策略)。但终端服务器必须支持这一点，因为它负责实际生成带有回调函数的脚本。

如果服务器支持 JSONP，您可以通过在使用 getJSON 调用的 URL 中的请求参数中添加 callback=? 来实现此目的。但此端点似乎不支持 JSONP(添加 callback=? 不会执行任何操作)。

因此，您可能必须在服务器上创建代理端点才能访问此数据。基本上，在您自己的服务器上创建一个端点，使用任何有意义的方法(curl 等)加载该数据并按原样返回它。然后你就可以使用常规的AJAX来调用你自己的服务器端点(同服务器=不违反同源策略)。