Use jsonp from javascript code

Question

I'm studying javascript and json and I need to get my json files from another server. I've done some javascript tests working with local json files but now I'd like to convert all my code to jsonp because I need to work on files that are on another domain. My code is:

function jsonEntity()
{
 var richiestaEntity = new XMLHttpRequest();

richiestaEntity.onreadystatechange = function()
{
    if(richiestaEntity.readyState == 4) 
{
        var objectentityjson = {};
        window.arrayEntity= []; //creazione dell'array che conterrà le entity
        objectentityjson = JSON.parse(richiestaEntity.responseText);

        arrayEntita = objectentityjson.cards;

    return arrayEntita;
    }
}
richiestaEntity.open("GET", "myjson.json", true);
richiestaEntity.send(null);
}

How can I work with jsonp instead of local json without loosing the structure of my code?

`JSONP` is a hack using the fact that one can execute scripts that are in another domain. You simply create a script element and set its `src` and that's it. You can't do it with `XHR`. See http://en.wikipedia.org/wiki/JSONP#How_it_works — Esailija, Jun 26 '12 at 09:19

score 4 · Answer 1 · edited May 23 '17 at 12:09

JSONP and JSON work fundamentally differently behind the scenes. For more details, see my other Stack Overflow answer.

Because of how JSONP works, you need the cooperation of the server to wrap the JSON response in a function invocation (the name of which is usually specified by a callback GET parameter);

/get_jsonp.php?callback=foo

(Should) get:

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

... in the response.

Assuming you've got that cooperation, you can change your existing function as follows;

function jsonEntity()
{
   var callbackName = "ajaxCallback";
   var script = document.createElement("script");

   // This bit needs the cooperation of the server, 
   // otherwise `ajaxCallback` won't be called.
   script.src = "myjson.json?callback=" + callbackName;

   window[callbackName] = function (obj) {
       window.arrayEntity = obj.cards;
   }

   document.body.appendChild(script);
}

score 1 · Answer 2 · answered Jun 26 '12 at 09:24

JSONP works differently from JSON.

With JSON you basically request a file from your server using XHR, parse it and work with the resulting object.

With JSONP you insert a <script> tag like when you are loading a lib from some other server. There are just some differences: In the URL you transmit an additional parameter, the callback function, and you define that function on your page.

This could look like the following. First we define our callback:

function myCallback( data ) {
  // do some stuff with data
}

then we insert dynamically a new <script> tag to retrieve the data.

<script src="path.to/remote/server.js?callback=myCallback" type="text/javascript"></script>

and we are finished.

The server now sends an answer of the form

myCallback( {"your": "answer", "is": "here" } );

which calls your callback function and inits your processing. See here, that instead of the usual JSON response, the server makes a function call to your callback with an object as parameter, which represents the JSON.

Note that the name of the parameter (in my example it was "callback") may differ from one service provider to the next. So look up the correct name, before using it.

Another thing to note is, that this only works for GET requests. You can not use this technique for POST requests.

Use jsonp from javascript code

2 Answers2