jQuery ajaxStart

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

ajaxStart

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *