Cross-Domain Requests: JSONP और CORS
एक browser आमतौर पर अलग-अलग origins के बीच requests को restrict करता है। CORS किसी server के लिए cross-origin requests allow करने का standard तरीका है।
In this page:
Syntax
$.ajax({
url: "url",
dataType: "jsonp",
success: function (data) { /* ... */ }
});1. Cross-Domain AJAX क्या है?
एक cross-domain AJAX request उस page से अलग origin — एक अलग domain, protocol, या port — को target करती है जिसने इसे बनाया, और browsers इसे restrict करते हैं।
उदाहरण: 1. What Is Cross-Domain AJAX?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.ajax({
url: "https://api.example.com/data",
success: function(data) { $("#output").append($("<div>").text(JSON.stringify(data))); },
error: function() { $("#output").append($("<div>").text("Blocked by browser CORS restrictions")); }
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>2. CORS की Basics
CORS (Cross-Origin Resource Sharing) पूरी तरह से server द्वारा HTTP response headers जैसे Access-Control-Allow-Origin के through control होता है; jQuery नहीं कर सकता।
उदाहरण: 2. CORS Basics
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
// CORS is controlled by the server's response headers, not by jQuery
$.ajax({
url: "https://api.example.com/data",
success: function(data) { $("#output").text(JSON.stringify(data)); }
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>3. jQuery के साथ JSONP
JSONP cross-domain GET requests बनाने की एक पुरानी technique है जो CORS से पहले की है, जो एक real AJAX request के बजाय एक script tag load करके काम करती है।
उदाहरण: 3. JSONP with jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.ajax({
url: "https://api.example.com/data",
dataType: "jsonp",
success: function(data) { $("#output").text(JSON.stringify(data)); }
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>4. Credentials के साथ CORS
Credentialed CORS requests किसी cross-origin call के साथ cookies या दूसरे credentials भेज सकती हैं, लेकिन सिर्फ तभी जब client withCredentials set करे और।
उदाहरण: 4. CORS with Credentials
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.ajax({
url: "https://api.example.com/data",
xhrFields: { withCredentials: true },
success: function(data) { $("#output").text(JSON.stringify(data)); }
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>5. CORS बनाम JSONP
CORS cross-origin AJAX के लिए modern, standard choice है और सभी HTTP methods support करता है, जबकि JSONP सिर्फ GET requests तक limited है और सिर्फ तभी काम करता है जब।
उदाहरण: 5. CORS vs JSONP
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
// CORS: modern, all HTTP methods. JSONP: legacy, GET only, needs server support
$.ajax({url: "https://api.example.com/data", dataType: "json"});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह मान लेना कि किसी दूसरे domain को
$.ajax()बस काम कर जाएगा, जबकि browser response को block कर देता है जब तक serverAccess-Control-Allow-Originन भेजे। method: "POST"के साथ JSONP try करना, जबकि JSONP सिर्फ GET के साथ काम करता है क्योंकि यह एक<script>tag load करता है।- ऐसे server के लिए
dataType: "jsonp"set करना जो अपना response callback function में wrap नहीं करता, ताकि callback कभी न चले।
चैप्टर सारांश
ajax()वह low-level method है जो requests पर पूरा control देता है।- Headers और status codes को process किया जा सकता है, और global hooks सारी AJAX activity सुनते हैं।
- Cross-domain requests JSONP और CORS इस्तेमाल करती हैं।
🔒
Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: