JSONP (JSON with Padding) in JavaScript

What is JSONP?

• JSONP is a technique used to overcome the Same-Origin Policy in web browsers.

• Same-Origin Policy restricts making AJAX requests to a different domain.

• JSONP allows requesting data from a server in a different domain by using <script> tags.

How Does JSONP Work?

• Instead of making an AJAX call, you add a <script> tag with a URL that returns JSON data wrapped inside a function call.

• The function is defined on your page and acts as a callback.

• When the script loads, the callback executes with the data.

JSONP Request Example

Server returns JSONP response like:

callbackFunction({  "name": "John",  "age": 30});

Client-side code:

<script>  // Define callback function to process the data  function callbackFunction(data) {    console.log("Name:", data.name);    console.log("Age:", data.age);  }  // Dynamically create a script tag to request JSONP data  const script = document.createElement('script');  script.src = 'https://example.com/jsonp?callback=callbackFunction';  document.body.appendChild(script);</script>

Key Points

• JSONP only supports GET requests.

• It requires server support: server must wrap the JSON data in the callback function.

• Used before CORS (Cross-Origin Resource Sharing) became widely supported.

When to Use JSONP?

• When you need to get data from another domain but CORS is not enabled.

• When working with older APIs that support JSONP.

If you want, I can help you create a working JSONP example or explain how it compares to CORS!