什么将数据归类为JSONP?如何使用纯javascript获取数据

Question

所以我最近学会了如何进行AJAX调用，并且知道在使用外部服务器的API时需要使用JSONP。正如我从sitepoint学到的，有人指出，JSONP的不同之处在于它被封装在一个函数中，使其可以通过脚本标记访问。

SitePoint链接：https://www.sitepoint.com/jsonp-examples/E.ghttp://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json

虽然我不明白的是用于JSONP的Flickr API。

Flickr API链接JSONP:https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?Flickr API链接XML:https://api.flickr.com/services/feeds/photos_public.gne?

它似乎返回了XML数据。更让我困惑的是，jQuery的$.getJSON()接受了这种类型的xml，而它在xml中的原始api也会导致同源策略错误。我能发现它们之间的主要区别是一些href更改。

那么，是什么构成了flickr JSONP的XML，我如何用纯javascript对其进行ajax调用呢？

对此的任何反馈都将不胜感激：)

清晰更新：

Here I have working code using the flickr XML that does an ajax call with jQuery. 

链接：https://jsfiddle.net/Jonathan002/05ao4d87/

我被教导只有在树屋的JSONP才能做到这一点。https://teamtreehouse.com/library/ajax-basics/ajax-and-apis/displaying-the-photos.如果我没有使用JSONP来完成这项任务，是什么让我绕过同源策略？

Answer 1

您所说的链接返回的不是JSONP，而是XML。flickr文档告诉我们您需要URL中的format=json；您还需要填写?所在的内容，以便命名回调函数(尽管如果您使用jQuery，它会为您命名)。例如：https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=callbackName

注意：他们称之为JSON，但事实并非如此。这是JSONP。JSON和JSONP是不同的东西。不过，回调调用中的位是有效的JSON(并非所有JSONP响应都是)。

下面是一个JSON示例：

{"foo": "bar"}

以下是JSONP在回调中使用有效JSON的示例：

callbackName({"foo": "bar"})

以下是JSONP在回调中使用无效JSON的示例(但它有效，因为JSONP和JSON是不同的东西)：

callbackName({foo: "bar"})

如何使用纯javascript获得它？

$.ajax的jQuery文档描述了如何使用jQuery进行JSON调用。在这种情况下：

$.ajax({
url: "https://api.flickr.com/services/feeds/photos_public.gne?format=json",
dataType: "jsonp",
jsonp: "jsoncallback",
success: function(data) {
// Use the data here
console.log("The title is: " + data.title);
},
error: function() {
// Handle error here
console.log("Error loading the data");
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

请注意，由于flickr为控制回调名称的参数使用了非标准名称，因此需要jsonp选项来告诉jQuery要使用哪个参数名称。