Curso Ajax

Tomado de: http://www.programacionweb.net/cursos/curso.php?
num=2
1 de 56
Que es ajax Otros (Articulos) | 04/10/05 | Versiones Segn wikipedia AJAX (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. Tecnologas 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. Funcionamiento 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.
Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2
2 de 56
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. Problemas 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. Ejemplos 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...
3 de 56
El objeto XMLHttpRequest JavaScript (Articulos) | 25/05/06 | Versiones 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. Metodos y atributos Atributos: onreadystatechange readyState responseText responseXML status statusText Metodos: abort getAllResponseHeaders getResponseHeader open send setRequestHeader
4 de 56
onreadystatechange (atributo) JavaScript (Articulos) | 26/05/06 | Versiones El atributo onreadystatechange asigna la funcin que se ejecutar cada vez que readyState cambie de valor. Utilizacin 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. Ejemplo Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest previamente haremos que nos alerte el estado del objeto (readystate) cada vez que este cambie.
Pantalla Completa Colorear
000 001 002 003 004 005 006 007 008
<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>
5 de 56
readyState (atributo) JavaScript (Articulos) | 26/05/06 | Versiones El atributo readyState devuelve el estadoactual del objeto XMLHttpRequest, cada vez que cambia el valor de readyState se lanza la funcion 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 punto oXMLHttpRequest - Objeto XMLHttpRequest La propiedad readyState se utiliza en todas las comunicaciones asncronas para comprovar que podemos acceder ya a atributos como responseXML y responseText, slo accesibles en los estados 3 y 4. Ejemplo Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest 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>
6 de 56
responseText (atributo) JavaScript (Articulos) | 26/05/06 | Versiones El atributo 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 Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest 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>
7 de 56
responseXML (atributo) JavaScript (Articulos) | 27/05/06 | Versiones El atributo responseXML devuelve una referencia al cuerpo del documento descargado del servidor en una peticin con XMLHttpRequest en formato XML. Utilizacin 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. Ejemplo Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest 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>
8 de 56
status (atributo) JavaScript (Articulos) | 28/05/06 | Versiones El atributo statusText 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 (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.
Ejemplo Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest mostramos un error cuando la conexin no ha sido satisfactoria.
000 001 002 003 004 005 006
<script language="JavaScript"> // Comparamos el estado if ( oXMLHttpRequest.status != 200 ) { // Mostramos un mensaje de error alert ( 'Ha sucedido un error con la conexion' ); } </script>
9 de 56
statusText (atributo) JavaScript (Articulos) | 28/05/06 | Versiones El atributo 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). El texto de estado HTTP para una transmisin correcta es 'OK'. Ejemplo Habiendo creado el objeto XMLHttpRequest oXMLHttpRequest mostramos el texto de estado.
000 001 002 003 004
<script language="JavaScript"> // Comparamos el estado alert ( oXMLHttpRequest.statusText ); } </script>
10 de 56
abort (metodo) JavaScript (Articulos) | 30/05/06 | Versiones El mtodo abort detiene todas las conexiones asncronas abiertas por el objeto XMLHttpRequest lo y 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. Ejemplos Vamos a crear un botn para que el usuario pueda detener en cualquier momento la comunicacin a travs del objeto oXMLHttpRequest previamente creado.
000  001 <input type="button" value="Detener" 002 action="oXMLHttpRequest.abort ();" />
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>
11 de 56
getAllResponseHeaders (metodo) JavaScript (Articulos) | 01/06/06 | Versiones 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'. 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). Ejemplo Vamos a mostrar en un alert todos los encabezados 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.getAllResponseHeaders()); --> </script>
12 de 56
getResponseHeader (metodo) JavaScript (Articulos) | 08/06/06 | Versiones 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'. 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). Ejemplo 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>
13 de 56
open (metodo) JavaScript (Articulos) | 15/06/06 | Versiones 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 ( 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 statusText a 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 parametros sUsuario 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 send despues de open Ejemplo Vamos realizar una conexin para descargar index.htm.
000 <script language="JavaScript"> <!-001 // creamos el objeto oXMLHttp = new XMLHttpRequest(); 002 // pedimos la pgina en modo sncrono oXMLHttp.open('get', 'index.htm', false); 003 // enviamos los datos oXMLHttp.send(); 004 --> </script>
14 de 56
005 006 007 008 009
send (metodo) JavaScript (Articulos) | 20/06/06 | Versiones 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. Nota: Se recomienda pasar siempre el parametro oData aunque no sea requerido en algunos navegadores Ejemplo 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>
15 de 56
setRequestHeader (metodo) JavaScript (Articulos) | 22/06/06 | Versiones 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, ContentLength, Expect, Date, Host, Keep-Alive, Referer, TE, Trailer, Transfer-Encoding ni Upgrade, tampoco podr contener espacios, puntos o saltos de lnea. El parametro sValor no podr contener saltos de lnea. Solo podemos utilizar setRequestHeader cuando el valor de readyState sea 1. Ejemplo 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>
16 de 56
Creacin del objeto XMLHttpRequest JavaScript (Articulos) | 05/10/05 | Versiones 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>
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>
17 de 56
Realizar una peticin con AJAX JavaScript (Articulos) | 26/06/06 | Versiones 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. 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. 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 = <a 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></a href=">
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. Paso 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>
18 de 56
001 002 003 004 005 006 007 008 009 010 011
// Creamos la variable parametro parametro = 'Datos pasados por GET'; // Creamos el objeto oXML = <a href=" articulos="" articulo="" ?num="323""">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></a href=">
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 = <a href=" articulos="" articulo="" ?num="323""">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></a href=">
Nota: Siempre que enviemos parmetros, ser conveniente preparar los datos prviamente usando la funcin escape.
19 de 56
escape (metodo) JavaScript (Articulos) | 26/06/06 | Versiones El mtodo escape devuelve la cadena pasada por parmetro con las transformaciones nescesrias para ser enviada en una transaccin HTTP. Utilizacin sCodificada = escape ( sDescodificada); sCodificada - Cadena preparada para ser enviada sDescodificada - Cadena antes de las transformaciones. La cadena sCodificada es devuelta en formato Unicode, todos los caracteres no ASCII ( signos de puntuacin, espacios, acentos... ) de sDescodificada sn sustituidos por su notacin %XX, donde XX es su equivalente hexadecimal. Ejemplo Vamos a codificar una cadena no ASCII:
000 <script language="JavaScript"> 001 <!-002 // creamos la cadena 003 cadena = "Hola! amigo"; 004 // codificamos 005 cadena = escape ( cadena ); 006 // alertamos los datos 007 alert ( cadena ); 008 // resultado: "Hola%21%20amigo" 009 --> 010 </script>
20 de 56
Recibir la peticin AJAX JavaScript (Articulos) | 27/10/05 | Versiones 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 }
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
<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; }
21 de 56
020 021 022 023 024
oXML = AJAXCrearObjeto(); oXML.open('GET', 'archivo.txt'); oXML.onreadystatechange = leerDatos; oXML.send(''); </script>
Podis ejecutar este ejemplo o descargarlo para modificarlo y probarlo libremente en vuestro ordenador
22 de 56
La respuesta AJAX HTML (Articulos) | 30/03/06 | Versiones 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. Los encabezados El primer paso para que el navegador interprete el contenido recivido 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
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
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: PHP
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"); ?>
Perl
000 #!/usr/bin/perl 001 print "Content-Type: text/xml";
23 de 56
002 print "Cache-Control: no-cache, must-revalidate"; 003 print "Expires: Mon, 26 Jul 1997 05:00:00 GMT";
ASP
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" %>
JSP
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"); %>
El 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"?>
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>
24 de 56
002 <mensaje> 003 <color>#000000</color> 004 <texto>Texto del mensaje</texto> 005 </mensaje> 006 </xml>
25 de 56
Tratamiento de la respuesta AJAX JavaScript (Articulos) | 04/04/06 | Versiones 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 recivido:
000 001 002 003 004 005 006 007
<script> function leerDatos(){ if (oXML.readyState == 4) { var xml = oXML.responseXML.documentElement; // ... } } </script>
Los ejemplos de este artculo los haremos pnsando en el siguiente xml:

archivo.xml
000 001 002 003 004 005 006 007 008 009
<?xml version="1.0" encoding="UTF8" standalone="yes"?> <xml> <mensaje> <texto>Ejemplo 1</texto> </mensaje> <mensaje> <texto>Ejemplo 2</texto> </mensaje> </xml>
Acceso 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:
26 de 56
Pantalla Completa
Colorear
000 <script> 001 var item = xml.getElementsByTagName('mensaje')[0]; 002 </script>
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>
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>
Acceso 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>
Ejemplo 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
27 de 56
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
<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; } oXML = AJAXCrearObjeto(); oXML.open('get', 'archivo.xml'); oXML.onreadystatechange = leerDatos; oXML.send(''); 2</script> </head> </html>
28 de 56
getElementsByTagName (metodo) JavaScript (Articulos) | 01/07/06 | Versiones El mtodo getElementsByTagName devuelve una lista de todos los subelementos del elemnto actual que tienen un nombre determinado. Utilizacin aElementos = getElementsByTagName ( sNombre); aElementos - Cadena de subobjetos del elemento. sNombre - Nombre de los elementos que sern devueltos. El parmetro sNombre puede contener una cadena de caracteres con el nombre de los elementos que queremos ( por ejemplo div ) o el caracter especial asterisco ( * ) si queremos que se nos devuelvan todos los nodos. Ejemplo Vamos a obtener el nmero elementos option de un campo select:
000 001 002 003 004 005 006 007 008 009 010 011
<select id="mi_select"> <option>1 <option>2 <option>3 </select> <script language="JavaScript"> <!-oSelect = document.getElementById("mi_select"); oItems = oSelect.getElementsByTagName("option"); alert('Opciones:' + oItems.length); --> </script>
29 de 56
Mostrar los datos al usuario JavaScript (Articulos) | 14/07/06 | Versiones 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. Dnde 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>
Como 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>
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>
30 de 56
005 006 007 008 009 010 011 012 013 014
<nombre>Eloi</nombre> </usuario> <usuario> <id>2</id> <nombre>Pedro</nombre> </usuario> <usuario> <id>3</id> <nombre>Juan</nombre> </usuario> </xml>
Vamos a suponer que hemos pedido estos datos al servidor y que hemos indicado como readystatechange handler 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 016 017 018 019 020 021 022 023 024
<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><br>'; } } } </script>
Podeis ejecutar este ejemplo y ver su cdigo fuente para ver como se muestran los datos en la pantalla al cargar la pgina.
31 de 56
Implementaciones de AJAX JavaScript (Articulos) | 09/03/07 | Versiones 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: Libreras 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 Libreras 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
32 de 56
Prototype - Funciones Ajax JavaScript (Articulos) | 16/04/07 | Versiones Las funciones Ajax de Prototype, simplifican la comunicacin Ajax con el servidor y la insercin de los datos recibidos en el documento actual. Lista 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-wwwform-urlencoded' encoding ( string ) - Codificacin de caracteres de la peticin, por defecto 'UTF-8' method ( string ) - Mtodo de la peticin ( 'GET' o 'POST' ) parameters ( string o 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 ) Lista de clases: clase Ajax.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 });
33 de 56
clase Ajax.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 });
funcin Ajax.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 });
funcin Ajax.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.
34 de 56
Pantalla Completa
Colorear
000 new Ajax.Updater('idMiElemento', '/elementos.php', { 001 method: 'get', 002 insertion: Insertion.Bottom 003 });
35 de 56
xaJax - Introduccin JavaScript (Articulos) | 14/03/07 | Versiones 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. Qu 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!!! Instalacin 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). Funcionamiento 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).
36 de 56
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
Recursos y Enlaces http://www.xajaxproject.org/ Web oficial, donde puedes descargar el zip (ingls). http://wiki.xajaxproject.org/Documentation Documentacin (ingls). http://jvelazqu.glo.org.mx Traduccin de un tutorial de la pgina oficial.
37 de 56
xaJax - Funciones PHP JavaScript (Articulos) | 18/03/07 | Versiones Antes de leerte ste artculo, sera interesante que te leyeras antes ste tutorial de cmo realizar una aplicacin xaJax en 10 minutos. Una vez ledo, puedes leerte ste que ampla en gran medida el del link. 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();
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
38 de 56
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).
39 de 56
xaJax - Funciones PHP JavaScript (Articulos) | 18/03/07 | Versiones Mtodos 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 />
Si aplicamos el mtodo addCreate(etiqueta1, div, etiqueta2), el resultado ser ste:

000 001 002
<div id=etiqueta1> <div etiqueta2 /> </div>
Pero si usamos en lugar de addCreate, addInsert(etiqueta1, div, etiqueta2), el resultado sera ste otro:
000 001
<div id=etiqueta2 /> <div id=etiqueta1 />
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
40 de 56
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.
41 de 56
xaJax - Funciones PHP JavaScript (Articulos) | 18/03/07 | Versiones 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. Mtodos 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 />
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>
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=etiqueta3 style=width:25%>ste es el contenido de la capa</div>
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
42 de 56
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 $atributo innerHTML) 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.
43 de 56
xaJax - Funciones PHP JavaScript (Articulos) | 18/03/07 | Versiones Mtodos de Interaccin con JavaScript sta es una coleccin de mtodos que ejecutan JavaScript. Empezaremos explicando el mtodo addScript($cdigo_javascript), que ejecuta el cdigo JavaScript que tiene como parmetro. El mtodo addScriptCall($funcin_javascript, $arg1, $arg2...), llama a una funcin JavaScript con el nombre $function_javascript y como argumentos los argumentos del segundo al ltimo de ste mtodo. El mtodo addIncludeScipt($fichero_js) tiene como argumento la ruta de un fichero js y lo carga dentro del documento. Los mtodos addAlert($advertencia) y addRedirect($pgina_nueva, $tiempo) sn exactamente lo mismo que addScript(alert(.[i]$advertencia[/i].);), que alerta la $advertencia y que addScript(setTimeOut(window.location='.$pgina_nueva.', .$tiempo*1000.);) que redirecciona a la pgina $pgina_nueva al cabo de $tiempo segundos. El mtodo addConfirmComands($num, $mensaje) lanza un prompt con el $mensaje. Si el usuario presiona Cancelar, los siguientes $num comandos sern ignorados. Pongamos un ejemplo:
000 001 002 003 004 005 006 007
function prueba(){ // // cdigo que interactua con el servidor $respuesta =new xajaxResponse(); $respuesta>addConfirmComands(2, Quieres eliminar la etiqueta 4 y 5?); $respuesta->addRemove(etiqueta4); $respuesta->addRemove(etiqueta5); $respuesta>addAppend(etiqueta6, innerHTML, $alguna_variable);
Cuando el usuario reciba la respuesta le saldr un promp que le preguntar si quiere eliminar las etiquetas 4 y 5. Si responde aceptar, los dos siguientes comandos se ejecutarn y se eliminarn las dos etiquetas, si responde cancelar, los dos comandos sern ignorados. En cualquiera de los dos casos, en la etiqueta 6 se escribir el texto $alguna_variable.
Mtodos de Adicin de Eventos El mtodo addEvent($id, $evento, $cdigo_javascript) aade un evento a una etiqueta con el id $id, y cuando se dispara ese evento, se ejecuta el $cdigo_javascript. El mtodo addHandler($id_etiqueta, $evento, $funcin_javascript) funciona de forma parecida pero en lugar de poner un cdigo como tercer argumento has de ponerle una funcin JavaScript. ste evento se puede eliminar con
44 de 56
addRemoveHandler($id_etiqueta, $evento, $funcin_javascript). La respuesta XML de xaJax tendr configurada por defecto la codificacin utf-8. An as, puedes cambiarla con un mtodo del xajaxResponse llamado setCharEncoding($codificacin), si ya no la has cambiado al crear el objeto. Por defecto, cuando usas un mtodo de modificacin donde aades texto donde hay etiquetas HTML, stas etiquetas sern ledas por el navegador como tales (si aades texto con un mtodo como stos y en el texto hay una palabra entre etiquetas <b> </b>, sta palabra se ver en negrita en el navegador). Si se quiere evitar sto, se puede llamar al mtodo outputEntitiesOn() para que las etiquetas se muestren como texto en el navegador. Para volver al estado anterior, usa el mtodo outputEntitiesOff(). Tambin tienes la posibilidad de cambiarla cuando creas el objeto. Y finalmente, el mtodo loadXML($xml) permite asignar a un objeto xajaxResponse el XML de otro objeto xajaxResponse. Y as termino mi artculo sobre funciones xaJax. Espero que les sirva de mucho.
45 de 56
xaJax El Objeto JavaScript (Articulos) | 22/03/07 | Versiones En el captulo anterior hablbamos de las funciones PHP xaJax que permiten modificar la pgina web una vez ya cargada en el navegador. stas funciones, pero, han de ser recogidas por un objeto xajax. El constructor de ste objeto tiene cuatro argumentos. $pgina_peticin Pgina a la cual se llamar para hacer la peticin. Por defecto es la pgina actual. Para cambiarla una vez creado el objeto, utiliza setRequestURI($pgina_peticin). $prefijo Prefijo que preceder al nombre de las funciones JavaScript. Por defecto xajax_. Para cambiarlo una vez construido el objeto, llama al mtodo setWrapperPrefix($prefijo) pasndole como argumento el prefijo deseado. $codificacin Codificacin que se usar para hacer las peticiones y respuestas. Por defecto utf-8. Si quieres cambiarla una despus de haber construido el objeto, usa el mtodo setCharEncoding($codificacin) para cambiarla. $debug Booleano que indica si saldr la ventana Xajax Debug Output. Por defecto false. Para cambiar-lo una vez construido el objeto, usa el mtodo debugOn() para activarlo y debugOff() para desactivarlo. As que si creas un objeto xajax sin argumentos, sus variables cogern los valores por defecto. Una vez creado y configurado el objeto, pasaremos a decirle qu funciones podrn ser accesibles desde JavaScript (sern funciones en las que se cree el objeto xajaxResponse). Nota: Si quieres poner en las respuestas y peticiones acentos o caracteres especiales, habrs de usar una condificacin "iso-8859-1", pasndola como argumento al tercer argumento del constructor o como argumento del mtodo setCharEncoding("iso-8859-1"). Tambin sera interesante que usaras el mtodo decodeUTF8InputOn() para pasar carcteres especiales en los argumentos de las funciones xaJax. En la otra pgina seguimos con los mtodos del objeto xajax.
46 de 56
xaJax El Objeto JavaScript (Articulos) | 22/03/07 | Versiones
47 de 56
Para registrar una funcin, hay que pasarla como argumento por el mtodo registerFunction($funcin, $tipoPeticin). La $funcin sera la funcin PHP que ha hemos creado, y el $tipoPeticin es un booleano; si es true, los datos se enviarn por POST, si es false, por GET, si no pones nada, por defecto ser POST. Una vez tenemos todas las funciones que queremos registradas, llamamos a la funcin processRequests(), necesaria para que nuestra aplicacin xaJax funcione. Nota: Has de ir con mucho cuidado de no enviar nada al ordenador cliente sin antes no haber llamado al mtodo precessRequests(). Lo primero que ha de haber en la pgina ha de ser <?php seguido de las funciones PHP y el objeto xajax. Esto es todo lo del lado del servidor, en cdigo sera esto:
000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017
<?php // Antes de enviar nada hay que registrar todas las funciones, // as que el texto ha de empezar as, sin ningn carcter antes // Aadimos la librera require_once('xajax/xajax.inc.php'); // Declaramos las funciones PHP function funcion1 ($arg){ // Aqu todo el cdigo que interactua con el servidor // $variable_cogida_antes=$arg; // Creamos una respuesta $respuesta=new xajaxResponse(); // modificamos la respuesta con tantos mtodos como queramos $respuesta->addCreate(body, form, form1); $respuesta->addCreateInput(form1, text, user, user); $respuesta->addAssign(user, value, $variable_cogida_antes);
48 de 56
018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044
$respuesta->addInsertInput(user, submit, ok, ok); $respuesta->addAssign(ok, value, OK); $respuesta->addHandler(form1, onsubmit, xajax_funcion2); // Tantos mtodos como quieras! return $respuesta; // o return $respuesta->getXML(), como prefieras } function funcion2 (){ // } // Y tantas funciones como quieras!! ;) // Creamos el objeto xajax $xajax=new xajax(); // Todos los valores por defecto //$xajax->debugOn(); // Activamos la ventana de Debug, si queremos // Registramos todas las funciones $xajax->registerFunction("funcion1"); // La respuesta se realizar por POST (default) $xajax->registerFunction("funcion2", 0); // La respuesta de la segunda funcin se realizar por GET (false en segundo argumento) // Y procesamos la respuesta $xajax->processRequests(); ?>
ste cdigo no es funcional. Tan slo me servir para transmitirte la idea de una aplicacin xaJax: primero se aade la librera, despus se configuran las funciones, stas se registran y se llama al mtodo processRequests(); Has de tener en cuenta que no puedes registrar una funcin (llamar al mtodo registerFunction) despus de haber procesado la respuesta, as,
49 de 56
Pantalla Completa
Colorear
000 001 002 003 004 005 006 007
<?php // $xajax->registerFunction(funcion1); $xajax->processRequests(); $xajax->registerFunction(funcion2, 0); $xajax->processRequests(); //ste ya no funcionar // ?>
Del cdigo anterior slo seria operativa la primera funcin.
50 de 56
xaJax - En el lado del cliente JavaScript (Articulos) | 28/03/07 | Versiones En captulos anteriores mostrbamos cmo escribir funciones xaJax y como configurar el objeto xajax para que estas funciones fueran accesibles desde JavaScript. Una vez explicado esto ya podemos pasar a explicar como funciona el xaJax en el lado del cliente. Resulta que el objeto xajax que hemos creado tiene un mtodo que no hemos explicado antes. Se trata del printJavascript($url, $archivo) que antes de enviar la pgina al cliente escribe el cdigo JavaScript necesario para hacer que todo funcione correctamente. En su primer argumento le habrs de pasar la carpeta donde tienes instalado el xaJax, y si no has modificado la carpeta del zip, no har falta que modifiques su segundo argumento. Y ya est, ahora ya puedes llamar a una funcin del servidor que modificar la pgina sin recargarla tan slo llamando a una funcin JavaScript. An as, tendrs que poner el prefijo xajax_ (o el que hayas marcado en el constructor de xajax, ver captulo anterior) seguido del nombre de la funcin PHP. Ejemplo Esto es todo lo que voy a explicar sobre xaJax. Si te interesa el tema mrate la documentacin que aunque est en ingls se puede entender perfectamente, y si tienes alguna duda pregunta en los foros y te responder. Si el tema tiene xito, puede que me anime a hacer algn artculo ms sobre xaJax, como por ejemplo a crear tus propias funciones JavaScript xaJax, pero ahora vamos a poner todo lo que he explicado en prctica. Nunca has visto en un formulario de registro en alguna web que al lado de el campo de texto de usuario hay un link que te permite comprobar, antes de enviar el formulario, si el nombre de usuario est libre o est ya en uso? De eso es de lo que trata el ejemplo. Tenemos quatro campos, el del usuario, dos de contraseas (el segundo para comprobarla) y uno de e-mail. Todos ellos son fcilmente validables desde JavaScript; comprobando si el usuario ha introducido la misma contrasea en los dos campos, comprobando que en el e-mail hay una arroba, un punto, un nombre de dominio, que no hay ningn carcter especial... pero en ningn momento podrs comprobar tan slo con JavaScript si el nombre de usuario est ya en la base de datos de usuarios de la web. Para eso se requiere AJaX, para hacer entre puente entre el servidor y el cliente, y con xaJax lo podemos hacer mucho ms fcil.
51 de 56
Pantalla Completa
Colorear
000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016
<?php require_once('xajax/xajax.inc.php'); function compruebaUser($user){ $disponibilidad="$user está disponible."; if($user=="LloX") $disponibilidad="$user no está disponible."; $disponibilidad.=' <a href="" onclick="xajax_compruebaUser(document.form1.user.value); return false;"> Volver a probar</a>.'; $respuesta=new xajaxResponse(); $respuesta->addAssign("disp", "innerHTML", $disponibilidad); return $respuesta; } $xajax=new xajax(); $xajax->setCharEncoding("iso-8859-1"); $xajax->decodeUTF8InputOn(); $xajax->registerFunction("compruebaUser"); $xajax->processRequests(); ?>
ste sera todo el cdigo que se ejecutara en la parte del servidor. Lo primero que hacemos es llamar a la librera xaJax, y luego escribimos una funcin llamada compruebaUser que comprobar si el usuario que se le ha pasado como argumento est disponible o no, y, en cualquier caso, devolver una respuesta XML que cambie el contenido de una capa llamada disp, que se encontrar situada debajo del campo de texto. Configuraramos tambin el objeto xajax con la funcin compruebaUser. Le cambiaramos la codificacin para que se puedan usar caracteres especiales en las transferencias. El artculo sigue en la siguiente pgina.
52 de 56
xaJax - En el lado del cliente JavaScript (Articulos) | 28/03/07 | Versiones A continacin, seguiramos con todo el cdigo que se ejecutara en el lado del cliente.
000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de formularios con xaJax</title> <style type="text/css"> body{background:#3399FF} #registro{width:360px; padding:10px; margin:15px; border: 2px solid #FFFF99; backgroundcolor: #3399FF;} #registro h1{font:bold 16px Arial, sans-serif; color:#FFFF99; padding:0 5px; borderbottom:solid #FFFF99 0.5px;} #registro label{font:bold 10px Geneva, Arial, Helvetica, sansserif; color:#FFFF99; float:left; width:22%; text-align:right; padding:8px; margintop:5px;} #registro span{font:bold 10px Geneva, Arial, Helvetica, sans-serif; color:#FFFF99; textalign:left; margin-left:24%; padding:8px;} #registro a{color:#FFFF99;} #registro a:hover{color:#FF0099;} #registro input{border:#FFFF99 solid 0.5px; background:#3399FF; color: #FFFF99; margintop:9px;} #registro br{clear: left;} .enviar{margin:3px 0 0 83px;} </style> <?php $xajax->printJavascript("xajax"); ?>
53 de 56
</head>
Tan slo sera aplicarle estilo al formulario que vendr ahora y una llamada al mtodo printJavascript para escribir automticamente all todo el cdigo que permitir que funcione xaJax. Tambin en sta parte del cdigo podramos poner un script con funciones para validar los elementos del formulario, aunque para economizar espacio y porque ya no es un tema relacionado con xaJax, no lo pongo. An as, aqu tenis dos artculos ([1] y [2]) sobre el tema. Y finalmente, ste sera el cuerpo de la pgina con el formulario.
000 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018
<body> <div id="registro"> <form id="form1" name="form1" method="post" action=""> <h1>Registro usuarios.</h1> <p> <label>Usuario</label> <input type="text" name="user" /> <br /> <span id="disp"> <a href="" onclick="xajax_compruebaUser(document.form1.user.value); return false;">Comprobar disponibilidad.</a> </span> <br /> <label>Contraseña</label> <input type="password" name="password" /> <br /> <label>Repite Contraseña</label> <input type="password" name="password2" /> <br />
54 de 56
019 020 021 022 023 024 025 026 027 028
<label>Correo Electrónico</label> <input type="text" name="email" /> <br /> <input type="submit" name="Submit" value="Enviar" class="enviar" /> </p> </form> </div> </body> </html>
Ah tendramos los cuatro campos de texto con un link en el el primero para hacer una comprobacin por xaJax. Al hacer clic en el link, se llamar a la funcin JavaScript xajax_compruebaUser, que por la magia de xaJax llamar a una funcin PHP xaJax, la funcin compruebaUser, que le devolver una respuesta en XML. La misma funcin recoge la respuesta y la interpreta, modificando el contenido de la capa donde est el enlace y mostrando la disponibilidad del user.
55 de 56
56 de 56

Curso Ajax

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Curso Ajax

Caricato da

Copyright:

Formati disponibili

Tomado de: http://www.programacionweb.net/cursos/curso.php?

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

000 001 002 003 004 005 006 007 008

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

000 001 002 003 004 005 006

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

000 001 002 003 004

<script language="JavaScript"> // Comparamos el estado alert ( oXMLHttpRequest.statusText ); } </script>

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

005 006 007 008 009

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

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

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

020 021 022 023 024

oXML = AJAXCrearObjeto(); oXML.open('GET', 'archivo.txt'); oXML.onreadystatechange = leerDatos; oXML.send(''); </script>

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

000 001 002 003 004

000 #!/usr/bin/perl 001 print "Content-Type: text/xml";

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

000 001 002 003 004

000 001 002 003 004 005

000 <?xml version="1.0"?> 001 <xml>

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

000 001 002 003 004 005 006 007

<script> function leerDatos(){ if (oXML.readyState == 4) { var xml = oXML.responseXML.documentElement; // ... } } </script>

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

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

000 <script> 001 var item = xml.getElementsByTagName('mensaje')[0]; 002 </script>

000 001 002 003 004

<script> for (i = 0; i < xml.getElementsByTagName('mensaje').length; i++){ var item = xml.getElementsByTagName('mensaje')[i]; } </script>

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>

000 001 002 003 004

<script> var item = xml.getElementsByTagName('mensaje')[0]; var txt = item.getElementsByTagName('texto')[0]; alert(txt.firstChild.data) </script>

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

000 <div id="miDiv1">Aqu aparecern los datos</div>

000 001 002 003 004 005

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

El cdigo para modificar el xajaxResponse y en consecuencia la respuesta XML, est