This AJAXEvent ajaxStart registers a handler to be executed when the first Ajax request begins.
Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.
To observe this method in action, do the following
Add jQuery libs from CDN into head section in HTML page
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Write few HTML tags into body section
<button class="trigger">Trigger</button> <div class="result"></div> <div class="log"></div>
Add ajaxComplete event into head section
<script type="text/javascript">
$(document).ready(function(){
$(document).ajaxStart(function() {
$(".log").text("Triggered ajaxStart handler.");
});
$("button.trigger").on("click", function() {
$("div.result").load("data.txt");
});
});
</script>The complete HTML page
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).ajaxStart(function() {
$(".log").text("Triggered ajaxStart handler.");
});
$("button.trigger").on("click", function() {
$("div.result").load("data.txt");
});
});
</script>
</head>
<body>
<button class="trigger">Trigger</button>
<div class="result"></div>
<div class="log"></div>
</body>
</html>
data file
data
When the user clicks the element with class trigger and the Ajax request is about to begin, the log message is displayed.
Thanks for reading.
Output
