miAJAX

Esta una pequeña introducción a AJAX, lo primero que os dejo en el contenido del fichero javascript, donde se encuentran las funciones que se encargan de realizar la petición, responder a los cambios de estado de esta y por ultimo parsear el documento xml de vuelta y pintarlo en pantalla.

miajax.js:

---


function makeRequest(url){
//crear objeto peticion
request = new XMLHttpRequest();
//asociar: por cada cambio de estado se ejecuta esta funcion
request.onreadystatechange = fncEstadoHandler;
//elegir el metodo de la peticion, la url a donde se hace, y si es o no asicrono
request.open("GET", url, true);
//enviar peticion, null por ser get
request.send(null);
}

function fncEstadoHandler(){
if(checkReadyState(request)){
//obtener el objeto respuesta
var response = request.responseXML.documentElement;
//parsear xml de vuelta
var issued = response.getElementsByTagName('issued')[0].firstChild.data;
var modified = response.getElementsByTagName('modified')[0].firstChild.data;
var created = response.getElementsByTagName('created')[0].firstChild.data;

//fin parseo
//pintar lo parseado en la pagina
document.getElementById('pizarra').innerHTML = issued + "
" + modified + "
" + created;

}
}

function checkReadyState(obj){
if(obj.readyState == 0){
//0 - Uninitialized. The object is not initialized with data.
document.getElementById('estado').innerHTML += "Sending";
}
if(obj.readyState == 1){
//1 - Loading. The object is loading its data.
document.getElementById('estado').innerHTML += "Loading";
}
if(obj.readyState == 2){
//2 - Loaded. The object has finished loading its data.
document.getElementById('estado').innerHTML += "Loaded";
}
if(obj.readyState == 3){
//3 - Interactive. The user can interact with the object even though it's not fully loaded.
document.getElementById('estado').innerHTML += "Ready";
return true;
}
if(obj.readyState == 4){
document.getElementById('estado').innerHTML += "Complete";
//4 - Complete. The object is completely initialized.
if(obj.status == 200){
// Estado 200 devuelto por el servidor web, todo correcto
return true;
}else if(obj.status == 404){
// Estado 404 devuelto por el servidor web, la URL pedida no encontrada
document.getElementById('estado').innerHTML += "File not found";
}else{
// Otros problemas
document.getElementById('estado').innerHTML += "There was a problem retrieving the XML.";
}
}
}


---

La pagina html, es sencilla. Solo tiene tres capas, una de ellas se encarga de responder al clickeo del raton (boton), y lanzar la peticion, en la segunda capa se pintan los resultados (pizarra), y la ultima informa sobre los estados por los que pasa la petición (estado). Todo a lo cutre, pero para ilustrar los conceptos subyacentes creo que es lo más acertado.

Me he basado en un tutorial de introducción que leí hace ya unas semanas, pero que ayer ordenando mis enlaces en del.icio.us aparecio : How to use AJAX
Entre los enlaces de mi etiqueta ajax podeís encontrar varios manuales de iniciación, de buenas práctias, de cuando es aconsejable, varios frameworks de AJAX, ... de todo un poco.