Updated April 12, 2023
Definition of jQuery JSONP
There is always a need when we want to send data over the network, when we are building any web application so there is always a requirement we have JSONP object to send over the network, so jsonp provide us a way to send json data over the network or in a different domain without facing any cross access origin issue. Jsonp uses script tag ‘<script>’ to send data and avoid the cross-origin issue instead of using XMLHttpRequest. But jsonp is not always good with the security of the data. In the coming section, we will be discussing more the Jsonp in jQuery.
Syntax and parameters:
Jquery jsonp uses ajax calls to avoid the cross-origin issue. Let’s see its syntax and parameter what does it take to make this call and avoid this problem see below;
var variable_name = $("<script />", {
url: our url goes here ",
datatype: "application/json"
}
);This takes two parameters as the input while handling data on the different domains. which are described as below for better understanding see below;
1) url: This parameter is used to give the URL of our JSON file. This file will contain the JSON and we will inject it into the page.
2) datatype: This parameter is used to set the type. Here we are setting ‘application/JSON’ as the type of the file. This is also referred to as the content of the file.
How JSONP works in jQuery?
As of now, we know that jsonp is used to handle the JSON over the network. Also when we are building any web application so we need data that is coming from the back end or different services that are from a different domain. SO whenever we are trying to make this call from frontend to backend we will receive a cross-origin issue in the console. We can fix this issue at the backend side Lao but for this, we need to enable the cross-origin for every type of request we receive from the front end whether it gets, post, put or delete without this we can receive our data from backend services. So in jQuery, we have jsonp which is responsible to handle this at the frontend level only. JsonP uses a script tag to perform this instead of XMLHttpRequest. Also, it stands for JSON with padding, while using this we need to pass the source and type using the ‘script’ tag. Let’s understand the concept of jsonp in more detail see below;
1) Suppose we are working on a web application where we have some dependency for data on the remote websites, but these endpoints or API have some standards which define some type of request and return us the response back. But these remote service calls and our applications have the different domain not same because ajax call have some security constraint due to this we cannot make a request to the different domain, if we try to do this we will receive one exception or error saying this ;
cannot load http://external-domain/service. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://my-domain’ is therefore not allowed access.
Above you can see the error as per the jquery doc, we can avoid this issue by using two approaches one is to do configuration in the backend and another one is to handle this in the frontend. We will see how we can handle this on the frontend by using jsonp in jquery. Also, we can see the same origin of the two URLs if they are identical, to check this we have three components of the URL i.e.; port, hostname, and protocol. If this component of the URL matches then it is said to be same-origin otherwise they are of different origin and need to be handled.
You might be wondering when we have different origins and still we are able to access the origin but how? This is because at the backend service we have made the configuration for all type of request to be ‘*’ so that’s why we are not getting any error even if we are not using the jsonp, let’s say in angular we are making a call even if we are not using jsonp because we have handled it differently. So we always recommended handling this at another service only because jsonp have some security issues.
Let’s see one sample example for beginners to see how it works see below;
e.g. :
$.ajax({
url: "our_url",
jsonp: "callback",
dataType: "jsonp",
success: function( data ) {
console.log( data );
}
});In the above code snippet, we are using an ajax call and inside this, we are mentioning every detail for the successful completion. First, we have to give the path of the JSON data, it can be a call back URL as well. Secondly, we are mentioning the ‘jsonp’ parameter that we are expecting. After this, we are receiving a response from the callback function as data and we are just printing this to console. This is a simple process to implement jsonp in jquery.
Example
1) In this example we are using JSONP to request a cross-origin domain in JQuery to get the data. For instance, we are using a callback URL from git hub to make this example work. This is a sample example for beginners to understand the jsonp concept in JQuery.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h2 style="color:#069">Demo for JSONP in JQuery !!</h2>
<div style="color:red">Using a sample API form GITHUB for data </div>
<br/><br/>
<script>
$.getJSON("https://api.github.com/users/jeresig?callback=?",
//Here we have a sample link form git hub which can be sued to get the json data for now to make this example working
function(data){
console.log("Here we are calling a sample json API to get the data from the cross origin 'means different domain::'")
console.log("Result is ::")
console.log(data);
});
</script>
</body>
</html>Output:
HTML Output:
Console Output:
Conclusion
By using jsonp we can deal with the cross-origin issue at the frontend level only with very ease. We can handle this at the backend also which is always recommended to use because of the security constraint. But this is an easy way to implement this by specifying some of the parameters in the call back function itself easy to use and understand.
Recommended Articles
This is a guide to jQuery JSONP. Here we discuss the Definition, syntax, How JSONP works in jQuery, and examples with code implementation. You may also have a look at the following articles to learn more –
