Previous chapter (Jquery Tutorial - Effects)Next chapter (Jquery Tutorial - Plugins)

jQuery AJAX Life Cycle

jQuery AJAX life cycle demonstration. This is a demonstration of the methods ajaxStart, ajaxSend, ajaxComplete, ajaxStop, and ajaxSuccess that are triggered when load method is called.

Other examples in Ajax (Jquery Tutorial)

Result from the Online TryIt-Editor

<!doctype html>
<html>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
  </script>
  <script type="text/javascript" type="text/javascript">
    $(document).ready(function() {
       $("#driver").click(function(event){
        $('#stage0').load('/ajaxcontent.htm');
      });
       $("#stage1").ajaxStart(function(){
       $(this).html("<h5>ajaxStart is triggered</h5>");
     });
     $("#stage2").ajaxSend(function(evt, req, set){
       $(this).html("<h5>ajaxSend is triggered with url: " + set.url  + "</h5>");
     });
      $("#stage3").ajaxComplete(function(event,request,settings){
       $(this).html("<h5>ajaxComplete is triggered</h5>");
     });
     $("#stage4").ajaxStop(function(event,request,settings){
       $(this).html("<h5>ajaxStop is triggered</h5>");
     });
     $("#stage5").ajaxSuccess(function(event,request,settings){
       $(this).html("<h5>ajaxSuccess is triggered</h5>");
     });
   });
  </script>
  <body>
    <h4>
      All the JQuery AJAX Events:-
    </h4>
    <p>
      Click on the button to load text1.txt file:
    </p>
    <div id="stage0" style="background-color:gray;color:#FFF;">
      STAGE - 0
    </div>
    <div id="stage1" style="background-color:gray;color:#FFF;">
      STAGE - 1
    </div>
    <div id="stage2" style="background-color:gray;color:#FFF;">
      STAGE - 2
    </div>
    <div id="stage3" style="background-color:gray;color:#FFF;">
      STAGE - 3
    </div>
    <div id="stage4" style="background-color:gray;color:#FFF;">
      STAGE - 4
    </div>
    <div id="stage5" style="background-color:gray;color:#FFF;">
      STAGE - 5
    </div>
    <input type="button" id="driver" value="Load Data" />
  </body>
</html>

^1.0

^1.0

^1.0

^4.0

^4.0

jQuery AJAX Life Cycle

Useful Information