What classifies data as JSONP and how can I get it with plain javascript?

Question

So I've recently learned how to do an AJAX call and know that I need to use JSONP when working with APIs from outside servers. As I learned from sitepoint, it was pointed out that the difference of JSONP is that it is wrapped in a function making it accessible through a script tag.

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

Although what I don't understand is the Flickr API for JSONP.

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

It seems to return XML data instead. What confuses me even more is that this type of xml is accepted by jQuery's $.getJSON() while it's original api also in xml causes the same origin policy error. The main difference I could find between them are a few href changes.

So what makes the XML of flickr JSONP and how can I make an ajax call with it in plain javascript?

Any feedback on this will be greatly appreciated : )

Update for clarity:

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

Link: https://jsfiddle.net/Jonathan002/05ao4d87/

I was taught that this is only made possible by JSONP in treehouse. https://teamtreehouse.com/library/ajax-basics/ajax-and-apis/displaying-the-photos. If I am not using JSONP to accomplish this task, what is allowing me to circumvent the same origin policy?

Answer 1

The link you've said returns JSONP doesn't, it returns XML. The flickr documentation tells us you need format=json in the URL; you also want to fill in something where the ? is so you name the callback function (although if you use jQuery, it will do that for you). For instance: https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=callbackName

Note: They call it JSON, but it isn't. It's JSONP. JSON and JSONP are different things. The bit inside the call to the callback is valid JSON, though (not all JSONP responses are).

Here's an example of JSON:

{"foo": "bar"}

Here's an example of JSONP using valid JSON within the callback:

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

Here's an example of JSONP using invalid JSON within the callback (but it works, because JSONP and JSON are different things):

callbackName({foo: "bar"})

how can I get it with plain javascript?

The jQuery documentation for $.ajax describes how to do JSON calls with jQuery. In this case:

$.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>

Note that since flickr are using a non-standard name for the parameter that controls the name of the callback, you need the jsonp option telling jQuery what parameter name to use.