Al avanzar en el camino de dominar Ajax uno de los puntos que encontramos es hacer el manejador de los eventos, estos eventos son disparados cuando hacemos una petición Ajax y esta retorna alguna respuesta.
Es clave conocer muy bien los eventos ya que de esto depende la forma en que implementemos nuestras funciones propias, así sabiendo la causa de una respuesta podemos crear nuestras funciones.
Eventos Ajax
Como habíamos descrito anteriormente, uno de los pasos claves es conocer los eventos que pueden suceder cuando existe una petición Ajax, a continuación veamos cuales son y cuando ocurren.
abort: Este evento es disparado cuando la petición es abortada. Es del tipo ProgressEvent, es decir mientras ocurre el progreso de completado de la petición.
error: Este evento se dispara cuando la petición falla, también es del tipo ProgressEvent.
load: Cuando una petición es completada exitosamente, es del tipo ProgressEvent.
loadend: Se dispara cuando se completa la petición, puede ser cuando se complete exitosamente o con un error, es del tipo ProgressEvent.
loadstart: Se dispara al iniciar una petición.
progress: Se dispara para indicar el progreso durante la petición, es del tipo ProgressEvent.
readystatechange: Es un evento que se dispara en las diferentes estaciones durante el ciclo de vida de la petición.
timeout: Se dispara cuando el tiempo de ejecución de la petición se agota: es del tipo ProgressEvent.
La mayoría de estos eventos son disparados durante en un punto particular de la petición Ajax, la excepción a esto son los eventos readystatechange y progress, los cuales pueden ser disparados en cualquier momento del ciclo de vida de la petición para obtener el estado de la petición.
Como esto parece un poco complejo a primera vista, vamos a realizar un pequeño código de ejemplo, el cual va a mostrarnos que ocurre en cada una de las etapas del ciclo de vida de una petición, con ello podremos ver que va sucediendo:
Con este código lo que hacemos simplemente es que en cada etapa de la petición solicitamos la información asociada al evento con el objeto DisplayEventDetails, de esta manera en forma asíncrona vamos capturando cada etapa de la petición.
Una vez que vamos registrando cada etapa del evento nos interesa poder analizarlas por lo que las vamos imprimiendo en una tabla HTML para que al final podamos notar todo lo que pasó al momento de hacer una petición Ajax, en nuestro navegador deberíamos ver algo similar a esto:
![html5_ajaxevent.jpg]()
Como podemos notar la petición hace varios pasos antes de entregarnos la respuesta esperada, esto es lo que corre detrás de una simple petición.
Con esto finalizamos el tutorial y ahora ya podemos analizar lo que ocurre cuando empleamos esta tecnología para hacer cargas asíncronas en nuestros documentos o páginas HTML.
Es clave conocer muy bien los eventos ya que de esto depende la forma en que implementemos nuestras funciones propias, así sabiendo la causa de una respuesta podemos crear nuestras funciones.
Eventos Ajax
Como habíamos descrito anteriormente, uno de los pasos claves es conocer los eventos que pueden suceder cuando existe una petición Ajax, a continuación veamos cuales son y cuando ocurren.
abort: Este evento es disparado cuando la petición es abortada. Es del tipo ProgressEvent, es decir mientras ocurre el progreso de completado de la petición.
error: Este evento se dispara cuando la petición falla, también es del tipo ProgressEvent.
load: Cuando una petición es completada exitosamente, es del tipo ProgressEvent.
loadend: Se dispara cuando se completa la petición, puede ser cuando se complete exitosamente o con un error, es del tipo ProgressEvent.
loadstart: Se dispara al iniciar una petición.
progress: Se dispara para indicar el progreso durante la petición, es del tipo ProgressEvent.
readystatechange: Es un evento que se dispara en las diferentes estaciones durante el ciclo de vida de la petición.
timeout: Se dispara cuando el tiempo de ejecución de la petición se agota: es del tipo ProgressEvent.
La mayoría de estos eventos son disparados durante en un punto particular de la petición Ajax, la excepción a esto son los eventos readystatechange y progress, los cuales pueden ser disparados en cualquier momento del ciclo de vida de la petición para obtener el estado de la petición.
Como esto parece un poco complejo a primera vista, vamos a realizar un pequeño código de ejemplo, el cual va a mostrarnos que ocurre en cada una de las etapas del ciclo de vida de una petición, con ello podremos ver que va sucediendo:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table { margin: 10px; border-collapse: collapse; float: left}
div {margin: 10px;}
td, th { padding: 4px; }
</style>
</head>
<body>
<div>
<button>Apples</button>
<button>Cherries</button>
<button>Bananas</button>
</div>
<table id="events" border="1">
</table>
<div id="target">
Press a button
</div>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
var httpRequest;
function handleButtonPress(e) {
clearEventDetails();
httpRequest = new XMLHttpRequest();
[b]httpRequest.onreadystatechange = handleResponse;[/b]
[b] httpRequest.onerror = handleError;[/b]
[b] httpRequest.onload = handleLoad;[/b]
[b] httpRequest.onloadend = handleLoadEnd;[/b]
[b] httpRequest.onloadstart = handleLoadStart;[/b]
[b] httpRequest.onprogress = handleProgress;[/b]
httpRequest.open("GET", e.target.innerHTML + ".html");
httpRequest.send();
}
function handleResponse(e) {
displayEventDetails("readystate(" + httpRequest.readyState + ")");
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
document.getElementById("target").innerHTML= httpRequest.responseText;
}
}
[b] function handleError(e) { displayEventDetails("error", e);}[/b]
[b] function handleLoad(e) { displayEventDetails("load", e);}[/b]
[b] function handleLoadEnd(e) { displayEventDetails("loadend", e);}[/b]
[b] function handleLoadStart(e) { displayEventDetails("loadstart", e);}[/b]
[b] function handleProgress(e) { displayEventDetails("progress", e);}[/b]
function clearEventDetails() {
document.getElementById("events").innerHTML
= "<tr><th>Event</th><th>lengthComputable</th>"
+ "<th>loaded</th><th>total</th></tr>"
}
function displayEventDetails(eventName, e) {
if (e) {
document.getElementById("events").innerHTML +=
"<tr><td>" + eventName + "</td><td>" + e.lengthComputable
+ "</td><td>" + e.loaded + "</td><td>" + e.total
+ "</td></tr>";
} else {
document.getElementById("events").innerHTML +=
"<tr><td>" + eventName
+ "</td><td>NA</td><td>NA</td><td>NA</td></tr>";
}
}
</script>
Con este código lo que hacemos simplemente es que en cada etapa de la petición solicitamos la información asociada al evento con el objeto DisplayEventDetails, de esta manera en forma asíncrona vamos capturando cada etapa de la petición.
Una vez que vamos registrando cada etapa del evento nos interesa poder analizarlas por lo que las vamos imprimiendo en una tabla HTML para que al final podamos notar todo lo que pasó al momento de hacer una petición Ajax, en nuestro navegador deberíamos ver algo similar a esto:
Como podemos notar la petición hace varios pasos antes de entregarnos la respuesta esperada, esto es lo que corre detrás de una simple petición.
Con esto finalizamos el tutorial y ahora ya podemos analizar lo que ocurre cuando empleamos esta tecnología para hacer cargas asíncronas en nuestros documentos o páginas HTML.
