AJAX 的 JSONP 内部工作原理

Question

我理解 JSONP 背后的关键概念是 <script> 标签
是唯一绕过 javascript 同源策略的元素。所以使用这些标签我们可以加载伪装成js代码的第三方数据。

我不太明白JSONP是如何与AJAX结合使用的。

我最好的猜测是：

当在后台进行 AJAX 调用时，<script> tag 元素 实际上 在 [=30= 的确切时刻写入文档中] 必须提出请求，因此会立即评估其结果。

你能帮我解决这些问题并提供一个简单的例子吗？

谢谢

Answer 1

它的工作方式完全符合您的预期：

它在head中添加了一个异步script标签，并在调用回调函数后立即将其删除。

更新

仅供参考，我在上面的示例中使用了 JSONP flickr API：

setTimeout(function() {
  $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', {
      tags: 'jquery',
      tagmode: 'any',
      format: 'json'
    },
    function(data) {
      $.each(data.items, function(i, item) {
        $('<img />').attr('src', item.media.m).appendTo('#images');
      });
    });
}, 2000);

AJAX 的 JSONP 内部工作原理

JSONP inner workings with AJAX

javascript

ajax

json

jsonp