Program to Load JSONP Data Using JavaScript

In this tutorial, we will learn how to load JSONP (JSON with Padding) data using JavaScript. JSONP allows us to fetch data from a different domain that follows the same-origin policy. We will use JavaScript to dynamically create a script element, assign a source URL with a callback function, and append it to the HTML body. The provided code snippet demonstrates how to implement JSONP and display the fetched data on a webpage.

Code

<script>
let s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s);

function myDisplayFunction(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

Code Explanation

The code starts by declaring a script element using the document.createElement method.

javascript
let s = document.createElement("script");

Next, we assign the source URL for the JSONP request to the src property of the script element.

javascript
s.src = "demo_jsonp2.php?callback=myDisplayFunction";

The URL includes the callback parameter with the value set to myDisplayFunction, which is the name of the callback function that will handle the retrieved data.

After setting the source URL, we append the script element to the HTML body using the appendChild method.

javascript
document.body.appendChild(s);

Then we define the callback function, myDisplayFunction, which takes the retrieved object (in this case, myObj) as a parameter. Inside the function, we access the element with the id “demo” using getElementById and set its innerHTML property to the value of myObj.name.

javascript
function myDisplayFunction(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}

This will update the content of the HTML element with the id “demo” to display the name property of the retrieved object.

To use this code snippet, you need to have a JSONP endpoint (demo_jsonp2.php in this case) that returns the data in the format myDisplayFunction(). The callback function name (myDisplayFunction) should match the one specified in the src URL.

By implementing this code snippet, you will be able to load JSONP data and display it on your webpage. Remember to replace the source URL and callback function name with the appropriate values for your specific use case.

Conclusion

In this tutorial, we have learned how to load JSONP data using JavaScript. JSONP allows us to bypass the same-origin policy and fetch data from different domains. We used JavaScript to dynamically create a script element, set its source URL with a callback function, and appended it to the HTML body. The provided code snippet demonstrates the implementation of JSONP and how to display the fetched data on a webpage. By following this tutorial, you can integrate JSONP into your web applications and access data from external sources.

Also checkout the following codes.

How to Use localStorage in JavaScript
How to Use the familyPack() Function in JavaScript