AJAX with jQuery
Long before fetch() existed, jQuery's AJAX methods were the standard way to make an HTTP request from JavaScript without wrapping raw XMLHttpRequest boilerplate by hand — you'll still see it constantly in older codebases.
A simple GET request
JS app.js
$.get("/api/users/1", function(data) {
console.log("Got user:", data.name);
});
Console output
Got user: Priya
$.get() is a shorthand for the common case: fetch a URL, run a callback with the parsed response. For anything with more options — a different HTTP method, custom headers, explicit error handling — $.ajax() is the full form underneath it.
$.ajax() with success and error handlers
JS app.js
$.ajax({
url: "/api/users",
method: "POST",
data: { name: "Priya" },
success: function(response) {
console.log("Created:", response.id);
},
error: function(xhr) {
console.log("Failed:", xhr.status);
}
});
Console output, on success
Created: 42
The promise-style alternative
$.get() and $.ajax() both also return a "jqXHR" object you can chain .done() and .fail() onto, instead of passing callbacks inline:
JS app.js
$.get("/api/users/1")
.done(function(data) { console.log("Done:", data.name); })
.fail(function() { console.log("Request failed"); });
Console output
Done: Priya
Note: jQuery's jqXHR object behaves like a Promise — modern jQuery even lets you
.then() it — but it isn't a native ES6 Promise underneath. Mixing it directly into async/await code usually works fine, but if you need the exact native Promise contract (say, for Promise.all()), wrap the call in Promise.resolve($.get(...)) rather than assuming it behaves identically in every edge case.