Global AJAX Hook Listeners
In this page:
$(document).ajaxStart(function () { /* first request starts */ });
$(document).ajaxStop(function () { /* all requests done */ });
$(document).ajaxError(function () { /* a request failed */ });1. Global AJAX Events क्या हैं?
jQuery किसी page द्वारा की गई हर AJAX request के लिए document पर global events fire करता है, आपको हर एक में अलग callbacks add करने के बजाय एक जगह से सबमें hook करने देते हुए।
उदाहरण: 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 और ajaxComplete
ajaxSend किसी भी AJAX request भेजे जाने से ठीक पहले fire होता है, और ajaxComplete हर एक के खत्म होने के बाद fire होता है, चाहे वह succeed हुई हो या fail।
उदाहरण: 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 और ajaxError
ajaxSuccess सिर्फ तब fire होता है जब कोई request successfully complete होती है, और ajaxError सिर्फ तब fire होता है जब कोई request fail होती है — ajaxComplete से narrower, जो हमेशा fire होता है।
उदाहरण: 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
पूरे page द्वारा share किए गए एक loading indicator के लिए global events एक natural fit हैं, क्योंकि आपको हर individual request के अंदर इसे दिखाना और छुपाना याद नहीं रखना पड़ता।
उदाहरण: 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 उस behavior के लिए सबसे अच्छे काम करते हैं जो universally apply होना चाहिए, जैसे logging या एक shared spinner — किसी एक particular request से specific कुछ भी उसके अपने callback में रखें।
उदाहरण: 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>$(document).ajaxComplete(...)attach करना यह उम्मीद करते हुए कि यह सिर्फ एक request के लिए fire होगा, जबकि यह page पर हर AJAX request के लिए fire होता है।- इन global handlers को
documentके बजाय किसी ordinary element पर attach करना, या request परglobal: falseset करना, ताकि वे कभी fire ही न हों। - यह check किए बिना कि कौन सी request fail हुई, messages दिखाने के लिए
ajaxErrorइस्तेमाल करना, ताकि हर failure एक जैसा generic text दिखाए; extra arguments (event, jqXHR, settings) इस्तेमाल करें।
Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: