AJAX QU ES AJAX?

Segn wikipediaAJAX (Asynchronous JavaScript And XML) s una tcnica de desarrollo web para crear aplicaciones interactivas mediante la combinacin de tres tecnologas ya existentes que conoceremos en este manual. O para que lo entiendan mejor, es una manera de crear una aplicacin que responde a las acciones del usuario sin refrescar la pgina contra el servidor. ArribaTabla de contenido y y y y Tecnologas Funcionamiento Problemas Ejemplos

ArribaTecnologas Para conseguir este efecto, se utilizan la mayora de las tecnologas disponibles para pginas web, HTML, CSS, XML, JavaScript y algn lenguaje de servidor cmo puede ser PHP o ASP, veamos que funcin tiene cada lenguaje en la aplicacin: 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. ArribaFuncionamiento El usuario accede a la aplicacin que es enviada por el servidor en formato HTML, JavaScript y CSS. Luego el cdigo JavaScript de la aplicacin pide al servidor los datos que quiere mostrar y este, ejecuta un cdigo de lado de servidor que enva al navegador los datos en formato XML.

Cada vez que el usuario realiza una accin que significa mostrar unos datos, la capa javascript, repite la accin anterior de manera invisible al usuario y muestra los datos deseados. ArribaProblemas El principal problema de la gran mayora de aplicaciones AJAX (lo digo por experiencia como usuario de mozilla) es la baja compatibilidad entre navegadores, puesto que la capa JavaScript, es de una gran complejidad y a menudo por falta de experiencia en el lenguaje, o por falta de tiempo, se opta por programar solo para Internet Explorer. En futuras entregas, veremos cmo programar una aplicacin AJAX compatible para todos los navegadores incluidos navegadores sin javascript. ArribaEjemplos Un excelente ejemplo de aplicacin AJAX, bastante compatible entre navegadores es Google Maps, en ella podrs ver cmo cambiamos la posicin del mapa sin recargar la pgina..

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

Compatibilidad con navegadores

El primer en implementar esta API fu Microsoft con un objeto ActiveX para su navegador Internet Explorer 5, posteriormente empez a incorporarse de forma nativa en todos los naveadores empezando por Firefox seguido de Apple, Konqueror, Opera Software, iCab y Microsoft Internet Explorer 7. ArribaMetodos y atributos ArribaAtributos: onreadystatechange El atributo onreadystatechange asigna la funcin que se ejecutar cada vez que readyState cambie de valor. ArribaTabla de contenido y y Utilizacin Ejemplo

ArribaUtilizacin oXMLHttpRequest.onreadystatechange = fFuncion; oXMLHttpRequest - Objeto XMLHttpRequest fFuncion - Funcin a ejecutar Frecuentemente 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... Una alternativa a onreadystatechange es la utilizacin de un timeout con setTimeout antes de la lectura. En ambos casos ser necesario comprobar el estado de la propiedad readyState de oXMLHttpRequest, ya que solo cuando tenga valor 3 o 4 se podr acceder a atributos como responseXML y responseText. ArribaEjemplo Habiendo creado el objeto XMLHttpRequestoXMLHttpRequest previamente haremos que nos alerte el estado del objeto (readystate) cada vez que este cambie. 000 <script language="JavaScript"> 001 // Creamos la funcin 002 function fFuncion () { 003 // Alertamos el estado de la peticin

004 005 006 007 008

alert ( oXMLHttpRequest.readyState ); } // Definimos la funcin handler del evento a continuacin oXMLHttpRequest.onreadystatechange = fFuncion; </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Readystate El atributo readyState devuelve el estado actual del objeto XMLHttpRequest, cada vez que cambia el valor de readyState se lanza la funcin indicada en onreadystatechange ArribaTabla de contenido y y Utilizacin Ejemplo

ArribaUtilizacin 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 punto oXMLHttpRequest - 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. ArribaEjemplo Habiendo creado el objeto XMLHttpRequestoXMLHttpRequest previamente haremos que nos alerte el texto recibido en modo asncrono. 000 001 002 003 004 005 006 007 008 009 010 011 012 <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></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Response text El atributo responseText devuelve el texto del documento descargado del servidor en una peticin con XMLHttpRequest. ArribaTabla de contenido

y y

Utilizacin Ejemplo

ArribaUtilizacin 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. ArribaEjemplo Habiendo creado el objeto XMLHttpRequestoXMLHttpRequest previamente haremos que nos alerte el texto recibido en modo asncrono. 000 001 002 003 004 005 006 007 008 009 010 011 <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></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Response XML
El atributo responseXML devuelve una referencia al cuerpo del documento descargado del servidor en una peticin con XMLHttpRequest en formato XML. ArribaTabla de contenido y y Utilizacin Ejemplo

ArribaUtilizacin oDocumento = oXMLHttpRequest.responseXML; oDocumento - Referencia 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). Esta propiedad nos devolver null siempre que la respuesta XML del servidor no tenga el encabezado text/xml, application/xml o acabe en +xml.

Utilizaremos las propiedades del Modelo de Objetos de Documento (DOM) para tratar los datos XML recibidos. ArribaEjemplo Habiendo creado el objeto XMLHttpRequestoXMLHttpRequest previamente y realizado una peticin de un xml con marcas <item> haremos que nos alerte el nmero de item's. 000 001 002 003 004 005 006 007 008 009 010 011 012 013 <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></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Status
El atributo statusText devuelve el cdigo del estado HTTP de la transmisin devuelto por el servidor web. ArribaTabla de contenido y y Utilizacin Ejemplo

