jQuery AJAX vs Fetch API
GET Request
jQuery's $.get() sends a GET request and hands the response to a callback function once it arrives, while the native fetch() API performs the same basic job but returns a Promise instead of using jQuery's Deferred-based callbacks. Modern code often prefers fetch's Promise interface since it composes naturally with async/await.
Example: 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
Both APIs can send data to a server with a POST request. Fetch requires you to configure the request more explicitly — setting the method, headers, and body options yourself — while $.post() bundles those details into a single, simpler function call.
Example: 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>Handling Errors
jQuery surfaces failures through a fail() callback (or a rejected promise on $.ajax()), while fetch uses a rejected promise handled with .catch(). One important difference: fetch only rejects on a genuine network failure, so an HTTP error response like a 404 still resolves successfully and needs an explicit response.ok check.
Example: 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>When Each API Fits
jQuery AJAX remains convenient and familiar in codebases that already depend on jQuery for other things, since it's just one more method on a library that's already loaded. fetch is built directly into every modern browser and pairs naturally with Promise-based and async/await code, without needing jQuery loaded at all.
Example: 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>Small AJAX Project
The core skill that transfers between both is understanding asynchronous requests generally — when to reach for jQuery AJAX in an existing jQuery-based project, and when to prefer fetch for new, modern browser-only code with no other jQuery dependency.
Example: 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>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: