ajax global events json1 :console
Objective: Global ajax event handlers: :Event sequence
  • $("#_gevents1").ajaxStart(function()
  • $("#_gevents2").ajaxSend(function(evt, req, set){
  • $("#_gevents4").ajaxSuccess(
  • $("#_gevents3").ajaxComplete(
This document displays the run-time-views from a public domain (Linux, FastCGI). Please also review the other document, which displayed the results from IIS 8.0 (FastCGI environment)

Code :

 $("#_gevents1").ajaxStart(function(){
count++;
$("#_gevents1").html("ajax.Start,
step :<span class='red'>" + count + "/Started </span>");
console.log("ajax.Starts ---");
});
/* ajaxSucess events testifying all the events*/
$("#_gevents4").ajaxSuccess(function(event,request,settings){
count++;
$(this).html("ajaxSucess, step
:<span class='red'> " + count + " /successful</span>");
console.log("ajax.Success ---");
});
/* Triggered when request is sent */
$("#_gevents2").ajaxSend(function(evt, req, set){
count++;
$(this).html("ajaxSend, step
:<span class='red'> " + count + " /sent </span>");
$(this).append("URL :" + set.url + "");
console.log("ajax.Sends ---");
});
/* Triggerd when request completed */
$("#_gevents3").ajaxComplete(function(event,request,settings){
count++;
$(this).html("ajaxComplete, step
:<span class='red'> " + count + " /compelted</span>");
console.log("ajax.Complets ---");
});

HTML:

<body>
<p>Example of ajax Global events: <br/>
Open in a now window and view the events output in console pane<br/>
Note the displays versus console.log sequence. </p>
<input type="button" id="RR" value="Re-load" />
<input type="button" id="_getJson" value="getJson" />
<div id="div1" >Loading doc..... </div> <br/>
<div id="_gevents0" class="results">
ajax global event begins - 0
</div>
<div id="_gevents1" class="results">
ajaxStart :
</div>
<div id="_gevents2" class="results">
ajaxSend
</div>
<div id="_gevents3" class="results">
ajaxComplete :
</div>
<div id="_gevents4" class="results">
ajaxSuccess:
</div>


</body>
Runtime views :ajax_GlobalEvents_JSON1.htm