ArribaUtilizacin 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 (recibiendo) o 4 (a punto). El cdigo de estado HTTP para una transmisin correcta es el 200, ser conveniente comprobar este dato antes de acceder a los datos con responseXML o responseText, puedes ver una lista de los otros posibles cdigos y su significado en este artculo. ArribaEjemplo Habiendo creado el objeto XMLHttpRequestoXMLHttpRequest mostramos un error cuando la conexin no ha sido satisfactoria. 000 <script language="JavaScript"> 001 // Comparamos el estado 002 if ( oXMLHttpRequest.status != 200 ) { 003 // Mostramos un mensaje de error 004 alert ( 'Ha sucedido un error con la conexion' );

005 } 006 </script>

Maximizar

</CODE<code>
Seleccionar SCRIPT,XML

Status text
El atributo statusText devuelve el texto del estado HTTP de la transmisin devuelto por el servidor web. ArribaTabla de contenido y y Utilizacin Ejemplo

ArribaUtilizacin 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). El texto de estado HTTP para una transmisin correcta es 'OK'. ArribaEjemplo Habiendo creado el objeto XMLHttpRequestoXMLHttpRequest mostramos el texto de estado. 000 001 002 003 004 <script language="JavaScript"> // Comparamos el estado alert ( oXMLHttpRequest.statusText ); } </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

MTODOS: Abort
El mtodo abort detiene todas las conexiones asncronas abiertas por el objeto XMLHttpRequest lo y reinicializa poniendo a cero su estado (readyState). ArribaTabla de contenido y y Utilizacin Ejemplos

ArribaUtilizacin 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. ArribaEjemplos

Vamos a crear un botn para que el usuario pueda detener en cualquier momento la comunicacin a travs del objeto oXMLHttpRequest previamente creado. 000 <!-- Botn --> 001 <input type="button"value="Detener" 002 action="oXMLHttpRequest.abort ();" /></CODE<code>
Maximizar Seleccionar XML

Vamos a realizar una peticin liberando antes el objeto oXML previamente creado. 000 001 002 003 004 005 006 007 008 009 <script> // Liberamos el objeto oXML.abort (); // Enviamos los datos oXML.open('GET', 'archivo.txt'); // Preparamos la recepcin oXML.onreadystatechange = leerDatos; // Realizamos la peticin oXML.send(''); </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

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. ArribaTabla de contenido y y Utilizacin Ejemplo

ArribaUtilizacin 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'. Podremos acceder a los encabezados siempre y cuando el estado de la conexin devuelto con readyStatechange sea igual a 3 (recibiendo) o 4 (a punto). ArribaEjemplo Vamos a mostrar en un alert todos los encabezados recibidos en una conexin. 000 <script language="JavaScript"> 001 <!-002 // creamos el objeto 003 oXMLHttp = new XMLHttpRequest(); 004 // pedimos la pgina en modo sncrono 005 oXMLHttp.open('get', 'index.htm', false); 006 // enviamos los datos 007 oXMLHttp.send();

008 // alertamos los encabezados HTTP 009 alert(oXMLHttp.getAllResponseHeaders()); 010 --> 011 </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

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. ArribaTabla de contenido y y Utilizacin Ejemplo

ArribaUtilizacin 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'. Podremos acceder a los encabezados siempre y cuando el estado de la conexin devuelto con readyStatechange sea igual a 3 (recibiendo) o 4 (a punto). ArribaEjemplo Vamos a mostrar en un alert todos los encabezados 'X-Powered-By' recibidos en una conexin. 000 001 002 003 004 005 006 007 008 009 010 011 <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></CODE<code>
Maximizar Seleccionar SCRIPT,XML

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. ArribaTabla de contenido y Utilizacin

Ejemplo

ArribaUtilizacin 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 ( por defecto ) 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 statusTexta sus valores iniciales Nota: No se permiten las llamadas a dominios, puertos o protocolos diferentes al de la pgina que llama la funcin Frecuentemente se utiliza metodo GET para permitir al navegador guardar datos en cache y POST para obligar a descargar los datos de nuevo. La URL puede contener un usuario y una contrasea que se usarn en cada conexin y tendrn preferncia ante los pasados por parmetro a la funcin. Los parametrossUsuario y sPwd solo se usarn para enviarlos si se recibe una respuesta 401 - Access Denied mientras que por URL se usarn siempre. Por definicin deberemos usar modo asncrono para que podemos llamarlo AJAX Para realizar la conexin deberemos usar senddespues de open ArribaEjemplo Vamos realizar una conexin para descargar index.htm. 000 <script language="JavaScript"> 001 <!-002 // creamos el objeto 003 oXMLHttp = new XMLHttpRequest(); 004 // pedimos la pgina en modo sncrono 005 oXMLHttp.open('get', 'index.htm', false); 006 // enviamos los datos 007 oXMLHttp.send(); 008 --> 009 </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Send
El mtodo send enva la peticin con los datos pasados por parmetro como cuerpo de la peticin a travs del objeto XMLHttpRequest. ArribaTabla de contenido y y Utilizacin Ejemplo

ArribaUtilizacin oXMLHttpRequest.send( mData ); oXMLHttpRequest - Objeto XMLHttpRequest oData - Cuerpo de la peticin HTTP. El parametrooData puede ser una referncia al DOM de un documento o una cadena de caracteres. Nota: Se recomienda pasar siempre el parametrooData aunque no sea requerido en algunos navegadores ArribaEjemplo Vamos realizar una conexin para descargar index.htm. 000 <script language="JavaScript"> 001 <!-002 // creamos el objeto 003 oXMLHttp = new XMLHttpRequest(); 004 // pedimos la pgina en modo sncrono 005 oXMLHttp.open('get', 'index.htm', false); 006 // enviamos los datos 007 oXMLHttp.send(); 008 --> 009 </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

