jQuery: gli eventi ajax

Quali sono gli eventi ajax? Prepariamo un piccolo tutorial per esporli tutti.

Partiamo da una semplicissima pagina che esegue una chiamata ajax:

<h2>Premi il pulsante per effettuare una richiesta ajax.</h2>
<button id="trigger">GET</button><br>
<div id="target"></div>
<div id="log"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#trigger').click(function() {
$('#target').load('snippet.html');
});
});
</script>

A questo punto aggiungiamo una porzione di script che appenderà al document la gestione di tutti gli eventi e quando questi si scatenano scriverà all’interno del div con id log

$.each(('ajaxError ajaxSend ajaxStart ajaxStop ajaxSuccess ajaxComplete').split(' '),
function( i, name ) {
$(document).bind(name, function(event, xhr) {
$('#log').append('Event: ' + event.type + '<br/>');
});
});

L’esempio

GET