jQuery AJAX बनाम Fetch API
jQuery का get data request करने का एक छोटा तरीका देता है। Fetch एक modern browser API है जो एक Promise return करता है।
In this page:
Syntax
$.ajax({ url: url, success: callback });
fetch(url)
.then((response) => response.json())
.then((data) => { /* ... */ });GET Request
jQuery का $.get() एक GET request भेजता है और आते ही response को एक callback function को सौंप देता है, जबकि native fetch() API वही basic।
उदाहरण: GET Request
<!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..."));
$.get("data.php", function(data) { $("#output").append($("<div>").text("jQuery: " + JSON.stringify(data))); });
fetch("data.php").then(function(res) { return res.json(); }).then(function(data) { $("#output").append($("<div>").text("fetch: " + JSON.stringify(data))); });
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>POST Request
दोनों APIs एक POST request से server को data भेज सकते हैं। Fetch को आपसे request को ज़्यादा explicitly configure करने की ज़रूरत है — method, headers, an set करना।
उदाहरण: POST Request
<!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>
var $initial = $("body").children();
$(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..."));
$.post("data.php", {name: "Alice"}, function(data) { $("#output").append($("<div>").text("jQuery: " + JSON.stringify(data))); });
fetch("data.php", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({name: "Alice"})
}).then(function(res) { return res.json(); }).then(function(data) { $("#output").append($("<div>").text("fetch: " + JSON.stringify(data))); });
});
$("#resetBtn").click(function() {
$("body").children().not($initial).remove();
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Errors Handle करना
jQuery एक fail() callback ($.ajax() पर एक rejected promise) के through failures surface करता है, जबकि fetch .catch() से handle किए गए एक rejected promise इस्तेमाल करता है।
उदाहरण: Handling Errors
<!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..."));
$.get("data.php").fail(function() { $("#output").append($("<div>").text("jQuery: request failed")); });
fetch("data.php").catch(function() { $("#output").append($("<div>").text("fetch: network failure")); });
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>हर API कब Fit होता है
jQuery AJAX उन codebases में convenient और familiar रहता है जो पहले से दूसरी चीज़ों के लिए jQuery पर depend करते हैं, क्योंकि यह किसी library पर सिर्फ एक और method है।
उदाहरण: When Each API Fits
<!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() {
// jQuery AJAX fits an existing jQuery project; fetch fits a new dependency-free one
$("#output").text(typeof $.get + " " + typeof fetch);
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>एक छोटा AJAX Project
दोनों के बीच transfer होने वाली core skill यह है कि asynchronous requests को generally समझना — मौजूदा jQuery-based।
उदाहरण: Small AJAX Project
<!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; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
fetch("data.php").then(function(res) { return res.json(); }).then(function(data) {
$("#output").text(data.message);
});
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#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. #}
आम गलतियां
- यह मान लेना कि
fetch()जQuery केfail()जैसे 404 या 500 पर reject होता है, जबकि यह सिर्फ network errors पर reject होता है और आपकोresponse.okcheck करना होगा। response.json()call करना भूल जाना और फिरresponseको खुद data की तरह इस्तेमाल करना।fetchके साथbody: { name: "Ann" }इस्तेमाल करके एक POST भेजना, जबकि body एक string होना चाहिए जैसेJSON.stringify(...)एकContent-Typeheader के साथ।
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: