Global AJAX Hook Listeners
In this page:
1. What Are Global AJAX Events?
jQuery fires global events on the document for every AJAX request a page makes, letting you hook into all of them from one place instead of adding callbacks to each individual call. This is the mechanism behind features like a site-wide loading spinner that reacts to any AJAX activity.
Example: 1. What Are Global AJAX Events?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).ajaxComplete(function() {
console.log("An AJAX request just completed, somewhere on the page");
});
$.get("data.php");
</script>
</body>
</html>2. ajaxSend and ajaxComplete
ajaxSend fires right before any AJAX request is sent, and ajaxComplete fires after each one finishes, regardless of whether it succeeded or failed. Together they're commonly used to show and hide a loading indicator around every request a page makes.
Example: 2. ajaxSend and ajaxComplete
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).ajaxSend(function() {
console.log("Request starting");
});
$(document).ajaxComplete(function() {
console.log("Request finished");
});
$.get("data.php");
</script>
</body>
</html>3. ajaxSuccess and ajaxError
ajaxSuccess fires only after a request completes successfully, and ajaxError fires only when a request fails — narrower than ajaxComplete, which fires either way. These are useful for global error logging or showing a shared error banner without wiring it into every individual AJAX call.
Example: 3. ajaxSuccess and ajaxError
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).ajaxSuccess(function() {
console.log("A request succeeded");
});
$(document).ajaxError(function() {
console.log("A request failed");
});
$.get("data.php");
</script>
</body>
</html>4. Global Loading Indicator
Global events are a natural fit for one loading indicator shared by the whole page, since you don't need to remember to show and hide it inside every AJAX call you write. Show it in an ajaxSend handler and hide it in ajaxComplete, and every request on the page is covered automatically.
Example: 4. Global Loading Indicator
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="spinner" style="display:none">Loading...</div>
<script>
$(document).ajaxSend(function() { $("#spinner").show(); });
$(document).ajaxComplete(function() { $("#spinner").hide(); });
$.get("data.php");
</script>
</body>
</html>5. Global Event Practice
Global hooks work best for behavior that should apply universally, like logging or a shared spinner — keep anything specific to one particular request inside that request's own callbacks instead. Mixing page-specific logic into global handlers makes it hard to tell which request triggered which behavior.
Example: 5. Global Event Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).ajaxComplete(function() {
console.log("Logged globally, not inside each request's own callback");
});
$.get("data.php");
$.get("data.php");
</script>
</body>
</html>Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: