AJAX Asynchronous JavaScript XML (JavaScript asncrono y XML)

almochba@iteso.mx

Ajax

Qu es Ajax?
Es un Modelo de Interaccin para Aplicaciones Web Es una Arquitectua de trabajo Es un Tendencia reciente de desarrollo Es un Toolkit: mecanismos escritos en JS + DOM + CSS + XML + XSLT + XMLHttpRequest JavaScript, para interactuar dinmicamente con los datos HTML (o XHTML) y Hojas de Estilo en Cascada (CSS) para presentar la informacin; XML para intercambiar y manipular datos de manera desincronizada con un servidor web (aunque las aplicaciones AJAX pueden usar otro tipo de tecnologas, incluyendo texto plano, para realizar esta labor).

almochba@iteso.mx

Ajax
Objetivo La Tecnologa AJAX trata de eliminar los siguientes problemas clsicos en las aplicaciones web:

Interactividad pobre. El usuario generalmente espera con una pgina en blanco hasta que se cargue toda la pgina. Tardanza en la respuesta y alto consumo de ancho de banda. Las aplicaciones clsicas web transfieren al servidor y este devuelve cdigo HTML al navegador. Esto hace que se consuman en muchas ocasiones grandes anchos de banda y el rendimiento de la aplicacin sea bajo. Interfases demasiado simples. Para conseguir interfases ms sofisticados se ha utilizado generalmente Flash que implica desarrolladores muy especializados e implica la descarga en el cliente de un applet, normalmente pesados y en ocasiones no permitidos. Grado de usabilidad bajo.

almochba@iteso.mx

Ajax
Cmo funciona? El motor ajax (XMLHttpRequest ) es cargado inicialmente en el cliente. Este motor hace de mediador y manda la informacin relevante al servidor en XML y procesa solamente los datos a actualizar en el cliente.

almochba@iteso.mx

Ajax y XMLHttpRequest

Objeto XMLHttpRequest
Propiedades Descripcin
Devuelve el estado del objeto como sigue: 0 = sin inicializar, 1 = cargando, 2 = cargado, 3 = interactivo y 4 = completado. Devuelve la respuesta como una cadena

readyState

responseText

responseXML

Devuelve la respuesta como XML. Esta propiedad devuelve un objeto XML Devuelve el estado como un nmero (p. ej. 404 para "Not Found" y 200 para "OK"). Devuelve el estado como una cadena (p. ej. "Not Found" o "OK").

status

statusText

almochba@iteso.mx

Ajax y XMLHttpRequest

Objeto XMLHttpRequest
Metodo
abort() getAllResponseHeaders() getResponseHeader(etiqueta) open(metodo, url [, bandera_sinc[, usuario [, contrasea]]]) send([elemento]) setRequestHeader(etiqueta, valor) onreadystatechange req.responseXML o node. getElementsByTagName(tagname) Tag.childNodes[x] Node[x].nodeValue

Descripcin
Detiene la peticin actual Regresa el conjunto completo de encabezados (etiquetas y valores) en forma de cadena Regresa el valor de la etiqueta pasada como parmetro Asigna el URL, mtodo y dems atributos opcionales a la peticin actual Enva la peticin Asigna un par ordenado de etiqueta-valor a la peticin Funcin que se activa con cada cambio de estado. Toma los nodos nombrados por tagname y los guarda en un arreglo Toma el nodo del tag Se toma el valor

almochba@iteso.mx

Ajax y XMLHttpRequest
La siguiente funcin genrica incluye la creacin del objeto XMLHttpRequest (en JavaScript), y una peticin GET
/*esta variable llevar el control de las peticiones*/ var req; /*esta variable nos dir cual es el componente html que estamos actualizando */ var elemCurrent; function loadXMLDoc(elem) { var xml =archivo.xml"; /*archivo del que se est leyendo la informacin*/ elemCurrent = elem; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", xml, true); req.send(null); } else if (window.ActiveXObject) { isIE = true; req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET", xml, true); req.send(); } } }

almochba@iteso.mx

Ajax y XMLHttpRequest
function processReqChange() { // si el estatus de la peticion es "loaded" if (req.readyState == 4) { // si el estatus es "OK" if (req.status == 200) { //aqu hacemos las funciones para actualizar la interfaz //dependiendo del valor del elemento actual } else { alert("There was a problem retrieving the XML data:\n" + req.statusText); } } }

almochba@iteso.mx

Formato XML
Muchas tecnologas actuales intercambian datos en formato XML, principalmente por que XML es un formato estndar. XML se utiliza como metalenguaje es decir, describe y categoriza tipos especficos de informacin. Los datos XML empiezan con una declaracin XML <?xml version=1.0 encoding =UTF-8?>
<?xml version="1.0" encoding="utf-8" ?> <excursiones> <excitem URL="Imgjpg/eltule.gif">El tule</excitem> <excitem URL="Imgjpg/cancun.jpg">Cancn</excitem> <excitem URL="Imgjpg/Chichenitza.jpg">ChichenItza</excitem> <excitem URL="Imgjpg/Snjuanulua.jpg">San Juan Ulua</excitem> </excursiones >

Excursiones es el elemento raz y excitem son los elementos hijos, URL es una propiedad de excitem. La interfaz en html o xhtml crear el objeto de peticin y este guardar el resultado de la peticin (es decir, el XML) en un objeto DOM. Para que nuestra aplicacin cliente est actualizada en cada cambio en nuestra base de datos debemos generar archivos XML.

almochba@iteso.mx

Creacin de archivos en php

Para generar los archivos xml que leer la aplicacin web, debemos crear una clase que haga una conexin a la base de datos y cree los archivos con la informacin extrada. Algunas de las funciones de php que nos permiten manipular archivos son las siguientes:

Mtodo
resource fopen(archivo, modo) r: solo lectura r+ lectura y escritura. Posiciona el cursor al final del archivo w Se abre para escritura. Si el archivo no existe lo crea w+ Se abre para escritura y posiciona el cursor al final del archivo Escribe en el archivo Lee los bytes dados en segundo parmetro Cierra el archivo Obtienen el tamao del archivo Valida si el archivo existe Valida si se llego al final de archivo

fputs(resource, contenido) String fread(resource, longitud) bool fclose(resource) int filesize(resource) bool file_exist(archivo) Bool feof(resource)

almochba@iteso.mx

Modelo de Objetos del Documento ( DOM)

Es una interfaz de programacin de aplicaciones (API) para documentos HTML validos HTML y XML bien construidos. Define la estructura lgica de los documentos y el modo en que se accede y manipulan sus objetos. El siguiente cdigo de HTML, en DOM se interpreta como la imagen de la derecha. Si estamos actualizando el elemento table <table> <tbody> <tr> <td>Shady Grove</td> <td>Aeolian</td> </tr> <tr> <td>Sobre el ro, Charlie</td> <td>Dorian</td> </tr> </tbody> </table>

almochba@iteso.mx

Modelo de Objetos del Documento ( DOM)

Se puede navegar a travs de los elementos del documento, los siguientes mtodos son los ms usados.

Mtodos
getElementsByTagName(nombre_nodo);
Document.createElement(tipo_elem) Element.setAttribute(atributo, valor) Document.createTextNode(texto) Element.appendChild(elem) Element.firstChild Element.childNodes[n] Element.removeChild(elem) Element.data = valor

Obtendremos un objeto
Tipo de elemento en HTML Define un valor para el atributo del elemento HTML Crear un texto Agrega un elemento a otro Obtenemos el primer hijo del elemento Obtiene el elemento hijo que est en la posicin x (los ndices inician en 0) Elimina el elemento del parmetro elem Actualizar el valor del componente

almochba@iteso.mx