AJAX - JSONP (JSON with Padding) for Legacy Cross-Domain Support

1. Why Was JSONP Needed?

In early web development, browsers strictly enforced the Same-Origin Policy:

JavaScript running on one domain could not make AJAX requests to another domain.
CORS did not exist at that time.

However, one thing was allowed:

<script> tags could load JavaScript from any domain.

JSONP was invented as a workaround using this rule.

2. What Is JSONP? (Simple Definition)

JSONP (JSON with Padding) is a technique where:

Data is sent from a server as JavaScript code
Wrapped inside a callback function
Loaded using a <script> tag instead of XMLHttpRequest

It is not true AJAX, but it achieves cross-domain data loading.

3. Basic Idea (Very Important to Understand)

Instead of returning:

{ "name": "Vidhi", "age": 21 }

The server returns:

callbackFunction({
  "name": "Vidhi",
  "age": 21
});

The browser:

Loads this as JavaScript
Executes it automatically
Calls the function with the data

4. Step-by-Step JSONP Flow

Step 1: Client creates a callback function

function handleData(data) {
  console.log(data);
}

Step 2: Client adds a script tag dynamically

<script src="https://api.example.com/user?callback=handleData"></script>

Step 3: Server responds

handleData({
  "name": "Vidhi",
  "age": 21
});

✔ Data received
✔ Cross-domain allowed
✔ No CORS required

5. Why JSONP Works (Key Reason)

Browsers do not block cross-domain <script> tags
Script content is executed, not fetched as data

This loophole enabled JSONP.

6. Limitations of JSONP (Very Important for Exams)

Limitation	Explanation
Only GET requests	Cannot send POST, PUT, DELETE
Security risk	Executes remote JavaScript
No error handling	Cannot detect 404/500 properly
No headers	Cannot send auth headers
Not real AJAX	No XMLHttpRequest

7. Security Risk Explained Simply

Since JSONP executes JavaScript:

A malicious server can send harmful code
This can cause XSS attacks

Example danger:

alert("Hacked!");
stealCookies();

Because of this, JSONP is unsafe by modern standards.

8. JSONP vs CORS (Exam Comparison)

Feature	JSONP	CORS
Cross-domain support	Yes	Yes
HTTP methods	GET only	All
Security	Low	High
Error handling	Poor	Proper
Modern usage	No	Yes

9. Is JSONP Still Used Today?

❌ No (almost never)

It is considered:

Legacy
Insecure
Obsolete

But:

Still asked in exams
Still appears in old systems
Important for conceptual understanding

10. One-Line Exam-Friendly Definition

JSONP is a legacy technique that enables cross-domain data retrieval by wrapping JSON data inside a callback function and loading it via a script tag.

11. When Should You Mention JSONP in Answers?

When explaining cross-domain communication before CORS
When asked: “How was cross-origin handled earlier?”
In theory exams (BCA / MCA / Web Technology)

12. Key Point to Remember

JSONP bypasses same-origin policy by exploiting the fact that <script> tags can load cross-domain JavaScript.