tutorial de ajax

TUTORIAL DE AJAX

AJAX (Asynchronous Javascript and XML):

Traducido como indica el título, no es más que una forma de programar aplicaciones interactivas para web. Esta evolución de DHTML se la ha denominado Web 2.0. Para ello utiliza XHTML y CSS para formatear la información, DOM (Document Object Model) para interactuar y visualizar dinámicamente la información, se apoya en XML, XSTL para manipular la información mostrada, el objeto XMLHttpRequest (no estándar) y Javascript para actualizar los datos sin necesidad de refrescar la página, y para manipular todas esas tecnologías.

Según la wikipedia, Jesse J. Garret, fué el que desarrolló la idea original denominándola AJAX. El objeto XMLHttpRequest fue originariamente inventado por Microsoft, usado desde internet explorer 5.0 como un objeto ActiveX, siendo accesible mediante Javascript. Mozilla en su versión 1.0 implementa el objeto compatible. DOM es una forma de representar documentos estructurados como modelos oriendos a objetos, estandarizado por W3C.

Esta forma de programar es una buena alternativa a Flash, siempre y cuando se mantengan las distancias. Flash además de tener el lenguaje ActionScript, y poder interactuar con objetos XML posee la faceta del diseño gráfico incorporado. La capacidad de impacto multimedia que ofrece Flash está muy lejos de conseguirse con AJAX. Existen Frameworks de código Javascript que permiten animar objetos, el uso de Drag and Drop, ordenar objetos, y muchas más operaciones que permiten unos efectos visuales muy atractivos y novedosos.

Google (por ejemplo Gmail) y Yahoo (por ejemplo Flickr), usan Ajax. Y ahora vamos a ver un ejemplo práctico y sencillo de usar este método de desarrollo.

1.    El objetivo es crear una página con unos enlaces que cargen contenido asíncrono (Es decir, sin cambiar de URL).

2.    Necesitaremos crear una página XHTML principal, y dos más que son las que cargaremos.

3.    Un archivo CSS para dar formato a las etiquetas xhtml.

4.    Un archivo JS, donde pondremos el código Javascript.

5.    Comprobaremos el soporte del navegador del objeto XMLHttpRequest

Nota: Requieres conocimientos basicos de HTML para leer este tutorial. Quizas tambien de programación basica para entender la parte de CSS.

Javascript y XMLHttpRequest

Ahora toca Javascript, y es donde se usa el objeto XMLHttpRequest.

Lo primero que tenemos que hacer es comprobar la disponibilidad en el navegador. Para ello necesitamos saber que:

·         En los navegadores basados en Mozilla, la referencia a este objeto con código Javascript es window.XMLHttpRequest.

·         En cambio, en Internet Explorer tenemos que hacer uso de ActiveXObject, existiendo varias versiones denominadas Microsoft.XMLHTTP y Msxml2.XMLHTTP

·         Así que crearemos una función que compruebe mediante un If condicional si existe el primer objeto, y en caso de que sea verdadero, crearemos un nuevo objeto XMLHttpRequest, pero si es falso, crearemos un ActiveXObject Microsoft.XMLHTTP, pero si aun así no existe, por último crearemos un Msxml2.XMLHTTP.

·         Cuando ya tenemos el objeto creado, disponemos de diversos métodos y propiedades para comprobar el estado de los datos como las propiedades onreadystatechange, readyState, responseText, responseXML, status, statusText y los métodos abort(), getAllResponseHeaders(), getresponseHeader(string header), open(string url,string asynch), send(string), setHeader(string header,string value).

·         Si window.XMLHttpRequest devuelve verdadero porque el XMLHttpRequest no es null o undefined, le asignaremos al objeto un nombre de istancia (de forma similar a cuando lo hacemos con ActionScript). Al evento onreadystatechange se le asignará una función para la respuesta y llamaremos a los métodos open() y send().

Si alguna de las cosas dicha arriba no te quedo claro, observa abajo el codigo para poder entenderlo mejor.

Podemos usar else if para comprovar las versiones. Pero, ya que tenemos que comprobar las diferentes variables cuando cargamos el objeto XMLHttpRequest se puede usar el método de gestión de errores catch... try:

// Documento JavaScript

// Esta función cargará las paginas

function llamarasincrono (url, id_contenedor)

{ 

var pagina_requerida = false;

if (window.XMLHttpRequest)

{

// Si es Mozilla, Safari etc

pagina_requerida = new XMLHttpRequest ();

} else if (window.ActiveXObject)

{

// pero si es IE

try

{

pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");

}

catch (e)

{

// en caso que sea una versión antigua

try

{

pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");

}

catch (e)

else

return false;

pagina_requerida.onreadystatechange = function ()

// función de respuesta

cargarpagina (pagina_requerida, id_contenedor);

pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send

pagina_requerida.send (null);

// todo es correcto y ha llegado el momento de poner la información requerida

// en su sitio en la pagina xhtml

function cargarpagina (pagina_requerida, id_contenedor)

if (pagina_requerida.readyState == 4 && (pagina_requerida.status ==200 || window.location.href.indexOf ("http") == - 1))

document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;

Conclusión

El uso de Javascript para crear páginas dinámicas de XHTML convierte los sitios web en aplicaciones. El concepto de acción reacción toma relevancia y mediante esta técnica se puede manipular cualquier contenedor <div> que tenga la página mediante su id y permitir la reacción ante cualquier evento del usuario para cargar la información solicitada en una parte de la página.

En este ejercicio se ha utilizado texto en formato xhtml y he usado la propiedad responseText, pero también se pueden crear documentos XML y manipularlos con la propiedad responseXML. Después podremos interactuar con los nodos, añadiendo o eliminándolos a la página, ordenándolos, o incluso, editar y guardar registros, si creamos una conexión con una base de datos.