Áyax
La razón más convincente para utilizar un marco de JavaScript es estandarizar las solicitudes de Ajax en todos los navegadores. Una solicitud Ajax es una solicitud HTTP asíncrona que envía una solicitud a un script del lado del servidor y luego obtiene un resultado de respuesta, como datos en formato XML, JSON, HTML o texto sin formato. La mayoría de los marcos de JavaScript tienen algún tipo de objeto de solicitud Ajax que acepta una serie de opciones como parámetros. Estas opciones incluyen funciones de devolución de llamada que se llaman cuando se recibe una respuesta del servidor web. Las solicitudes de Ajax para ExtJS, MooTools y Prototype tienen este aspecto:
Listado 11: Solicitud Ajax en una biblioteca ExtJS
Ext.Ajax.request({
URL: 'servidor_script.php',
parámetros: {
nombre1: 'valor1',
nombre2: 'valor2'
},
método: 'POST',
éxito: función (transporte) {
alerta(transporte.responseText);
}
});
ExtJS acepta un parámetro, incluidos campos como URL, parámetros, método y función de procesamiento exitoso. El campo URL contiene la dirección del script del lado del servidor, al que llaman las solicitudes Ajax. Params en sí es un objeto que consta de pares clave/valor, que luego se pasan al servidor. El campo método tiene dos valores opcionales: GET o POST, y el valor predeterminado es el método post. El último campo es éxito, al que se llama después de que el servidor obtiene una respuesta exitosa. En este ejemplo, se supone que el servidor devuelve texto sin formato y este texto se presenta al usuario a través del método alert().
A continuación, exploremos más a fondo las solicitudes de Ajax en MooTools.
Listado 12: Solicitud Ajax en MooTools
nueva solicitud ({
URL: 'servidor-script.php',
datos: {
nombre1: 'valor1',
nombre2: 'valor2'
},
método: 'publicar',
onComplete: función (respuesta) {
alerta(respuesta);
}
}).enviar();
Como puedes ver, MooTools es muy similar a ExtJS. Notarás que las variables se pasan a través del campo de datos y que los campos de método deben estar en minúsculas. Además, a diferencia de la función de controlador de éxito, MooTools utiliza la función onComplete. Finalmente, a diferencia de ExtJS, MooTools en realidad envía la solicitud utilizando la función Request send().
Finalmente, veamos las diferencias obvias entre Prototype.
Listado 13: Solicitud Ajax en Prototipo
nuevo Ajax.Request('servidor-script.php', {
parámetros: {
nombre1: 'valor1',
nombre2: 'valor2'
},
método: 'publicar',
onSuccess: función (transporte) {
alerta(transporte.responseText);
}
});
Mira, Prototype funciona de la misma manera, pero con pequeñas diferencias de sintaxis. Para empezar, el objeto Request prototipo acepta dos parámetros para pasar al constructor. El primer parámetro es la URL a la que enviar la solicitud, como vio en los dos ejemplos anteriores, y el segundo parámetro es un objeto que contiene las opciones para cada solicitud de Ajax. Por supuesto, la URL se pasa como un parámetro independiente y no está en la lista de opciones. Además, vale la pena señalar que, a diferencia de MooTools, el constructor del objeto Prototype envía la solicitud implícitamente, por lo que no es necesario llamar a ningún método para activar la solicitud HTTP.
La mayoría de los marcos de JavaScript admiten Ajax más allá de lo que he mencionado aquí. Algunas mejoras notables incluyen la actualización automática de elementos al recibir una respuesta, sin la necesidad de funciones especiales de onSuccess. Algunas bibliotecas tienen una función de autocompletar prediseñada, como se ve en el motor de búsqueda de Google, que le brinda algunas sugerencias de consultas a medida que escribe.
En los siguientes capítulos, aprenderá sobre las mejoras en la experiencia del usuario (UE) que los marcos de JavaScript aportan a los desarrolladores web.
Dirección de reimpresión: http://www.denisdeng.com/?p=729
Dirección original: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html