JSONP

Intermediate
5 min read
Updated: Nov 2026
3 examples
JSONP tutorial — JSON with Padding callback and script tag
Definition

Definition and Usage

JSONP means JSON with Padding. A server wraps normal JSON in a JavaScript function call so a <script> tag can load it from another site.

Browsers allow cross-origin scripts, but not cross-origin fetch / XHR without CORS. JSONP used that script loophole before CORS was common. Today it is legacy—learn it to read old APIs, then prefer plain JSON with CORS.

Quick rule.

New APIs → JSON + CORS + fetch. Old callback APIs → JSONP. Never treat a JSONP response as something JSON.parse can eat whole.

Flow

How It Works

  1. Define a global callback, e.g. handleData.
  2. Inject a <script> whose src includes ?callback=handleData.
  3. The server returns padded JavaScript: handleData({…}).
  4. The browser runs that script; your callback receives the object.
Compare

JSON vs JSONP

The data inside can be the same. The wrapper decides whether JSON.parse works.

Plain JSON
JSON
{
  "name": "Ada",
  "id": 1
}

Valid for JSON.parse and for JSON Schema validation of the document.

JSONP (padded)
JavaScript
handleData({
  "name": "Ada",
  "id": 1
});

Not JSON text. It is a function call. JSON.parse throws.

Modern

Prefer CORS + JSON

  • GET only Script tags cannot POST / PUT / DELETE.
  • No headers You cannot send Authorization or custom headers on a script load.
  • Runs as code Trust the host completely—or do not use JSONP.
  • CORS + fetch Server sends JSON; browser reads data, not executable padding.
JSON
// Preferred today (when the API allows CORS)
const res = await fetch("https://api.example.com/user");
const data = await res.json(); // plain JSON
console.log(data.name);
Code

Examples

Use View Output for a quick result, or Try It Yourself to edit and run in the browser.

Example 1 — Callback Padding

What the server “pads” around the JSON—your function runs with the object.

JSON
function handleData(data) {
  console.log(data.name);
  console.log(data.id);
}

// Simulated JSONP response from the server:
handleData({ name: "Ada", id: 1 });
Try It Yourself

How It Works

  1. You register handleData first.
  2. The padded response calls that name with a JSON-like object.
  3. Inside the callback you use normal property access.

Example 2 — Script-Tag Pattern

Inject a script whose body is padded JSON—same idea as a remote ?callback= URL.

JSON
window.handleData = function (data) {
  document.getElementById("out").textContent =
    data.name + " / " + data.id;
};

const padded = 'handleData({"name":"Ada","id":1});';
const blob = new Blob([padded], { type: "text/javascript" });
const script = document.createElement("script");
script.src = URL.createObjectURL(blob);
document.body.appendChild(script);
Try It Yourself

How It Works

  1. Expose the callback on window.
  2. Load a script that contains the padded call.
  3. When it runs, the callback fills the page with data.

Example 3 — JSON.parse vs Padding

Plain JSON parses; padded text does not—because JSONP is JavaScript, not JSON.

JSON
const jsonText = '{"name":"Ada","id":1}';
const jsonpText = 'handleData({"name":"Ada","id":1});';

console.log(JSON.parse(jsonText).name);

try {
  JSON.parse(jsonpText);
} catch (err) {
  console.log(err.name + ": not plain JSON");
}
Try It Yourself

How It Works

  1. Strict JSON is data only—no function names.
  2. Padding adds handleData(…);, which breaks JSON.parse.
  3. JSONP delivers data by running script, not by parsing JSON text.

Frequently Asked Questions

JSON with Padding. The server wraps a JSON value in a JavaScript function call so a <script> tag can load it from another origin.
No for new work. Use CORS with fetch (or XMLHttpRequest) and plain JSON. Learn JSONP mainly for legacy APIs.
The browser runs the remote response as script on your page. A bad or compromised endpoint can run any JavaScript. Only use trusted hosts.
No. Padding turns the text into JavaScript (a function call), not strict JSON. JSON.parse throws unless you strip the padding yourself—which is not how JSONP is meant to work.

Back to JSON

Review the full JSON tutorial hub.

JSON introduction →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JSON.stringify() JSON Introduction