setRequestHeader El mtodo setRequestHeader aade un encabezado HTTP a la peticin HTTP a travs del objeto XMLHttpRequest. ArribaTabla de contenido y y Utilizacin Ejemplo

ArribaUtilizacin oXMLHttpRequest.setRequestHeader( sNombre, sValor); oXMLHttpRequest - Objeto XMLHttpRequest sNombre - Nombre del encabezado HTTP. sValor - Valor del encabezado HTTP. El parametrosNombre 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. El parametrosValor no podr contener saltos de lnea. Solo podemos utilizar setRequestHeader cuando el valor de readyState sea 1. ArribaEjemplo Vamos a aadir el encabezado UserAgent a nuestra peticin XMLHttpRequest: 000 <script language="JavaScript"> 001 <!-002 // creamos el objeto

003 oXMLHttp = new XMLHttpRequest(); 004 // aadimos el encabezado 005 oXMLHttp.setRequestHeader('User-Agent', 'AJAX'); 006 // pedimos la pgina en modo sncrono 007 oXMLHttp.open('get', 'index.htm', false); 008 // enviamos los datos 009 oXMLHttp.send(); 010 --> 011 </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

CREACIN DEL OBJETO HMLXttpRequest

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 XMLHTTP', por lo tanto , cuando creemos el objeto de comunicacin con el servidor deberemos tener en cuenta el navegador con el que trabaja nuestro usuario. Adems, teniendo en cuenta que es posible que algunos usuarios accedan con un navegador sin JavaScript o con una versin pobre del mismo, en caso de que el objeto no pueda crearse de ninguna de la dos maneras, deberemos indicarlo al usuario o mejor todava, dirigirlo a una versin tradicional de la aplicacin (sin AJAX). 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. 000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 <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></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Ahora, llamaremos a la funcin AJAXCrearObjeto de la siguiente manera para obtener el objeto que utilizaremos ms adelante:

000 <script> 001 oXML = AJAXCrearObjeto(); 002 </script></CODE<code>

Maximizar Seleccionar SCRIPT,XML

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 que explicaremos en la referncia del mtodo open, la peticin sncrona y la asncrona, pero por definicin AJAX utiliza comunicacin asncrona que es la que explicaremos en este artculo. ArribaTabla de contenido y y Realizar la peticin al servidor Paso de parmetros

ArribaRealizar 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. Para nuestro primer ejemplo vamos a pedir un documento de texto: 000 001 002 003 004 005 006 007 008 009 <script> // Creamos el objeto oXML =AJAXCrearObjeto(); // Preparamos la peticin oXML.open('GET', 'archivo.txt'); // Preparamos la recepcin oXML.onreadystatechange = leerDatos; // Realizamos la peticin oXML.send(''); </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Para que esto funcione, tendremos que haber declarado la funcin leerDatos para tratar los datos recibidos del servidor y mostrarlos al usuario, pero esto lo veremos ms adelante. ArribaPaso de parmetros En la peticin AJAX podemos pasar parmetros tanto por POST como por GET a nuestro servidor. Para pasar parmetros por GET ( por URL ) , usaremos una URL con parametros en la funcin open independientemente de usar el mtodo GET o POST, por ejemplo: 000 <script>

001 002 003 004 005 006 007 008 009 010 011

// Creamos la variable parametro parametro = 'Datos pasados por GET'; // Creamos el objeto oXML = AJAXCrearObjeto(); // Preparamos la peticin con parametros oXML.open('GET', 'pagina.php?parametro=' + escape(parametro)); // Preparamos la recepcin oXML.onreadystatechange = leerDatos; // Realizamos la peticin oXML.send(''); </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Para pasarlos por POST, deberemos usar el mtodo POST en la funcin open y pasar los parmetros desde la funcin send, veamos un ejemplo: 000 001 002 003 004 005 006 007 008 009 010 011 <script> // Creamos la variable parametro parametro = 'Datos pasados por POST'; // Creamos el objeto oXML = AJAXCrearObjeto(); // Preparamos la peticin con parametros oXML.open('POST','pagina.php'); // Preparamos la recepcin oXML.onreadystatechange = leerDatos; // Realizamos la peticin oXML.send( 'parametro=' + escape(parametro)); </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Nota: Siempre que enviemos parmetros, ser conveniente preparar los datos prviamente usando la funcin escape.</DIV<td>

RECIBIR LA PETICIN AJAX

Vamos a ver como recibir la peticin realizada en el captulo anterior de este curso de AJAX, recordamos que habamos hecho una peticin indicando que cuando cambie el estado de la misma, se ejecute la funcin leerDatos, a continuacin vamos a ver cmo hacer esta funcin. Lo primero que haremos ser comprobar el estado de la peticin y lo haremos con el mtodo readyState que nos puede devolver cualquiera de los siguientes valores: 0 (No inicializado) - Los datos de la peticin no se han definido 1 (Abierto) - La recepcin de datos est en curso 2 (Cargado) - La recepcin de datos ha finalizado pero los datos no estn disponibles 3 (Interactive) - El objeto an no est listo para otra peticin pero ha recibido ya los datos. 4 (Completado) - El objeto est listo para otra peticin Y una vez estamos en estado cargado, ya podemos leer el texto recibido usando el mtodo responseText, veamos un ejemplo: 000 function leerDatos(){ 001 if (oXML.readyState == 4) { 002 alert (oXML.responseText);

003 } 004 }
Maximizar Seleccionar SCRIPT

Ahora vamos a ver el primer ejemplo completo de AJAX usando lo que hemos aprendido en este artculo y los dos anteriores de este mismo curso: 000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 <script> function leerDatos(){ if (oXML.readyState == 4) { alert (oXML.responseText); } } 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; } oXML = AJAXCrearObjeto(); oXML.open('GET', 'archivo.txt'); oXML.onreadystatechange = leerDatos; oXML.send(''); </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Podis ejecutar este ejemplo o descargarlo para modificarlo y probarlo libremente en vuestro ordenador

LA RESPUESTA AJAX Por definicin, AJAX utiliza XML para organizar los datos transmitidos entre el servidor y el navegador, para que el navegador sea capaz de interpretar estos datos, tendr que identificarlos cmo XML y su contenido tendr que ser un XML vlido, o de lo contrario, los datos no sern utilizables. ArribaTabla de contenido y Los encabezados y PHP y Perl y ASP y JSP El contenido

ArribaLos encabezados El primer paso para que el navegador interprete el contenido recibido es que tenga el encabezado de contenido XML (text/xml), esto lo conseguimos enviando desde el servidor el siguiente encabezado HTTP: 000 Content-Type: text/xml
Maximizar Seleccionar

Adems, cmo nuestra respuesta XML ser habitualmente generada de manera dinmica, es recomendable enviar tambin encabezamientos de control de cach para asegurarnos que la aplicacin siempre estar trabajando con los contenidos que solicita y no con una cache almacenada en su navegador: 000 Cache-Control: no-cache, must-revalidate 001 Expires: Mon, 26 Jul 1997 05:00:00 GMT
Maximizar Seleccionar

Veamos cmo mandar estos encabezados con diferentes lenguajes de programacin de lado de servidor, generalmente deberemos poner estos cdigos al principio del todo del documento: ArribaPHP

000 001 002 003 004

<?php header("Content-Type: text/xml"); header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); ?></CODE<code>
Maximizar Seleccionar PHP

ArribaPerl

000 001 002 003

#!/usr/bin/perl print "Content-Type: text/xml"; print "Cache-Control: no-cache, must-revalidate"; print "Expires: Mon, 26 Jul 1997 05:00:00 GMT";
Maximizar Seleccionar CMD

ArribaASP

000 001 002 003 004

<% response.ContentType="text/xml" response.CacheControl="no-cache, must-revalidate" response.Expires="Mon, 26 Jul 1997 05:00:00 GMT" %></CODE<code>
Maximizar Seleccionar ASP

ArribaJSP

000 001 002 003 004 005

<% response.setHeader("Content-Type", "text/html;charset=windows1252"); response.setHeader("Expires", "Mon, 01 Jan 2001 00:00:01 GMT"); response.setHeader("Cache-Control", "must-revalidate"); response.setHeader("Cache-Control", "no-cache"); %></CODE<code>
Maximizar Seleccionar ASP

ArribaEl contenido Cuando el navegador recibe el contenido en XML, lo analizara para estructurar los datos recibidos para que podamos tratarlos desde nuestra aplicacin, para que esto funcione, el contenido del documento deber ser XML vlido y por lo tando, deber empezar con la declaracin de versin: 000 <?xml version="1.0"?>
Maximizar Seleccionar PHP

</CODE<code>

Nota: Debeis tener cuidado con la declaracin de XML cuando trabajais con archivos PHP, porque PHP interpreta <? como inicio de su cdigo cuando tiene las short tags activadas. Seguidamente podremos enviar los datos en formato XML correcto (podeis ver el curso de XML o podeis utilizar el validador de XML del consorcio W3C), veamos un ejemplo: 000 <?xml version="1.0"?> 001 <xml> 002 <mensaje> 003 <color>#000000</color> 004 <texto>Texto del mensaje</texto> 005 </mensaje> 006 </xml></CODE<code>
Maximizar Seleccionar XML,PHP

TRATAMIENTO DE LA RESPUESTA DE AJAX Una vez recibida la peticin AJAX debemos saber interpretar los datos XML recibidos usando JavaScript, para ello, utilizaremos responseXML en lugar de responseText, y podremos empezar a parsear el XML recibido: 000 001 002 003 004 005 006 007 <script> function leerDatos(){ if (oXML.readyState == 4) { var xml = oXML.responseXML.documentElement; // ... } } </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Los ejemplos de este artculo los haremos pensando en el siguiente xml:

000 001 002 003 004 005 006 007 008 009

archivo.xml <?xml version="1.0" encoding="UTF8" standalone="yes"?> <xml> <mensaje> <texto>Ejemplo 1</texto> </mensaje> <mensaje> <texto>Ejemplo 2</texto> </mensaje> </xml> </CODE<code>
Maximizar Seleccionar XML,PHP

ArribaTabla de contenido y y y Acceso a un elemento XML Acceso al texto de un elemento Ejemplo completo

ArribaAcceso a un elemento XML A partir de este momento, la variable xml( responseXML.documentElement ) ser una referencia al documento XML recibido, y nos permitir el acceso a los datos enviados por el servidor en forma de documento XML usando DOM. Nota: Para poder tratar los datos recibidos es importante conocer DOM. Antes de continuar puedes consultar estos enlaces: Introduccin al DOM Ms informacin sobre DOM Veamos un ejemplo de acceso a un elemento mensaje: 000 <script> 001 var item = xml.getElementsByTagName('mensaje')[0]; 002 </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

La funcin getElementsByTagName nos devuelve un array con todos los elementos con el nombre de tag indicado, en este caso sern los elementos <mensaje>. Podemos acceder a un elemento determinado poniendo un nmero entre parentesis cuadrados (en el ejemplo accediamos al 0) o usar un bucle para recorrer todos los elementos: 000 001 002 003 004 <script> for (i = 0; i < xml.getElementsByTagName('mensaje').length; i++){ var item = xml.getElementsByTagName('mensaje')[i]; } </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Podremos tambin acceder a un subelemento de la misma manera: 000 001 002 003 <script> var item = xml.getElementsByTagName('mensaje')[0]; var txt = item.getElementsByTagName('texto')[0]; </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

ArribaAcceso al texto de un elemento Para acceder al texto entre las etiquetas <texto> y </texto> usaremos firstChild.data sobre el elemento: 000 001 002 003 004 <script> var item = xml.getElementsByTagName('mensaje')[0]; var txt = item.getElementsByTagName('texto')[0]; alert(txt.firstChild.data) </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

ArribaEjemplo completo Este es el archivo del ejemplo que podeis ejecutar aqu y que utiliza lo explicado en este artculo para parsear el XML anterior: index.html <html> <head> <title>ProgramacinWeb - Ejemplo</title> <script> function leerDatos(){ if (oXML.readyState == 4) { var xml = oXML.responseXML.documentElement; for (i = 0; i < xml.getElementsByTagName('mensaje').length; i++){ var item = xml.getElementsByTagName('mensaje')[i]; var txt = item.getElementsByTagName('texto')[0].firstChild.data; alert(txt); } } } 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; }

000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028

029 030 031 032 033 034 035

oXML = AJAXCrearObjeto(); oXML.open('get', 'archivo.xml'); oXML.onreadystatechange = leerDatos; oXML.send(''); </script> </head> </html></CODE<code>
Maximizar Seleccionar SCRIPT,XML

MOSTRAR LOS DATOS AL USUARIO

Una vez hemos recibido y conocemos los datos que necesitamos del servidor, deberemos mostrarlos al usuario de alguna manera. En la mayora de casos, lo que nos interesa, no es mostrar estos datos en un mensaje emergente usando la funcin alert( cmo hemos visto en los ejemplos anteriores de este curso), sino que queremos mostrar los datos en la misma pgina que est viendo el usuario sin usar refresco. ArribaTabla de contenido y y Dnde mostramos los datos? Como mostramos los datos?

ArribaDnde mostramos los datos? Para mostrar estos datos, necesitamos un objeto HTML al que le podamos modificar su contenido de manera que el usuario pueda verlo. Normalmente aunque no siempre, usaremos un objeto div al que le podremos modificar su contenido usando el atributo innerHTML: 000 <div id="miDiv1">Aqu aparecern los datos</div></CODE<code>
Maximizar Seleccionar XML

ArribaComo mostramos los datos? Para mostrar los datos que hemos obtenido en el div que hemos creado, primero accederemos al objeto a travs de su id ( miDiv1 en el ejemplo) usando el mtodo getElementById y luego podremos usar innerHTML para indicarle el contenido en formato HTML que tendr este div en su interior: 000 001 002 003 004 005 <script> // Accedemos al DIV con getElementById miDiv = document.getElementById('miDiv1'); // Modificamos su contenido miDiv.innerHTML = '<b>Este es el nuevo contenido</b>'; </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

La manera como pasaremos los datos recibidos del servidor al div, depender de cada caso, pero vamos a ver un ejemplo que puede ser til, imaginemos que tenemos esta lista de usuarios en XML:

usuarios.xml 000 <?xml version="1.0" encoding="UTF001 8" standalone="yes"?> 002 <xml> 003 <usuario> 004 <id>1</id> 005 <nombre>Eloi</nombre> 006 </usuario> 007 <usuario> 008 <id>2</id> 009 <nombre>Pedro</nombre> 010 </usuario> 011 <usuario> 012 <id>3</id> 013 <nombre>Juan</nombre> 014 </usuario> </xml> </CODE<code>
Maximizar Seleccionar XML,PHP

Vamos a suponer que hemos pedido estos datos al servidor y que hemos indicado como readystatechangehandler la funcin leerDatos, como vimos en el artculo Recibir la peticin AJAX y vamos a centrarnos en el contenido de dicha funcin para que muestre una lista de usuarios con enlace a su perfil en el div que hemos creado con id miDiv1: 000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 <script> // Recibe y muestra los datos function leerDatos(){ // Comprobamos que se han recibido los datos if (oXML.readyState == 4) { // Accedemos al XML recibido var xml = oXML.responseXML.documentElement; // Accedemos al DIV var miDiv = document.getElementById('miDiv1'); // Vaciamos el DIV miDiv.innerHTML = ''; // Iteramos cada usuario for (i = 0; i < xml.getElementsByTagName('usuario').length; i++) { // Accedemos al objeto XML usuario var item = xml.getElementsByTagName('usuario')[i]; // Recojemos el id var id = item.getElementsByTagName('id')[0].firstChild.data; // Recojemos el nombre var nombre = item.getElementsByTagName('nombre')[0].firstChild .data; // Mostramos el enlace miDiv.innerHTML += '<a href="/perfil/'+id+'/">'+nombre+'</a><b r>'; } } } </script></CODE<code>
Maximizar Seleccionar SCRIPT,XML

Podeisejecutar este ejemplo y ver su cdigo fuente para ver como se muestran los datos en la pantalla al cargar la pgina

IMPLEMENTACIONES AJAX Existen muchas implementaciones de AJAX muy interesantes que podemos encontrar por Internet y nos facilitarn el desarrollo de aplicaciones con comunicacin con el servidor. Vamos a hacer una lista de las que consideramos ms interesantes, las ordenaremos en dos grupos libreras de cliente y libreras de cliente/servidor: ArribaTabla de contenido y y Libreras de cliente Libreras de cliente/servidor

ArribaLibreras de cliente Estas nos permiten trabajar fcilmente con llamadas al servidor y tratar los datos recibidos, la ventaja de estas es que no dependen de un lenguaje de servidor pero por esta misma razn suelen integrarse peor. prototype - Esta interesante librera de JavaScript dispone de ( entre otros ) la clase Ajax, que nos facilitarn muchisimo el trabajo en AJaX ArribaLibreras de cliente/servidor Este tipo de libreras nos permite hacer llamadas a funciones del servidor desde el cliente usando unas funciones JavaScript autogeneradas a las que llamaremos proxies. Ajax.NET Professional - Conocido como AjaxPro nos permite crear una proxy para llamar a mtodos .Net del servidor desde JavaScript. xaJax - xaJax es un framework (marco de trabajo) escrito en PHP de cdigo abierto que permite crear fcilmente aplicaciones web que utilizan AJaX XOAD - XOAD es un proxy de PHP usando XMLHttpRequest y JSON En los prximos captulos hablaremos sobre alguna de estas libreras, si no te interesa puedes pasar al cuestionario de AJaX

PROTOTYPE FUNCIONES AJAX Las funciones Ajax de Prototype, simplifican la comunicacin Ajax con el servidor y la insercin de los datos recibidos en el documento actual. ArribaTabla de contenido y y Lista de opciones: Lista de clases:

ArribaLista de opciones: Los constructores de las clases prototype que describimos a continuacin pueden recibir las siguientes opciones: asynchronous ( true | false ) - Realizar la peticin en modo sncrono o asncrono, por defecto true contentType ( string ) - Tipo mime de la peticin, por defecto 'application/x-www-form-urlencoded'

encoding ( string ) - Codificacin de caracteres de la peticin, por defecto 'UTF-8' method ( string ) - Mtodo de la peticin ( 'GET' o 'POST' ) parameters ( stringo objeto ) - Parmetros como string tipo '?num=1&page=0' o tipo { 'num':1, 'page':0 } postBody ( string ) - Cuerpo de la peticin en caso de usar method'POST' . requestHeaders ( array u objeto ) - Parmetros HTTP adicionales de la peticin como array u objeto tipo { 'Accept':'text/javascript' } Eventos ( funcin ) - Eventos sobre la peticin: onComplete, onException, onFailure, onInteractive, onLoaded, onLoading, onSuccess, onUninitialized y onNNN ( donde NNN es un HTTP Status Code ) ArribaLista de clases: claseAjax.PeriodicalUpdater Realiza cada N segundos una peticin AJAX y rellena el elemento HTML indicado con la respuesta recibida. Los parmetros del constructor son: 1 - ID del elemento HTML a rellenar 2 - URL de la peticin 3 - Opciones de la lista de opciones anterior y estas dos especficas: frequency ( entero ) - Tiempo en segundos entre peticiones decay ( entero ) - El valor de frequency se multiplica por este cada vez que se recibe una respuesta sin modificaciones respecto a la anterior. 000 new Ajax.PeriodicalUpdater('idMiElemento', '/elementos.php', { 001 method: 'get', frequency: 3, decay: 2 002 });
Maximizar Seleccionar

claseAjax.Request Realiza una peticin AJAX. Los parmetros del constructor son: 1 - URL de la peticin 2 - Opciones de la lista de opciones anterior. 000 new Ajax.Request( '/elementos.php' , { 001 method: 'get', 002 onSuccess: function(transport) { 003 alert ( transport.responseText ) ; 004 } 005 });
Maximizar Seleccionar SCRIPT

funcinAjax.Responders.register Permite registrar eventos comunes que se lanzarn cuando se produzca un determinado evento para cualquier peticin. Los parmetros del constructor son: 1 - URL de la peticin 2 - Opciones de la lista de opciones anterior.

000 canalesAjax = 0; 001 Ajax.Responders.register({ 002 onCreate: function() { 003 canalesAjax++; 004 alert ( canalesAjax ) ; 005 }, 006 onComplete: function() { 007 canalesAjax--; 008 } 009 });
Maximizar Seleccionar SCRIPT

funcinAjax.Responders.unregister Cancela un evento registrado con Ajax.Responders.register clase Ajax.Updater Realiza una peticin AJAX y rellena el elemento HTML indicado con la respuesta recibida. Los parmetros del constructor son: 1 - ID del elemento HTML a rellenar 2 - URL de la peticin 3 - Opciones de la lista de opciones anterior y estas dos especficas: evalScripts ( true | false ) - Ejecutar los <script> recibidos en la peticin. insertion ( objeto Insertion ) - Si se especifica, en lugar de reemplazar el contenido de 1 inserta los datos en la posicin indicada por el objeto. 000 new Ajax.Updater('idMiElemento', '/elementos.php', { 001 method: 'get', 002 insertion: Insertion.Bottom 003 });
Maximizar Seleccionar

Xajax INTRODUCCIN xaJax es un framework (marco de trabajo) escrito en PHP de cdigo abierto que permite crear fcilmente aplicaciones web que utilizan AJaX sin necesidad siquiera de conocer JavaScript (aunque s que hay la posibilidad de hacer funciones en este lenguaje). Puedes bajarte el zip desde aqu. ArribaTabla de contenido y y y Qu permite hacer? Instalacin del zip Recursos y Enlaces

ArribaQu permite hacer? En una aplicacin AJaX, el servidor crea una pgina que es enviada al cliente. ste interactua con la pgina (rellena formularios, hace clic en ciertos objetos) que disparan ciertos eventos (onclick, onchange...) que llaman a funciones JavaScript. Estas funciones pueden o no interactuar con el servidor (usando AJaX) y recibiendo informacin de ste, mostrndola al usuario cambiando el contenido de la misma pgina.

Este tipo de pginas resultan muy tiles y son uno de los pilares de la Web 2.0. An as, realizar un proyecto AJaX puede resultar muy costoso y largo; pero no siempre es as. xaJax te permite escribir funciones en PHP que pueden ser accedidas cuando ya la pgina ha estado enviada al navegador, cuando el usuario ha disparado un evento o la funcin PHP ha sido llamada desde JavaScript. stas funciones PHP modifican el contenido o el aspecto de la pgina, como lo podra hacer JavaScript, pero repito que se hacen desde PHP, lo que abre un abanico de posibilidades: PHP puede acceder a bases de datos, al sistema de archivos... Y todo sin recargar la pgina!!! ArribaInstalacin del zip Para instalar la librera xaJax, debes abrir el zip que te descargas de la web de xaJax y descomprimirlo conservando la estructura de las carpetas. Descomprmelo den de la carpeta donde tienes la web en servidor local o remoto y cambiale el nombre de la carpeta (normalmente el nombre xajax seguido del nombre de la versin) por solamente xajax. La versin 0.2 del zip consta de tres scripts PHP: xajax.inc.php, que contiene la clase xajax, xajaxResponse.inc.php, que contiene la clase xajaxResponse, y xajaxCompress.php, que es una utilidad para, de cierta manera, reducir el peso de un archivo JavaScript. Contiene tambin, en la carpeta xajax_js, dos archivos .js; uno que contiene el cdigo original (el xajax_uncompressed.js) y otro que es el que est comprimido y es el que se usa para enviar al navegador (el xajax.js). Adems de eso, tambin incorpora dos archivos .txt (la licencia y el readme) y dos carpetas ms (examples, con ejemplos de utilizacin y tests, donde puedes probar xaJax). [/h1]Funcionamiento[/h1]Lo nico que hay que hacer es hacer un require_once() al xajax.inc.php de la carpeta donde lo has instalado en el servidor, local o remoto, y jugar con las posibilidades que te brindan los dos objetos: xajax y xajaxResponse (ste integrado dentro de la funcin PHP). Como he dicho antes, xaJax permitir a una funcin JavaScript recibir una respuesta de una funcin del servidor. Dicha respuesta estar en formato XML (como es habitual en AJaX) y ser interpretada por la misma funcin JavaScript que realizar los cambios en la pgina que se le piden. As, la respuesta (en formato XML) dar unas instrucciones especficas tales como crea una etiqueta div aqu, dale este formato y ponle este texto, elimina la etiqueta con el id tal, o haz que se ejecute esta funcin JavaScript. De cierta manera, el objeto xajaxResponse contiene la respuesta que realiza la funcin PHP y el objeto xajax es el que recibe las peticiones de que se ejecuten las funciones, el que las gestiona, al igual que todas las respuestas, y el que envia las respuestas en XML de vuelta al navegador. Por lo tanto, podemos distinguir dos partes en una pgina basada en xaJax: una parte sera todo el cdigo php que contiene las funciones y los objetos xajax y xajaxResponse (adems de todo el cdigo necesario para que la web tenga un entorno dinmico) y otra parte que sera todo lo que se ejecuta en el navegador. Aqu tienes los tres artculos que derivan de este: Funciones PHP en xaJax (lado del servidor) El objeto xaJax (lado del servidor) xaJax en el lado del cliente ArribaRecursos y Enlaces http://www.xajaxproject.org/ Web oficial, donde puedes descargar http://wiki.xajaxproject.org/Documentation Documentacin http://jvelazqu.glo.org.mx Traduccin de un tutorial de la pgina oficial

el

zip

(ingls). (ingls).

XAJAX FUNCIONES Las funciones xaJax son funciones escritas en PHP que son llamadas desde JavaScript. Estas funciones tienen dos objetivos: interactuar con el servidor (por eso se ha llamado a sta funcin, para crear un usuario nuevo, para examinar los archivos que hay en un directorio...) y devolver una respuesta XML que ser enviada al navegador y interpretada por JavaScript. Esta respuesta ser hecha por el objeto xajaxResponse, el que se configurar con mtodos y crear el XML que ser enviado al navegador. El constructor del xajaxResponse consta de dos argumentos: la codificacin (por defecto utf-8) y un booleano que si es true muestra los caracteres especiales en el navegador y si es false los oculta (por defecto, los oculta). El xajaxResponse ser el encargado de, una vez configurado por nosotros a partir de mtodos, crear una respuesta XML. ste XML ser el que tendr de ser devuelto al navegador, y interpretado por el JavaScript. As que ya podemos hacer el esquema de una funcin xaJax: 000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 function esquema(arg1, arg2...){ // Aqu ira el cdigo destinado a realizar el primer objetivo // de una funcin xaJax, el de interactuar con el servidor // actuando con los argumentos de la funcin o lo que haga falta. // Se crea un nuevo objeto xajaxResponse al que se le podran / pasar como atributos la codificacin y el valor booleano que // comentbamos antes. $respuesta = new xajaxResponse(); // Aqu ira el cdigo para modificar y configurar el objeto, y // al mismo tiempo el XML // Y finalmente retornamos la respuesta XML. return $respuesta->getXML();
Maximizar Seleccionar

Nota: Desde la versin 0.2, no hace falta llamar al mtodo getXML() para retornar, tan solo hace falta retornar el objeto xajaxResponse poniendo en este caso return $respuesta;

El cdigo para modificar el xajaxResponse y en consecuencia la respuesta XML, est todo basado en mtodos del mismo objeto. Todos aaden un comando al XML que ser interpretado y ejecutado en el navegador por JavaScript. stos comandos (escritos por mtodos) permiten cantidad de cosas, todas orientadas a cambiar el aspecto de la pgina. En las siguientes pginas de ste artculo hay una lista de todos los mtodos que los escriben (en la versin 0.2).

XAJAX FUNCIONES PHP

Tabla de contenido

y y y y

Mtodos de Creacin Mtodos de Eliminacin Mtodos de Modificacin Mtodos de Adicin de Eventos

ArribaMtodos de Creacin Los mtodos de creacin permiten crear una etiqueta dentro del rbol de etiquetas HTML. sto se puede conseguir con el mtodo addCreate($id_etiqueta_superior, $etiqueta, $id), que crear una etiqueta del tipo $etiqueta dentro de la etiqueta especificada por $id_etiqueta_superior y con el id $id. Existe otro mtodo, el addInsert($id_etiqueta_anterior, $etiqueta, $id), que funciona exactamente igual que el addCreate, pero ste, en lugar de crear una etiqueta $etiqueta dentro de $id_etiqueta_superior, la crea ANTES de la etiqueta con el id $id_etiqueta_anterior. Pongamos un ejemplo. Imagnate que tenemos en la pgina una etiqueta <div> con el id etiqueta1. 000 <div id=etiqueta1 /></CODE<code>
Maximizar Seleccionar XML

Si aplicamos el mtodo addCreate(etiqueta1, div, etiqueta2), el resultado ser ste: 000 <div id=etiqueta1> 001 <div etiqueta2 /> 002 </div></CODE<code>
Maximizar Seleccionar XML

Pero si usamos en lugar de addCreate, addInsert(etiqueta1, div, etiqueta2), el resultado sera ste otro: 000 <div id=etiqueta2 /> 001 <div id=etiqueta1 /></CODE<code>
Maximizar Seleccionar XML

As que addCreate subordinara la etiqueta que crea a la que indica en su primer argumento, y addInsert la pondra al mismo nivel. De stas dos, derivan otras, como puede ser addInsertAfter($id_etiqueta_posterior, $etiqueta, $id), parecida al addInsert pero en lugar de crear la etiqueta ANTES de la que indica su primer argumento, la crea DESPUES. Y derivan tambin addCreateInput($id_etiqueta_superior, $type, $nombre, $id), addInsertInput($id_etiqueta_anterior, $type, $nombre, $id) y addInsertInputAfter($id_etiqueta_posterior, $type, $nombre, $id) para crear etiquetas del tipo input. A stas se les aplican los atributos type = $type y name = $nombre. <>

Mtodos de Eliminacin

De mtodos para eliminar una tag slo hay uno, el addRemove($id) y tan slo se le ha de pasar como argumento el id de la etiqueta a eliminar. ArribaMtodos de Modificacin Los mtodos de modificacin permiten cambiar el contenido (texto) o un atributo de una etiqueta. En primer lugar tenemos el addAssign($id, $atributo, $datos), que reemplaza todo el contenido de un atributo ($atributo) de una etiqueta (con el id $id) por el texto $data. As que si se quiere modificar el contenido de una capa <div> o un pargrafo <p>, tan slo has de pasar por $id el del pargrafo o la capa, por innerHTML el $atributo y como el texto nuevo el $datos. Veamos un ejemplo. Tenemos una div con id etiqueta3. 000 <div id=etiqueta3 /></CODE<code>
Maximizar Seleccionar XML

Si la modificamos desde una funcin xaJax con una respuesta a la que se le ha aplicado el mtodo addAssign(etiqueta3, innerHTML, ste es el contenido de la capa), entonces sta capa se cambiar y ser: 000 <div id=etiqueta3>ste es el contenido de la capa</div></CODE<code>
Maximizar Seleccionar XML

Y si le queremos poner la anchura (width) al 25%, llamaramos a una funcin que devuelva una respuesta que haya sido modificada por el mtodo addAssign(etiqueta3, style.width, 25%). El resultado es este. 000 <div id=etiqueta3style=width:25%>ste es el contenido de la capa</div> </CODE<code>
Maximizar Seleccionar CSS,XML

Hay otros mtodos que no reemplazan sino que aaden texto al que ya hay actualmente. Se trata de los mtodos addAppend($id, $atributo, $datos) y addPrepend($id, $atributo, $datos). El mtodo addAppend aade texto al fin del texto que ya hay en la etiqueta con id $id y addPrepend lo aade antes de ste. El mtodo addReplace($id, $atributo, $texto_a_buscar, $texto_a_reemplazar) permite, en el atributo $atributo de la etiqueta con el id $id[i], reemplazar el texto [i]$texto_a_buscar por el texto $texto_a _reemplazar. Y finalmetne el mtodo addClear($id, $atributo) borra el contenido de un attributo ($atributo) o del contenido (poniendo por $atributoinnerHTML) de una etiqueta (con id $id). Es lo mismo que hacer un addAssign($id, $atributo, ). Nota: Que a nadie se le ocurra, bajo ningn concepto, utilizar una funcin xaJax simplemente para cambiar el ancho o algn atributo de una etiqueta como lo hago yo en estos ejemplos. sto se puede hacer perfectamente desde JavaScript y por supuesto no hace falta hacer una llamada al servidor para realizar una cosa como stas. El servidor servir para recibir informacin, y si se puede modificar algn atributo es simplemente para adecuar la pgina a la nueva informacin. <>