$(function () { $(document).ajaxStart(function () { $("#log").html("ajaxStart<hr/>"); }); $(document).ajaxSend(function (event, xhr, settings) { var html = "ajaxSend: url:" + settings.url + "<hr/>"; $("#log").append(html); }); $(document).ajaxSuccess(function (event, xhr, settings) { var html = "ajaxSuccess:<br/>"; html += "url:" + settings.url + "<br/>"; html += "readyState:" + xhr.readyState + "<br/>"; html += "status:" + xhr.status + "<hr/>"; console.log(xhr); $("#log").append(html); }); $(document).ajaxError(function (event, xhr, settings, exception) { var html = "ajaxError:<br/>"; html += "url:" + settings.url + "<br/>"; html += "readyState:" + xhr.readyState + "<br/>"; html += "status:" + xhr.status + "<hr/>"; $("#log").append(html); }); $(document).ajaxComplete(function (event, xhr, settings) { var html = "ajaxComplete:<br/>"; html += "url:" + settings.url + "<br/>"; html += "readyState:" + xhr.readyState + "<br/>"; html += "status:" + xhr.status + "<br/>"; html += "text:" + xhr.responseText + "<hr/>"; $("#log").append(html); }); $(document).ajaxStop(function () { $("#log").append("ajaxStop"); }); $("#btnAjax").click(function () { $.ajax({ type: "POST", url: "/echo/html" }); }); });
<input type="button" id="btnAjax" value="echo" /> <br /> <fieldset> <legend>Log</legend> <div id="log"></div> <br /> </fieldset> <fieldset> <legend>Result</legend> <div id="result"></div> <br /> </fieldset>