Translate

domingo, 15 de mayo de 2011

Ajax con Prototype


Prototype, uno de los frameworks JavaScript que implementa Ajax. Es orientado a objetos y de propósito general, es decir que puede utilizarse incluso en proyectos en los que no intervenga Ajax.

Prototype introduce un objeto llamado Ajax que, como todos los demás objetos y todas las demás funciones busca eliminar las incompatibilidades entre los navegadores. En el caso de Ajax, las diferencias entre el objeto XMLHttpRequest de Mozilla Firefox y el objeto ActiveX de Microsoft Internet Explorer. Internamente, Prototype inicializa un objeto XMLHttpRequest de la siguiente manera:

var Ajax = {
getTransport: function() {
 return Try.these(
          function() {return new XMLHttpRequest()},
          function() {return new ActiveXObject('Msxml2.XMLHTTP')},
          function() {return new ActiveXObject('Microsoft.XMLHTTP')}
        ) || false;
},
activeRequestCount: 0
};

Externamente, deberemos invocar los métodos necesarios para realizarle peticiones al servidor desde el lado cliente:

url = ‘servidor.php’;
var peticion = new Ajax.Request(
                        url,
                        {
                            method: ‘get’,
                            parameters: ‘a=1&b=2’,
                            onComplete: funcionReceptora
                        }
                       );


El método Request recibe dos argumentos: la URL destino en donde se resolverá la petición (página, servicio web, archivo plano, etcétera) y una serie de datos en notación JSON. Algunos de los posibles son:
  • method: método de comunicación (POST o GET).
  • parameters: parámetros.
  • onComplete: función que se invoca cuando se completa la transacción.
  • asynchronous: comunicación asincrónica (true por defecto) o sincrónica (false).
  • onSuccess: función por invocar cuando se complete satisfactoriamente la transacción.
  • onFailure: función por invocar si surge algún inconveniente durante la transacción.
  • evalScripts: true para evaluar el código JavaScript de la respuesta.

La función que tomará el control cuando se complete la transacción (conocida como funcionReceptora) automáticamente toma la respuesta como argumento:

function funcionReceptora (respuesta) {
$(‘resultado’).innerHTML = respuesta.responseText;
}

La respuesta admite las propiedades del objeto XMLHttpRequest, por ejemplo:

  • responseText (respuesta devuelta por el servidor).
  • responseXML (respuesta devuelta por el servidor, se valida como XML).
  • status (estado de la respuesta).
  • statusText (descripción del estado).

Esto fue un pequeño resumen del uso de Prototype, dejo links:


Labels: ,