Simple example to retrieve jsonP data from website

Question

I've seen many examples for JSONP but I can't seem to get any to work for my website. It can generate a JSON code at some url but I can't retrieve it from a different domain. Can you please give me a working example of JSONP that can retrieve data from any JSON file (eg. www.w3schools.com/json/myTutorials.txt).

I may not fully understand, but I just need an explanation, at least, of why if I replace a url with the example above, no data is being pulled.

The example returns an array of objects so you can use code like: dta = json; len = dta.length; dta[1].display dta[1].url — , Jul 29 '15 at 02:25

score 0 · Answer 1 · answered Jul 29 '15 at 02:32

There's many answers out there pointing out the difference between JSON and JSONP. Your question ("...jsonP that can retrieve...") shows that you didn't fully understand the concept. JSONP is a format of answer, as is HTML, XML, JSON. And so the server that responds the request should be able to send it JSONP formatted.

jonjitsu · Accepted Answer · 2015-07-29T03:26:58.787

This is a modified version of the example in the jquery docs using Yahoos public APIs.

$.ajax({
    url: "https://query.yahooapis.com/v1/public/yql",
    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    // Tell YQL what we want and that we want JSON
    data: {
        q: "show tables",
        format: "json"
    },

    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});

Along with a jsbin: https://jsbin.com/tuketa/edit?js,output

The reason for the existence of JSONP is to get around the limitations of CORS rules. For security reasons your browser, in general, is only allowed to communicate to the server it loaded the page from. JSONP was created to get around this by giving the server a callback function with which to pad the JSON data, hence the P in JSONP.

As noted in the comments by jasonscript, it's not any server that can function with JSONP, it has to be configured be able to work with JSONP such as the Yahoo API in the example.

Should probably note that the server must be configured to support JSONP data or your request is not going to work — jasonscript, Jul 29 '15 at 03:23

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

from a different domain... from any json file... it's not possible. The server response it's actually a javascript that wraps a json object.

jsonP is a protocol. the requester (the javascript in the browser) can't request via XHR (ajax) outside the source server:port due the Same-Origin-Policy (SOP).

To bypass the SOP, JSONP born.

The client does not send a XHR request, instead adds a <script> tag to the DOM, with the src attribute pointing to the URL of the jsonP with a parameter (e.g. callback=foo) which tells the name of the local function who receives the JSON as parameter.

Then, the remote server -who understands JSONP- sends a javascript who calls the local function with the JSON as parameter.

Like this example:

Client javascript code:

function foo(data)
{
    // do stuff with JSON
}

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo'

document.getElementsByTagName('head')[0].appendChild(script);

(taken from here)

Server Response:

HTTP/1.1 200 OK
Content-Type: text/javascript

foo({ "key" : "value" });

So, the browser loads the script, calls foo with the json as parameter. Now, You have bypassed the SOP restrictions.

Simple example to retrieve jsonP data from website

3 Answers3

Client javascript code:

Server Response: