What is JSONP and why is it used in website development? JSONP examples in the jQuery Javascript library.
The use of APIs in the world of web development is increasingly widespread and the JSON format has become popular as an information exchange format. It is light and compatible with most systems where you can get to consume it.
In the world of the web and with respect to client-side programming, it is common that we want to query data that comes from to make rich applications. Those data may be hosted on our server or on remote servers, in which case there may be some security restrictions. To avoid this, you may have heard of JSONP on occasion. In this article we want to delve into the subject and tell you about some differences between JSON and JSONP, as well as the reasons and ways of using JSONP.
Security issues with JSON
Perhaps you have noticed that, on certain occasions, it is not possible to make an Ajax call through different domains to get us some data. This is a limitation in client-side web programming and is due to a browser security restriction.
The cause of this problem is a policy called , which is designed to prevent potentially insecure data from being loaded via Javascript, because it is on other servers. In other words, the data that we bring from Ajax by connecting to our own domain is considered safe, but those from other Internet domains are not.
This restriction can be bypassed if the domain you connect to is configured to accept connections from other domains. This is achieved by turning on the setting, but it can also be fixed, independent of the server’s configuration, through the use of JSONP.
How is JSONP
JSON and JSONP are basically the same thing, a lightweight format for exchanging data with Javascript object notation. The notation doesn’t differ at all between JSON and JSONP, but the “wrapping” does. In JSONP, instead of just traveling the data as in JSON, what travels is a function generally called “callback”. This function is like a Javascript, which includes the data that we have requested. Hence, JSONP is sometimes known as JSON with padding.
Note: We don’t talk much about JSON because it has been the subject of several articles. For reference you can consult the article.
For example, look at the source code you receive when you access this URL:
You will see that what you receive is something like this:
myfunction({ “data”: “del”, “json”: “with JSONP” })
Why JSON I can’t access it and JSONP yes
You may wonder: If we have said that due to the restriction of the “Same-origin policy” browsers, data residing on external servers cannot be accessed. Why can I access JSONP data and not normal JSON?
They really are the same, just change that wrapper of the function in JSONP a bit. What is the magic?
To make JSONP possible in cross-domain situations, an allowed alternative of loading scripts in a page is used. As you know, the browser does accept the load of Javascript code that you bring with the SCRIPT tag and the src attribute from another domain. It is the basis of CDN services.
Because that doesn’t cause any security issues, JSONP takes advantage of it to access the requested resource that way, injecting that script into the page and executing its code to extract the data.
Note: Note that if you received a normal JSON you would not be able to execute it as is. The JSON is an object literal and not a Javascript statement that the browser is capable of executing, so you couldn’t put it as is in a SCRIPT tag on the page.
How to process a JSONP to extract the data
Fortunately our preferred Javascript library should be able to extract that data for us, in a semi-transparent way. Generally we will only have to warn that you are going to receive the data in JSONP instead of traditional JSON.
Logically the way we will do this depends on the construction of your library. Now let’s look at some code examples. You will see that it is quite simple.
JSONP in jQuery
To tell jQuery that the response data arrives in JSONP we use the “dataType” configuration variable, assigning the value “jsonp”.
This code won’t require much explaining if you’re familiar with working with Ajax in jQuery. Check the for eventual Ajax queries.
$.ajax({ url: “http://api.openbeerdatabase.com/v1/beers.json”, data: { query: “beer” }, type: “GET”, dataType: “jsonp”, success: function (response){ console.log(“You get: “, response); $(“
").text(JSON.stringify(response)).appendTo("body"); } });
What I want you to see is that in the success() function the "response" parameter has a native Javascript object, which is the result of the received JSONP string converted to its corresponding object.
With console.log() you dump that data into the Javascript console. With the PRE tag created on the fly and the JSON.stringify() method I get that object converted to a string literal, so I can dump it as text on the page and view it without the console. Generally, in your program you will do something different with your object, that already depends on your application and the objective of the data that you have just received. The interesting thing here is that jQuery is in charge of transforming the JSONP into an object that can be manipulated by Javascript code.
It's all for now. I hope you have solved your doubts and it is not a problem for you to access any API that returns data with JSONP.
Facebook Comments
Disqus