JS का JSONP

JSONP क्यों मौजूद है

CORS से पहले, browsers JavaScript को किसी अलग domain पर cross-origin XMLHttpRequest बनाने से सख्ती से रोकते थे -- पर एक <script> tag को हमेशा किसी भी domain से एक script load करने की इजाज़त रही है, इसलिए JSONP उस loophole का फायदा उठाता है: "response" असल में ऐसे load होता है जैसे वह एक script file हो।

उदाहरण: Why JSONP Exists

<script src="https://api.example.com/data?callback=handleData"></script>
<script>
  // Define the function `handleData` taking `data`
  function handleData(data) { console.log(data); }
</script>

JSONP कैसे काम करता है

Client एक global callback function define करता है और एक ऐसे URL के लिए request करता है जिसमें उस function का नाम एक query parameter के रूप में शामिल होता है -- server अपने JSON data को उसी exact function नाम की एक call में लपेट देता है, इसलिए जब returned "script" load होकर execute होता है, यह अपने आप आपके function को data को argument के रूप में देकर कॉल करता है।

उदाहरण: How JSONP Works

function handleData(data) {
  console.log("Received:", data);
}
// Server responds with: handleData({"name": "Sam"});
// which calls handleData automatically once the "script" loads

एक JSONP Request Dynamically बनाना

HTML में एक <script> tag hardcode करने के बजाय, JSONP requests आमतौर पर dynamically trigger होती हैं -- JavaScript से एक नया <script> element बनाना, उसका src target URL पर सेट करना, और उसे document में जोड़ना, जो तुरंत request शुरू कर देता है।

उदाहरण: Dynamically Creating a JSONP Request

// Define the function `handleData` taking `data`
// Define the function `handleData` taking `data`
function handleData(data) { console.log(data); }
// Declare the constant `script`, set to `document.createElement("script")`
// Declare the constant `script`, set to `document.createElement("script")`
const script = document.createElement("script");
// Assign "https://api.example.com/data?callback=handleData" to `script.src`
// Assign "https://api.example.com/data?callback=handleData" to `script.src`
script.src = "https://api.example.com/data?callback=handleData";
// Call `document.body.appendChild(script)`
// Call `document.body.appendChild(script)`
document.body.appendChild(script);

JSONP की सीमाएं

JSONP सिर्फ GET requests support करता है, क्योंकि यह किसी URL को एक script के रूप में load करने पर निर्भर है -- POST body भेजने के लिए कोई equivalent नहीं है।

यह किसी failed request का पता लगाने का कोई साफ तरीका भी नहीं देता (कोई error callback standard नहीं है), और यह response को आपके page में असली, unrestricted JavaScript के रूप में execute करता है।

उदाहरण: JSONP's Limitations

// JSONP limitations:
// - only supports GET (loading a URL as a script)
// - no built-in error callback if the request fails
// - executes the response as full, unrestricted JavaScript
console.log("Use CORS with fetch() instead when the API supports it.");

JSONP बनाम CORS: कब कौन सा इस्तेमाल करें

किसी भी API के लिए जिसे आप control करते हैं, या किसी भी modern third-party API के लिए, CORS सही, सुरक्षित विकल्प है -- यह server को explicitly बताने देता है कि कौन से origins इसे access कर सकते हैं, और HTTP methods की पूरी range और safer fetch API के साथ काम करता है।

JSONP सिर्फ उन पुराने APIs के लिए relevant रहता है जिन्होंने कभी CORS support नहीं जोड़ा।

उदाहरण: JSONP vs CORS: When to Use Which

fetch("https://api.example.com/data").then(r => r.json()).then(data => console.log(data));
console.log("Prefer CORS/fetch whenever the server supports it.");