¡Por fin! Estará pensando, "Él esta poniendo lo que realmente queremos saber". Sí, lo he dejado al final para ingresar en los asistentes Ajax de Prototype, porque ellos están construidos por encima de todo lo que hemos estado leyendo y esto ayudará a entender la forma de serialización de Prototype, “observadores” e “insertions” cuando hablamos de Ajax.
Ajax, en caso de que usted haya sido enterrado en un agujero muy profundo el año pasado, se refiere a la utilización del objeto XMLHttpRequest del navegador (o equivalente) para comunicarse con el servidor sin recargar la página. Prototype deja de lado la mayor parte de los detalles, pero estaría bien conocer un poco más a fondo XMLHttpRequest, lo que usted encontrará en este artículo de Cameron Adams.
Bien, ahora usted esta listo para conseguir algo de acción de la Web 2.0, de una mirada a esta sencilla petición Ajax:
new Ajax.Request("hello.php", {
onSuccess : function(resp) {
alert("The response from the server is: " + resp.responseText);
},
onFailure : function(resp) {
alert("Oops, there's been an error.");
},
parameters : "name=Fred"
});
El constructor Ajax.Request toma una URL y un objeto de opciones (Options). En este caso, enviamos un parámetro a hello.php, y alertamos su respuesta (o alertamos un error si esto no funciona). Esto merece tomarnos un tiempo para familiarizarnos con las opciones que están disponibles. Aquí un cuadro que describe las opciones y sus valores por defecto.
Prototype añade una cabecera HTTP a todas sus peticiones Ajax, de modo que su aplicación en el servidor pueda descubrir que ésta es una llamada Ajax, más que una llamada normal. La cabecera es:
X-Requested-With: XMLHttpRequest
Aquí esta por ejemplo una function PHP usada para detector una llamada Ajax sería:
function isAjax() {
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
$_SERVER ['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
}
Usando este acercamiento, usted puede escribir aplicaciones Ajax que trabajen incluso si el usuario tiene un navegador antiguo o si tiene JavaScript deshabilitado, pero esto se merece todo un artículo completo...
Usando Form.serialize para Pasar Datos a Ajax.Request
Como hemos visto, la opción de parámetros es usada pasar un string URL-codificado de variables. Si los datos que necesita enviar son puestos por un formulario, como lo es con la mayor parte de aplicaciones Ajax, usted simplemente puede usar Form.serialize para generar un string URL-codificado de todos los campos del formulario y pasar la opción de parámetros como tal:
function addComment(e) {
// submit the form using Ajax
new Ajax.Request("comment.php", {
parameters : Form.serialize(this),
onSuccess : updateComment
});
Event.stop(e);
}
Event.observe($("commentform"), "submit", addComment, false);
Escribiendo AJAX Event Handlers
En el ejemplo anterior, onSuccess y onFailure son dos ejemplos del manejo de eventos Ajax. El manejo de eventos funciona porque en el objeto de opciones Ajax.Request se peticiona un argumento, cual es el objeto XMLHttpRequest, para aquella petición de Ajax. Yo normalmente llamo a este argumento response o resp. Usted puede usar este argumento para conseguir la respuesta del servidor de esta manera:
function successHandler(resp, jsonObj) {
// returns the response from the server as raw text
resp.responseText
// returns the response as an XML document that you can navigate with the DOM
resp.responseXML
// alert some property of the returned JSON
alert(jsonObj.name);
}
Recuerde, que resp es sólo el objeto XMLHttpRequest, luego todas las propiedades estarán disponibles.
Usted puede enviar datos como JSON desde su servidor, puede añadir los datos JSON a la cabecera de respuesta X-JSON. Esto entonces automáticamente sería evaluado por Prototype y enviado como el segundo argumento.
Ajax.Updater y Ajax.PeriodicalUpdater
Muchas operaciones de Ajax simplemente implican la actualización de algún HTML de su página con el HTML devuelto por el servidor. El objeto Ajax.Updater cubre a Ajax.Request y simplifica su empleo común por nosotros. Aquí tiene un ejemplo simple:
new Ajax.Updater("mydiv", "hello.php", {
parameters : "name=Fred",
onFailure : function(resp) {
alert("Oops, there's been an error.");
}
});
El trocito de código simplemente sustituye el contenido del elemento cuyo ID sea "mydiv" con cualquier contenido devuelto del servidor Ajax.PeriodicalUpdater similar, pero hace la llamada de Ajax repetidamente en un intervalo que usted asigna:
new Ajax.PeriodicalUpdater("mydiv", "hello.php", {
// initial number of seconds interval between calls
frequency : 1,
decay : 2
});
La opción decay le permite dar a su servidor un poco de soltura si se devuelven muchas respuestas idénticas. Esencialmente, PeriodicalUpdater siempre hace una petición que compara los resultados con lo que el servidor devolvió la vez anterior. Si los valores son los mismos, se multiplica el intervalo por el valor de decay. De esta manera, para el ejemplo antedicho, se haría la siguiente petición dos segundos después, cuatro segundos después, etcétera, hasta que se recibiera un resultado diferente del servidor. En aquel punto, el intervalo sería reinicializado a un segundo.
AJAX con Responders
AJAX responders le permite registrar los eventos globales que son provocados por cada y toda petición Ajax que se encuentra en la página. Ellos son muy útiles para el manejo de aplicaciones con gran cantidad de actividad Ajax. Por ejemplo, usted puede usarlos para mostrar un estándar que cargue una animación siempre que una petición de Ajax suceda:
Ajax.Responders.register({
onCreate : showLoader,
onComplete : hideLoader
});
Si usted busca algunos ejemplos de Ajax desarrollados con Prototype, pruebe este artículo.
