Question

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

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

虽然我不了解的是JSONP的Flickr API。

Flickr API Link 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 documentation告诉我们您需要在网址中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获取它？

jQuery documentation for $.ajax描述了如何使用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要使用的参数名称。

什么将数据分类为JSONP，如何使用普通的javascript获取它？

1 个答案: