jQuery ajaxSend

This AJAXEvent ajaxSend registers a handler to be executed before an Ajax request is sent.

Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all handlers that have been registered with the .ajaxSend() 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 ).ajaxSend(function() {
          $(".log").text("Triggered ajaxSend 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 ).ajaxSend(function() {
                  $(".log").text("Triggered ajaxSend 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>

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

ajaxSend

 

Leave a Reply

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