ग्लोबल AJAX Hook Listeners
Global AJAX events आपको एक साथ कई AJAX requests के लिए code चलाने देते हैं। shared loading messages और logging के लिए ये उपयोगी हैं।
In this page:
Syntax
$(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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$(document).ajaxComplete(function() {
$("#output").text("An AJAX request just completed, somewhere on the page");
});
$.get("data.php");
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$(document).ajaxSend(function() {
$("#output").append($("<div>").text("Request starting"));
});
$(document).ajaxComplete(function() {
$("#output").append($("<div>").text("Request finished"));
});
$.get("data.php");
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$(document).ajaxSuccess(function() {
$("#output").append($("<div>").text("A request succeeded"));
});
$(document).ajaxError(function() {
$("#output").append($("<div>").text("A request failed"));
});
$.get("data.php");
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</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>
<style>
#spinner { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="spinner" style="display:none">Loading...</div>
<button id="btn">Load Data</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$(document).ajaxSend(function() { $("#spinner").show(); });
$(document).ajaxComplete(function() {
$("#spinner").hide();
$("#output").text("Request finished, spinner hidden");
});
$("#btn").on("click", function() {
$("#output").text("Request sent...");
$.get("data.php");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$(document).off();
$(window).off();
$("#output").empty();
init();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$(document).ajaxComplete(function() {
$("#output").text("Logged globally, not inside each request's own callback");
});
$.get("data.php");
$.get("data.php");
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
$(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: