jQuery AJAX बनाम Fetch API
In this page:
$.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>
</head>
<body>
<script>
$.get("data.php", function(data) { console.log("jQuery:", data); });
fetch("data.php").then(function(res) { return res.json(); }).then(function(data) { console.log("fetch:", data); });
</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>
</head>
<body>
<script>
$.post("data.php", {name: "Alice"}, function(data) { console.log("jQuery:", 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) { console.log("fetch:", data); });
</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>
</head>
<body>
<script>
$.get("data.php").fail(function() { console.log("jQuery: request failed"); });
fetch("data.php").catch(function() { console.log("fetch: network failure"); });
</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>
</head>
<body>
<script>
// jQuery AJAX fits an existing jQuery project; fetch fits a new dependency-free one
console.log(typeof $.get, typeof fetch);
</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>
</head>
<body>
<div id="output"></div>
<script>
fetch("data.php").then(function(res) { return res.json(); }).then(function(data) {
$("#output").text(data.message);
});
</script>
</body>
</html>- यह मान लेना कि
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: