AJAX

Ing. Marco Riva Luz Estructura de Datos

Que es Ajax
AJAX (Asynchronous JavaScript And XML) es una tcnica de desarrollo Web para crear aplicaciones interactivas mediante la combinacin de tres tecnologas ya existentes.

Que es Ajax
JavaScript - Para manejar el objeto XMLHttpRequest y DOM tratar para los datos recibidos. HTML - Distribuye en la ventana del navegador los elementos de la aplicacin y la informacin recibida por el servidor CSS - Define el aspecto de cada elemento y dato de la aplicacin XML - Es el formato de los datos transmitidos del servidor al cliente (navegador) y que posteriormente sern mostrados. Lenguaje de servidor - Genera la informacin til en XML y la enva al navegador.

El objeto XMLHttpRequest
Es una instancia de una API que nos permite la transferncia de datos en formato XML desde los script del navegador ( JavaScript, JScrip, VBScript ... ) a los del servidor ( PHP, Perl, ASp, Java ... ) e inversamente.

El objeto XMLHttpRequest
Mtodos y atributos: Atributos:
onreadystatechange readyState responseText responseXML Status statusText Abort getAllResponseHeaders getResponseHeader Open Send setRequestHeader

Mtodos:

onreadystatechange

Asigna la funcin que se ejecutar cada vez que readyState cambie de valor.
Utilizacin oXMLHttpRequest.onreadystatechange = fFuncion; oXMLHttpRequest - Objeto XMLHttpRequest fFuncion - Funcin a ejecutarFrecuentemente utilizamos onreadystatechange para definir una funcin para leer los datos recibidos del servidor, en este caso en su interior comprobaramos que readyState tenga valor 4 y entonces leeremos el valor de responseXML, responseText...

Ejemplo: <script language="JavaScript"> // Creamos la funcin function fFuncion () { // Alertamos el estado de la peticin alert ( oXMLHttpRequest.readyState ); } // Definimos la funcin handler del evento oXMLHttpRequest.onreadystatechange = fFuncion; </script>

readyState
Devuelve el estado actual del objeto XMLHttpRequest, cada vez que cambia el valor de readyState se lanza la funcin indicada en onreadystatechange Utilizacin iEstado = oXMLHttpRequest.readyState; iEstado - Estado actual del objeto 0 - Sin inicializar, siempre ser: 1 - Abierto (acaba de llamar open) 2 - Enviado 3 - Recibiendo 4 - A puntooXMLHttpRequest - Objeto XMLHttpRequest La propiedad readyState se utiliza en todas las comunicaciones asncronas para comprobar que podemos acceder ya a atributos como responseXML y responseText, slo accesibles en los estados 3 y 4. Ejemplo <script language="JavaScript"> // Creamos la funcin function fFuncion () { // Si el estado es "A punto" if ( oXMLHttpRequest.readyState == 4) { // Alertamos el texto alert ( oXMLHttpRequest.responseText ); } } // // Definimos la funcin handler del evento oXMLHttpRequest.onreadystatechange = fFuncion; </script>

responseText
Devuelve el texto del documento descargado del servidor en una peticin con XMLHttpRequest. Utilizacin sDocumento = oXMLHttpRequest.responseText; sDocumento - Cadena de caracteres con el texto del documento. oXMLHttpRequest - Objeto XMLHttpRequest La propiedad responseText se utiliza para tratar los datos recibidos desde el servidor que no tienen formato XML, podremos acceder a los datos siempre y cuando el estado de la conexin devuelto con readyStatechange sea igual a 3 (recibiendo) o 4 (a punto). Siempre que podamos intentaremos usar responseXML en lugar de responseText y XML para la los datos en lugar de texto plano. Ejemplo: <script language="JavaScript"> // Creamos la funcin function fFuncion () { // Si el estado es "A punto" if ( oXMLHttpRequest.readyState == 4) { // Alertamos el texto alert ( oXMLHttpRequest.responseText ); } } // Definimos la funcin handler del evento oXMLHttpRequest.onreadystatechange = fFuncion; </script>

responseXML
Devuelve una referncia al cuerpo del documento descargado del servidor en una peticin con XMLHttpRequest en formato XML. Utilizacin oDocumento = oXMLHttpRequest.responseXML; oDocumento - Referncia al cuerpo del objeto recibido. oXMLHttpRequest - Objeto XMLHttpRequest La propiedad responseXML se utiliza para tratar los datos recibidos en formato XML desde el servidor, podremos acceder a los datos siempre y cuando el estado de la conexin devuelto con readyStatechange sea igual a 4 (a punto). Ejemplo: <script language="JavaScript"> // Creamos la funcin function fFuncion () { // Si el estado es "A punto" if ( oXMLHttpRequest.readyState == 4) { // Accedemos al documento XML oDocumento = oXMLHttpRequest.responseXML.documentElement; // Alertamos el numeto de item's alert ( oDocumento.getElementsByTagName('item').length ); } } // Definimos la funcin handler del evento oXMLHttpRequest.onreadystatechange = fFuncion; </script>

status
Devuelve el cdigo del estado HTTP de la transmisin devuelto por el servidor web. Utilizacin iEstado = oXMLHttpRequest.status; iEstado - Entero con el cdigo HTTP de estado. oXMLHttpRequest - Objeto XMLHttpRequest La propiedad status e utiliza para comprobar que no ha habido problemas en la comunicacin con el servidor, podremos acceder a los datos siempre y cuando el estado de la conexin devuelto con readyStatechange sea igual a 3 (reciviendo) o 4 (a punto). Ejemplo: <script language="JavaScript"> // Comparamos el estado if ( oXMLHttpRequest.status != 200 ) { // Mostramos un mensaje de error alert ( 'Ha sucedido un error con la conexion' ); } </script>

statusText
Devuelve el texto del estado HTTP de la transmisin devuelto por el servidor web. Utilizacin sEstado = oXMLHttpRequest.statusText; sEstado -Cadena de caracteres con el texto del estado HTTP. oXMLHttpRequest - Objeto XMLHttpRequest La propiedad statusText no es de uso comn, normalmente en su lugar usaremos status, podremos acceder a los datos siempre y cuando el estado de la conexin devuelto con readyStatechange sea igual a 3 (recibiendo) o 4 (a punto). Ejemplo <script language="JavaScript"> // Comparamos el estado alert ( oXMLHttpRequest.statusText ); } </script>

abort
El mtodo abort detiene todas las conexiones asncronas abiertas por el objeto XMLHttpRequest y lo reinicializa poniendo a cero su estado (readyState).

Utilizacin oXMLHttpRequest.abort (); oXMLHttpRequest - Objeto XMLHttpRequest Frecuentemente se utiliza abort antes de realizar una nueva peticin al servidor a travs de un objeto que est realizando o recibiendo otra peticin anterior. Ejemplo <!-- Botn --> <input type="button" value="Detener" action="oXMLHttpRequest.abort ();" />

getAllResponseHeaders
El mtodo getAllResponseHeaders devuelve en una sola cadena de caracteres los encabezados HTTP que se han recibido del servidor en una conexin usando el objeto XMLHttpRequest. Utilizacin sHeaders = oXMLHttpRequest.getAllResponseHeaders (); sHeaders - Cadena de caracteres con los encabezados. oXMLHttpRequest - Objeto XMLHttpRequest La cadena sHeaders contendr todos los encabezados enviados por el servidor excepto el de estado ( por ejemplo HTTP/1.1 200 OK), los encabezados sern devueltos separados por la combinacin 'salto de linea' + 'retorno de caro'. Ejemplo <script language="JavaScript"> <!-// creamos el objeto oXMLHttp = new XMLHttpRequest(); // pedimos la pgina en modo sncrono oXMLHttp.open('get', 'index.htm', false); // enviamos los datos oXMLHttp.send(); // alertamos los encabezados HTTP alert(oXMLHttp.getAllResponseHeaders()); --> </script>

getResponseHeader
El mtodo getResponseHeader devuelve en una sola cadena de caracteres uno de los encabezados HTTP que se han recibido del servidor en una conexin usando el objeto XMLHttpRequest. Utilizacin sHeaders = oXMLHttpRequest.getAllResponseHeaders ( sHeaderName ); sHeaders - Cadena de caracteres con los encabezados. oXMLHttpRequest - Objeto XMLHttpRequest sHeaderName - Cadena de caracteres con el nombre del encabezado La cadena sHeaders contendr todos los encabezados con nombre igual a sHeaderName enviados por el servidor separados por la combinacin 'coma' + 'espacio'. Ejemplo <script language="JavaScript"> <!-// creamos el objeto oXMLHttp = new XMLHttpRequest(); // pedimos la pgina en modo sncrono oXMLHttp.open('get', 'index.htm', false); // enviamos los datos oXMLHttp.send(); // alertamos los encabezados HTTP alert(oXMLHttp.getResponseHeader('X-Powered-By')); --> </script>

open
El mtodo open prepara una conexin HTTP a travs del objeto XMLHttpRequest ( con un mtodo y una URL especificados ) y inicializa todos los atributos del objeto. Utilizacin oXMLHttpRequest.open ( sMetodo, sURL [, bSincronia [, sUsuario [, sPwd ] ] ] ); oXMLHttpRequest - Objeto XMLHttpRequest sMetodo - String con el mtodo de conexin ( GET o POST ). sURL - URL para la peticion HTTP bSincronia - Booleano opcional en true para usar modo asncrono y en false para sncrono. sUsuario - Cadena de caracteres opcional con el nombre de usuario para la autenticacin sPwd - Cadena de caracteres opcional con la contrasea del usuario sUsuariopara la autenticacin Al llamar a open el atributo readyState a 1, resetea los headers de envo y los devuelve atributos responseText , responseXML, status y statusText a sus valores iniciales Ejemplo <script language="JavaScript"> <!-// creamos el objeto oXMLHttp = new XMLHttpRequest(); // pedimos la pgina en modo sncrono oXMLHttp.open('get', 'index.htm', false); // enviamos los datos oXMLHttp.send(); --> </script>

send
El mtodo send enva la peticin con los datos pasados por parmetro como cuerpo de la peticin a travs del objeto XMLHttpRequest. Utilizacin oXMLHttpRequest.send ( mData ); oXMLHttpRequest - Objeto XMLHttpRequest oData - Cuerpo de la peticin HTTP. El parametro oData puede ser una referncia al DOM de un documento o una cadena de caracteres. Ejemplo <script language="JavaScript"> <!-// creamos el objeto oXMLHttp = new XMLHttpRequest(); // pedimos la pgina en modo sncrono oXMLHttp.open('get', 'index.htm', false); // enviamos los datos oXMLHttp.send(); --> </script>

setRequestHeader
El mtodo setRequestHeader aade un encabezado HTTP a la peticin HTTP a travs del objeto XMLHttpRequest. Utilizacin oXMLHttpRequest.setRequestHeader ( sNombre, sValor); oXMLHttpRequest - Objeto XMLHttpRequest sNombre - Nombre del encabezado HTTP. sValor - Valor del encabezado HTTP. El parametro sNombre deber no podr ser Accept-Charset, Accept-Encoding, Content-Length, Expect, Date, Host, Keep-Alive, Referer, TE, Trailer, Transfer-Encoding ni Upgrade, tampoco podr contener espacios, puntos o saltos de lnea.

Ejemplo <script language="JavaScript"> <!-// creamos el objeto oXMLHttp = new XMLHttpRequest(); // aadimos el encabezado oXMLHttp.setRequestHeader('User-Agent', 'AJAX'); // pedimos la pgina en modo sncrono oXMLHttp.open('get', 'index.htm', false); // enviamos los datos oXMLHttp.send(); --> </script>

Creacin del objeto XMLHttpRequest

El secreto de AJAX es la comunicacin sin refresco entre el cliente y el servidor, esto es posible gracias a JavaScript y al objeto XMLHttpRequest. Este objeto, esta disponible para la mayora de navegadores modernos excepto las versiones 5 y 6 de Internet Explorer, para las cuales tendremos que usar un objeto ActiveX llamado 'Microsoft XMLHT<script TP', por lo tanto , cuando creemos el objeto de comunicacin con el servidor deberemos tener en cuenta el navegador con el que trabaja nuestro usuario. Para hacer el cdigo ms limpio, crearemos una funcin para realizar la conexin que usar variables locales, adems es recomendable incluir todas las funciones que usaremos en un fichero .js externo e incluirlo en el documento HTML. <script> function AJAXCrearObjeto(){ var obj; if(window.XMLHttpRequest) { // no es IE obj = new XMLHttpRequest(); } else { // Es IE o no tiene el objeto try { obj = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert('El navegador utilizado no est soportado'); } } return obj; } </script> Ahora, llamaremos a la funcin AJAXCrearObjeto de la siguiente manera para obtener el objeto que utilizaremos ms adelante: <script> oXML = AJAXCrearObjeto(); </script>

Realizar una peticin con AJAX

El primer paso para establecer la comunicacin con el servidor usando AJAX, es hacer la peticin, posteriormente, el servidor nos preparar y devolver una informacin que ya veremos ms adelante como recibimos, tratamos e incorporamos en nuestra pgina. Existen dos tipos de peticin al servidor, definidas con el mtodo open, la peticin sncrona y la asncrona, pero por definicin AJAX utiliza comunicacin asncrona. Realizar la peticin al servidor Para realizar la peticin al servidor, utilizaremos los mtodos open, onreadystatechange y send, que sirven respectivamente para preparar la peticin, seleccionar la funcin de recepcin e iniciar la peticin. Al mtodo open, hay que pasarle el mtodo de peticin (GET) y la URL que se enviar al servidor y mediante la cual, el servidor, crear la respuesta que posteriormente leeremos.

Ejemplo
<script> // Creamos el objeto oXML = <A&NBSP;HREF=" articulos articulo ? num='323""'>AJAXCrearObjeto(); // Preparamos la peticin oXML.open('GET', 'archivo.txt'); // Preparamos la recepcin oXML.onreadystatechange = leerDatos; // Realizamos la peticin oXML.send(''); </script>