Cuando se realiza una web que usa AJAX, el problema mas frecuente es tener que escribir una funcion para cada variable o conjunto de variables que se quiere pasar. Esto suma mucho peso al cdigo de tu sitio web. Por Pablo LecceAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

En este tutorial te contamos como crear una sola funcion que te permita pasar variables mediante GET y POST entre dos pginas web usando AJAX . Esto aligerar mucho el peso de tus archivos javascript y de tus pginas ya que usars una funcion para todo y no una para cada variable o conjunto de variables que desees pasar. ANTES DE EMPEZAR Este tutorial esta hecho para personas que saben cmo crear objetos AJAX, escribir funciones y pasarlas mediante AJAX por POST o GET. Tambien que tienen conocimientos sobre PHP y javascript. Si no es tu caso, por favor profundiza en dichos aspectos a fin de entenderlo. EL CODIGO Primero copio aqui el codigo completo, y luego pasar a analizarlo. function objetus(file) { xmlhttp=false; this.AjaxFailedAlert = "Su navegador no soporta las funcionalidades de este sitio y podria experimentarlo de forma diferente a la que fue pensada. Por favor habilite javascript en su navegador para verlo normalmente.\n"; this.requestFile = file; this.encodeURIString = true; this.execute = false; if (window.XMLHttpRequest) { this.xmlhttp = new XMLHttpRequest(); if (this.xmlhttp.overrideMimeType) { this.xmlhttp.overrideMimeType('text/xml');

} } else if (window.ActiveXObject) { // IE try { this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try { this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { this.xmlhttp = null; } } if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') { this.xmlhttp = new XMLHttpRequest(); if (!this.xmlhttp){ this.failed = true; } } } return this.xmlhttp ; } function recibeid(_pagina,valorget,valorpost,capa){ ajax=objetus(_pagina); if(valorpost!=""){

ajax.open("POST", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true); } else { ajax.open("GET", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true); } ajax.onreadystatechange=function() { if (ajax.readyState==1){ document.getElementById(capa).innerHTML = " Aguarde por favor..."; } if (ajax.readyState==4) { if(ajax.status==200) {document.getElementById(capa).innerHTML = ajax.responseText;} else if(ajax.status==404) { capa.innerHTML = "La direccion no existe"; } else { capa.innerHTML = "Error: ".ajax.status; } } } if(valorpost!=""){ ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.send(valorpost); } else { ajax.send(null); } }

Bien, aqui te pasaremos a explicar el cdigo de la funcion a fin que podas entenderlo mejor. Por Pablo LecceAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

El codigo tiene dos funciones. La primera es la funcin que carga el objeto AJAX propiamente dicho. Si bien es compleja, su explicacion no es objeto de este tutorial, y podes usar cualquier funcion para la carga del objeto xhttprequest que vengas usando previamente. La funcion recibeid es la que se encarga de pasar valores entre pginas mediante AJAX, ya sean estos mediante GET o mediante POST. Para ello usa 4 variables: 1. 2. 3. 4. _pagina por donde le paso la url de la pgina que deseo cargar valorget por donde le paso las variables get que deseo pasar valorpost por donde le paso las variables post que deseo pasar capa donde indico el DIV o la capa donde se cargar la pgina que se solicite mediante la funcion.

DESGLOSANDO LA FUNCION Envio por GET o por POST? Primeramente mediante el siguiente codigo if(valorpost!=""){

ajax.open("POST", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true);

} else {

ajax.open("GET", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true);

} La funcion determina el mtodo que usar el objeto AJAX para enviar las variables a la pgina. Como sabes, si uno envia por metodo POST esto se hace de forma diferente a cuando envias mediante GET. Adicionalmente sucede que si envias mediante GET y hay variables POST, las mismas no sern pasadas. Por ello la utilidad de este condicional es saber si hay variables POST que deben ser pasadas, setear el mtodo a POST y sino dejarlo en GET. La siguiente parte del cdigo bsicamente verifica los estados. Mientras la pgina esta siendo llamada carga una coqueta imagen de cargando, aunque podes reemplazarla por una frase si deseas. Y una vez que recibe los resultados, los carga en la capa. Finalmente la otra parte importante de la funcion Mediante el siguiente condicional, se complementa el primer condicional, enviando los datos de la solicitud mediante POST o GET segun corresponda, con el codigo adecuado para ajax.send. if(valorpost!=""){

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.send(valorpost);

} else {

ajax.send(null);

}

Vemos ms posibilidades de Ajax en jQuery, modificando un ejemplo anterior, para crear un mensaje de carga mientras que el usuario espera la respuesta Ajax del servidor. Por Miguel Angel AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Queremos ver algunas cosas tpicas que podramos desear hacer con Ajax en una pgina web, facilitando el proceso de desarrollo con el framework Javascript jQuery. En esta lnea de artculos ya publicamos hace poco un artculo sobre el uso de Ajax en jQuery simplificado. En el mencionado artculo vimos cmo hacer una llamada Ajax con 1 sola lnea de cdigo (el Ajax en si era una lnea de cdigo, aunque se necesitan varias instrucciones ms para asociar las acciones Ajax como respuesta a eventos en la pgina). Una de las cosas que ms habitualmente podramos desear hacer cuando se realiza una llamada Ajax es la creacin de un mensaje de carga, que podemos colocar con un simple texto "cargando..." o con la tpica imagen de Ajax Loader. En este artculo veremos cmo crear ese mensaje de carga al realizar una solicitud Ajax con jQuery. Para los interesados, se puede ver este ejemplo de Ajax en una pgina aparte.

Por qu un mensaje de carga al hacer AjaxCuando hacemos una solicitud por Ajax, los resultados de dicha llamada a veces tardan en llegar. Durante ese tiempo el usuario puede no ver ninguna reaccin por parte del navegador, lo que le puede confundir y pensar que no ha hecho clic correctamente en el enlace o botn. Sera normal en ese caso que el usuario pulse repetidas veces un enlace o un botn de envo de formulario, generando repetidas e innecesarias llamadas al servidor, lo que puede derivar en diversos problemas. As pues, es conveniente mostrar un mensaje de carga para advertir que su solicitud fue realizada y el proceso est en marcha y esperando respuesta del servidor. Vamos a explicar la implementacin de este mensaje de carga, pero siempre teniendo en cuenta que nuestra intencin en este ejemplo es mantener un cdigo pequeo que se pueda entender fcilmente. Aunque queremos remarcar que las cosas se podran hacer de otra manera, algo mejorada, cuando sepamos ms cosas sobre el framework Javascript jQuery y pongamos en marcha algunas prcticas aconsejables de programacin orientada a objetos.

Preparando el cdigo HTMLComo un primer paso, vamos a mostrar el cdigo HTML que tendremos en la pgina que har la solicitud Ajax. Haz clic! Cargando...
Como se puede ver, tenemos tres elementos: 1) el enlace, que activar la llamada a Ajax cuando se haga clic sobre l. 2) una capa con id="cargando" que es donde est el mensaje de carga (nosotros hemos colocado un texto, pero se podra colocar cualquier cosa, como el tpico gif animado que muestra que se est procesando la solicitud (conviene fijarse tambin que esa capa cargando est oculta de momento, gracias al atributo de estilo CSS display:none). 3) la capa "destino", donde mostraremos la respuesta recibida tras la solicitud Ajax.

Llamada a Ajax con jQuery y el mensaje de cargaEn este punto vamos a describir cmo se tendra que hacer la llamada al servidor con Ajax, pero lo cierto es que este proceso ya lo explicamos con detalle anteriormente, por lo que os refiero al artculo Uso de Ajax muy sencillo con jQuery, donde encontraris unas explicaciones que voy a dar por sabidas en este caso. Lo que explicar en este artculo es cmo se tiene que mostrar el mensaje de carga cuando se inicia la llamada y como eliminarlo una vez hemos recibido la respuesta por Ajax. Otra cosa que el lector deber conocer para poder entender este ejemplo es Mostrar y ocultar elementos de la pgina con jQuery. $(document).ready(function(){ $("#enlaceajax").click(function(evento){ evento.preventDefault(); $("#cargando").css("display", "inline"); $("#destino").load("pagina-lenta.php", function(){ $("#cargando").css("display", "none"); }); }); }) Voy comentando lnea a lnea el cdigo anterior. En la primera lnea se est especificando un mtodo ready() sobre el objeto document, que sirve para generar un cdigo a ser ejecutado cuando la pgina est lista para recibir instrucciones Javascript que trabajen con el DOM.

En la segunda lnea se accede al elemento con identificador "enlaceajax" (es decir, el enlace que activar el Ajax) para definir un evento "click". En la siguiente lnea se ejecuta el mtodo preventDefault() sobre el evento producido al hacer clic sobre el enlace. Esto se hace para anular el comportamiento tpico del enlace. Ahora viene la parte en la que se mostrar el mensaje de carga: $("#cargando").css("display", "inline"); Simplemente se muestra la capa con id="cargando", con un simple cambio en el atributo CSS display de la capa. Ese cambio de atributo lo hacemos con el mtodo css() sobre el elemento que queremos alterar, tal como se vio en el artculo Mostrar y ocultar elementos de la pgina con jQuery. Ahora, con la siguiente lnea de cdigo: $("#destino").load("pagina-lenta.php", function(){ Se hace la llamada Ajax, con el mtodo load() sobre la capa que queremos actualizar con el contenido trado por Ajax, que es la capa con id="destino". Este mtodo recibe la URL de la pgina a cargar y una funcin callback, que se ejecutar despus que el mtodo load() se haya terminado de procesar, esto es, despus de que la solicitud Ajax se haya recibido y se haya mostrado su contenido en la capa que recibe el mtodo. Entonces, en esa funcin callback, tenemos que ocultar la capa con el mensaje de carga, puesto que cuando se ejecute esta funcin ya se habr realizado todo el procesamiento Ajax. Eso lo conseguimos con el mtodo css(), alterando la propiedad display, de manera similar a como lo habamos realizado para mostrar la capa cargando. $("#cargando").css("display", "none"); Esto es todo. Realmente no tiene ninguna complicacin especial. Aunque, como deca, estas cosas se podrn hacer de una manera ms elegante cuando aprendamos un poquito ms sobre jQuery. Por si sirve para aclarar las cosas, dejo a continuacin el cdigo completo de la pgina que hace la solicitud con jQuery: Ajax Simple $(document).ready(function(){ $("#enlaceajax").click(function(evento){

evento.preventDefault(); $("#cargando").css("display", "inline"); $("#destino").load("pagina-lenta.php", function(){ $("#cargando").css("display", "none"); }); }); }) Esto es un Ajax con un mensaje de cargando...

Haz clic! Cargando...

Cdigo de la pgina PHP que se invoca por AjaxEl cdigo de la pgina PHP que traemos por ajax "pagina-lenta.php" es el siguiente:

Es muy fcil desarrollar Ajax en jQuery. En este artculo veremos el ejemplo ms sencillo de Ajax con el framework Javascript jQuery. Por Miguel Angel AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Ha llegado el momento de hacer una primera aproximacin a Ajax, en la serie de artculos que estamos publicando en DesarrolloWeb.com para mostrar el uso de este framework (lase el Manual de jQuery). Una de las ventajas de los frameworks Javascript es que nos permiten desarrollar scripts que hacen uso de Ajax de una manera muy fcil y encima, sin tener que complicarnos la

vida con la compatibilidad entre distintos navegadores. Sin duda, cualquier persona que sepa un poco de Javascript, podra en poco tiempo empezar a utilizar Ajax con alguno de estos frameworks. Nosotros vamos a demostrar cmo es de sencillo en jQuery. La primera impresin que he tenido sobre el uso de Ajax en jQuery es realmente grata, por la facilidad con la que se puede realizar un primer ejemplo. Se trata de un ejemplo extremadamente sencillo, pero sirve para abrirnos las puertas a muchas aplicaciones interesantes. Habamos visto en otros frameworks Javascript ejemplos similares, como en el artculo Ajax con Mootools, pero tenemos que quitarnos el sombrero ante la extremada sencillez con la que se puede hacer un ejemplo similar en jQuery. Sea suficiente decir que en este ejemplo de Ajax utilizaremos tan slo 4 lneas de cdigo, de las cuales slo 1 es para ejecutar la propia llamada al servidor por Ajax.

Traer un contenido con Ajax al pulsar un enlaceEn este sencillo ejemplo haremos llamada a Ajax, para traer un contenido, cuando se pulse un enlace. Esto lo hemos puesto en marcha en el servidor de DesarrolloWeb.com y lo puedes ver en una pgina aparte. Aqu podemos ver el enlace, al que ponemos un identificador (atributo id) para seleccionarlo desde jQuery. Haz clic! Si hemos ledo hasta aqu el Manual de jQuery podremos saber cmo asignar un evento a un enlace. No obstante, recordemos cmo asignar una funcin para cuando se haga clic en el enlace: $(document).ready(function(){ $("#enlaceajax").click(function(evento){ //elimino el comportamiento por defecto del enlace evento.preventDefault(); //Aqu pondra el cdigo de la llamada a Ajax }); }) Ya se trata slo de poner en marcha Ajax dentro de la funcin del evento "click" sobre el enlace. Pero antes voy a necesitar una capa donde mostrar el contenido que vamos a recibir del servidor con la llamada Ajax. Le pondremos id="destino" para poder referirnos a ella desde jQuery: Y ahora la parte ms interesante, donde podemos ver qu tan fciles son las cosas con este framework Javascript. Una nica lnea de cdigo ser suficiente: $("#destino").load("contenido-ajax.html");

Con esta simple sentencia estamos realizando una llamada a Ajax con jQuery. Es una simple invocacin al mtodo load() de un elemento de la pgina, en concreto el que habamos puesto con id="destino". Al mtodo load() le pasamos como parmetro la ruta de la pgina que queremos cargar dentro del elemento. El archivo que cargamos con load() en este ejemplo es "contenido-ajax.html" y simplemente le hemos colocado un texto cualquiera. Lo hemos guardado en el mismo directorio que la pgina web donde est el script jQuery. Nota: para que este ejemplo funcione debe colocarse en un servidor web, puesto que la llamada por Ajax se hace por http y el archivo que se carga entonces tiene que recibirse por un servidor web, que lo mande con ese protocolo al navegador. Si pones los archivos en tu disco duro y los ejecutas tal cual, no te funcionar. Puedes utilizar cualquier espacio de hosting que tengas o bien un servidor web que puedas tener instalado en tu ordenador. As de simple! Podemos ver el cdigo completo de este ejemplo: Ajax Simple $(document).ready(function(){ $("#enlaceajax").click(function(evento){ evento.preventDefault(); $("#destino").load("contenido-ajax.html"); }); }) Haz clic!
Podemos ver el ejemplo en marcha en una pgina aparte. Cabra comentar que jQuery tiene muchos otros mtodos de realizar conexiones por Ajax, que pueden servir para muchos otros casos de trabajo que podemos encontrarnos. Nosotros hemos escogido el ms sencillo para dar una primera demostracin de las posibilidades.

Pasar parmetros y ejecutar acciones despus de la llamada a AjaxEl mtodo load() que hemos visto en el ejemplo anterior tiene otros dos parmetros opcionales que podemos utilizar si fuera necesario: Parmetros a pasar a la pgina: la pgina que carguemos con Ajax puede recibir parmetros por la URL, que se especifican con la tpica notacin de propiedades y valores de jQuery. {nombre: "Pepe", edad: 45} Por ejemplo, con ese cdigo estaramos enviando a la pgina los datos nombre y edad, con los valores "pepe" y 45. Esos datos viajaran en la URL, por el mtodo "POST". Nota: Desde jQuery 1.3 tambin se pueden enviar los parmetros a la pgina a cargar con Ajax por medio de una variable de tipo string, en lugar de una notacin de objetos como hemos comentado. Cuando se use un string para especificar los parmetros a enviar en el request http, stos viajan por el mtodo GET. Cuando se utiliza una notacin de objetos como la que hemos visto, los datos viajan por el mtodo POST. Funcin callback: como otros mtodos de jQuery, podemos especificar opcionalmente una funcin a ser ejecutada cuando se termine de ejecutar el mtodo. En este caso, cuando se termine la llamada Ajax, se pueden hacer acciones, como borrar un mensaje tpico de "cargando...". Nota: En un artculo anterior ya comentamos el habitual uso de funciones callback en jQuery. Ahora veamos un cdigo donde hacemos uso de estos dos parmetros: $(document).ready(function(){ $("#enlaceajax").click(function(evento){ evento.preventDefault(); $("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){ alert("recibidos los datos por ajax"); }); }); }) En este caso estamos cargando con load() una pgina PHP llamada "recibeparametros.php". Estamos pasando los parmetros "nombre" y "edad" a una pgina, que podremos recoger por GET. Adems, hemos colocado una funcin callback en la que simplemente hacemos un alert(), que se ejecutar cuando la llamada a Ajax haya terminado.

Este sera el cdigo fuente de "recibe-parametros.php": Recibido el siguiente dato:
Nombre:
Edad: Podemos ver este ejemplo en una pgina aparte. Con esto hemos podido comprobar lo sencillo que es realizar con jQuery una carga de contenidos que se reciben por Ajax. Como deca, existen muchas otras maneras de hacer conexiones Ajax con jQuery, como el ejemplo del artculo siguiente que nos ensea a mostrar un mensaje de carga miestrs esperamos la respuesta Ajax del servidor. Adems, para complementar esta informacin, tambin podis ver el vdeo de Ajax con jQuery.

Tutorial Creacin de combos anidados con base de datos MySqlEn muchos formularios que circulan por la red tienen combox anidados. Y que es un combo anidado? Pues este tipo de combos son listas que van desplegndose una despus de otra segn lo que seleccionemos en la lista anterior. Un ejemplo claro lo tenemos a la hora de registrarnos en alguna web en la que nos piden nuestra poblacin. Normalmente se hace con combos anidados, primero seleccionas el pas, una vez seleccionado el pas, nos aparecer otro combo con la lista de provincias de nuestro pas, y una vez seleccionamos la provincia nos aparecer la poblacin. Est de ms decir que si elegimos Espaa nos saldrn slo las provincias del pas y si elegimos Madrid, slo las poblaciones de la comunidad de Madrid. Y todo esto sin tener que volver a cargar la pgina gracias a AJAX.

Supongo que habreis entendido ya que es un combo anidado. Ahora os explicar como podemos crearlos:Creacin de la base de datos

En este apartado os explicar de que consta la base de datos y sus tablas, pero podeis descargar el archivo .sql aqu para despues cargarlo en vuestra base de datos tal y como se ve en la imagen.

1. Lo primero que haremos es crear la base de datos, a la que llamaremos "AJAX" y que estar compuesta por 3 tablas:

select_1: Correspondiente al primer combo select_2: Correspondiente al segundo combo select_3: Correspondiente al tercer combo 2. Cada una de estas tablas contendrn los siguientes registros: o Select_1: Crearemos dos campos, una clave unica que llamaremos "id" y un campo llamado opcion que ser el nombre que aparecer en el primer combo, con los siguientes registros (podemos crear tantas opciones como queramos). La tabla debera quedar con los siguientes registros:

o o o

o

Select_2: Crearemos tres campos, una clave unica que llamaremos "id", un campo llamado opcion que ser el nombre que aparecer en el segundo combo y un tercer campo que nos servir para relacionar el primer combo con este segundo llamado "relacion", la tabla quedara de la siguiente manera:

o

Select_3: Seguiremos la misma estructura de la tabla select_2, poniendo los mismos campos, y relacionando los registros con los de la tabla select_2 gracias al campo relacion, como podeis ver en la siguiente imagen:

Creacin de la conexin con la base de datos

Para poder conectar la base de datos con nuestra pgina web, tendremos que crearnos un archivo .PHP llamado :PLAIN TEXT PHP: 1. 2. 3. 4. function conectar() { mysql_connect("tunombreservidor", "usuario", "contrasea"); mysql_select_db("ajax");

5. } 6. 7. function desconectar() 8. { 9. mysql_close(); 10. } 11. ?>

Donde tendremos que cambiar "tunombreservidor", "usuario", "contrasea" por nuestros datos de acceso a la MySQl. En mi caso, para hacer las pruebas en localhost lo tengo as:PLAIN TEXT PHP: 1. mysql_connect("localhost", "root", "");

Una vez realizado todo el proceso de creacin de la base de datos y sus tablas, y saber como conectarlas, con el resto de archivos PHP para validar y procesar los combos (explicados con comentarios dentro de los archivos) ya tenemos montado nuestros combos anidados.

Autocompletar (suggest) con AJAX - ejemplo prcticoPara obtener los cdigos clicke aqu y no olvides revisar a nuestros anunciantes :)

InstruccionesEn el input de la izquierda se pueden agregar palabras a la base de datos del autocompletador. Escribir alguna y presionar el botn "Ingresar" y esperar el mensaje de confirmacin. En el input derecho al escribir dos letras o ms (no buscar sugerencias al tipear slo una letra) se desplegar una lista con 20 sugerencias (o menos, dependiendo de la cantidad de coincidencias en BD) para completarla. Se puede navegar por el listado con el mouse o con las flechas abajo/arriba del teclado y clickear o presionar enter en cualquier sugerencia.

FuncionamientoSe trata de un script que no accede a la BD con cada tecla presionada. Solo accede cuando lo cree necesario siguiendo las pautas siguientes:

Si se agrega un nuevo caracter al input, se determina si la anterior busqueda arroj resultados que no se pudieron mostrar debido al lmite existente de cantidad de coindidencias a mostrar. En ese caso, con la nueva bsqueda se regresar a la BD y se traer esos nuevos resultados. En caso contrario, no se regresa a BD y se filtran los elementos de la lista puramente desde JavaScript (eliminando sugerencias no coincidentes y resaltando con negrita las palabras). Si se borra un caracter, se determina cual fue la ltima cadena que devolvi resultados nulos. Si esa cadena es igual a las primeras letras de la cadena actual, se sabe de antemano que no habr resultados, por lo que no se accede a ella.

Para obtener los cdigos clique aqu.

ActualizacinEste cdigo fuente queda pendiente de actualizacin debido a su complejidad y el poco tiempo del que dispongo. De todas formas he aadido algunos comentarios entre lneas para hacer ms ameno su estudio.

Selects dependientes (combos dependientes) con AJAX - ejemplo prcticoPara obtener los cdigos clicke aqu y no olvides revisar a nuestros anunciantes :)

ImportanteEl script de esta pgina NO utiliza XML para comunicar servidor-cliente y cargar los valores (utiliza innerHTML). Si deseas descargarte un script que genere automticamente el cdigo necesario para hacer funcionar select dependientes multinivel, con comunicacin XML, que utilice JavaScript no intrusivo y sea muy sencillo de usar, visita este script.

InstruccionesHacer click en la primera lista desplegable, seleccionar cualquier opcin de las dispuestas. El segundo select ser habilitado en el momento que se haya seleccionado una opcin vlida del primer select y mostrar las opciones disponibles que se correspondan con dicha eleccin, por supuesto sin realizar recarga de la pgina. El cdigo fuente esta compuesto por dos archivos ".php" con sus estilos y funciones JavaScript en archivos externos ms los SQL necesarios para el armado de las tablas. El listado de pases y estados se incluye tambin con el ejemplo.

Funcionamiento

El primer select es generado mediante una funcin escrita en lenguaje de servidor (en este caso PHP) la cul se encarga de consultar nuestra base de datos e imprimir todos los registros de un campo de determinada tabla. Cuando el valor de este primer select es modificado, el evento onChange de JavaScript se dispara llamando a una funcin. Esta funcin se encargar de determinar cul select ha sido el modificado y el valor que el usuario ha seleccionado en el mismo. Si el usuario ha seleccionado la opcin "Elige", los select posteriores en la cadena de actualizacin cambiarn su estado a "Selecciona opcin...". Por el contrario, si la opcin elegida no es "Elige", se abrir una conexin asincrnica con el servidor enviandole como dato el ID del select modificado y el valor seleccionado. El servidor validar lo que recibe para luego buscar en su base de datos el listado de opciones que correspondan a lo elegido por el usuario (los cuales se relacionan en las tablas mediante un campo en comn) y devolver los datos en formato HTML. Solo resta que el cliente ubique esta informacin en el contenedor (parentNode) del select posterior al cambiado en la cadena de actualizacin, tarea que se har mediante innerHTML. Para obtener los cdigos clicke aqu.

ActualizacinLos ltimos cambios realizados son:

Re-estructuracin del cdigo fuente para hacerlo reutilizable para "X" cantidad de combos dependientes. Aadido de comentarios nuevos para ayudar a la comprensin del sistema. Cdigo ms claro y limpio, ideal para su estudio.

Ingreso a base de datos sin recargar la pgina con AJAX - ejemplo prcticoPara obtener los cdigos clicke aqu y no olvides revisar a nuestros anunciantes :)

InstruccionesHacer click en cualquiera de los dos cuadros de texto gris ubicados por debajo de este texto. Modificar el contenido a gusto y luego clickear fuera del cuadro. Los datos modificados son enviados a la base de datos sin necesidad de realizar una recarga de la pgina. El cdigo fuente viene en dos archivos ".php" muy ordenado y fcilmente entendible para aquellos que estn dando sus primeros pasos con AJAX.deqw Contreras

FuncionamientoAl clickear sobre una de las dos filas punteadas, se captura el evento onClick y una funcin de JavaScript se encarga de transformar el texto contenido en esta fila en un campo input cuyo atributo value es igual a ese texto. A este input se le asigna tambin un ID que luego lo indetificar con la base de datos. Al quitar el foco de este nuevo input recientemente creado (haciendo clic en alguna otra parte de la pgina) otra funcin es la encargada de capturar el valor ingresado por el usuario y el ID de la fila en la cual lo ingres y validar estos datos en el cliente mediante una expresion regular. Si la validacin es correcta, se informa al servidor de manera asincrnica cuales son esos datos recogidos; en caso contrario se informa al usuario mediante un mensaje de error. El servidor simplemente valida que la informacin recibida no contenga caracteres no permitidos (se valida tambin en el servidor debido a que no podemos confiar en que la informacin siempre provenga filtrada desde JavaScript) y luego la guarda mediante un INSERT en la tabla correspondiente. Para obtener los cdigos clicke aqu.

ActualizacinLos ltimos cambios realizados son:

Aadida posibilidad de incremento en la cantidad de inputs nicamente desde cdigo HTML. Nuevos comentarios destinados al mejor entendimiento del cdigo. Correccin de un pequeo error en la validacin en servidor. Cdigo eficientizado y ms claro.

Verificar la existencia de un apodo, mail o dato en general en base de datos con AJAX - ejemplo prcticoPara obtener los cdigos clicke aqu y no olvides revisar a nuestros anunciantes :)

InstruccionesEl input de la izquierda se utiliza para ingresar nuevas palabras o apodos a la base de datos. Puedes ingresar un valor, presionar el botn y esperar el mensaje de confirmacin del sistema. La finalidad del input derecho es revisar si un determinado apodo o palabra existe en la base de datos e informarle al usuario. Para probar el sistema por completo puedes comprobar primero la existencia de un apodo en el input derecho. Si se te informa de que ese apodo ya existe, prueba con uno diferente. Una vez que hayas encontrado un apodo disponible, ingrsalo en el input de la izquierda y espera el mensaje de confirmacin. Vuelve ahora a verificar la disponibilidad del apodo que has ingresado; vers que ya no se encuentra disponible.

FuncionamientoEl funcionamiento es similar tanto para la operacin de ingreso como para la operacin de verificacin. En primer lugar se recoge el valor que el usuario ha ingresado en el input. Ese valor es validado en el cliente y enviado al servidor mediante el mtodo POST (se utiliza este mtodo para evitar el cacheo de datos, como lo expliqu aqu) con un nombre de variable que indica si se trata de un proceso de ingreso o verificacin. El servidor valida nuevamente los datos recibidos y realiza la operacin de INSERT y/o SELECT segn corresponda, devolviendo al cliente un mensaje de confirmacin. Para obtener los cdigos clique aqu.

ActualizacinLos ltimos cambios realizados son:

Aadidos nuevos comentarios para facilitar el entendimiento del cdigo. Corregido un bug que apareca en servidores con PHP5 y determinada configuracin.

AJAX en 40 lneas, un ejemplo sencillo para iniciarse en esta tecnologa y aprender a utilizarlaPara obtener los cdigos clicke aqu y no olvides revisar a nuestros anunciantes :)

AclaracinA pedido de muchos usuarios que me han eviado correos (aprovecho para agradecerles sus sugerencias y crticas) he realizado un ejemplo bsico de AJAX en no ms de 40 lneas de cdigo fuente. Se trata de pedir informacin al servidor mediante los botones dispuestos y que el servidor responda de manera asincrnica. La respuesta (enviada en formato texto plano, para no complicarnos) es colocada va JavaScript en el div correspondiente. Esto es un ejemplo bsico, sencillo y muy fcil de entender de como funciona el tema de comunicacin asincrnica cliente-servidor; tambin es muy apto para adaptarlo a tus necesidades.

Instrucciones

Cliquear en el botn "Traer IP" o "Traer hora del server" para visualizar la informacin correspondiente (informacin enviada desde el servidor) en la capa cuyo contenido original es "Datos cargados asincrnicamente". Si ests utilizando proxy, puede que en lugar de tu IP se retorne un campo vaco.Datos cargados asincrnicamente

FuncionamientoAl clickear en cualquiera de los botones, se llamar, mediante el evento onclick, a la funcin traerDatos() de JavaScript. Esta funcin se encargar de identificar que botn fue el presionado (mediante un parmetro que se le enva a la funcin) y abrir una conexin XMLHttpRequest al archivo del servidor para solicitar la informacin pertinente. El servidor enviar la respuesta en texto plano (sin ningn tipo de formato) y el cliente, al recibirla, la colocar con la propiedad innerHTML en el div instanciado para este fin. Para obtener los cdigos clicke aqu. Comentarios, dudas, sugerencias sobre el ejemplo pueden enviarlas a: edanps@gmail.com. ACLARACION al 12/04/07: Debido a la enorme cantidad de usuarios que estn utilizando los cdigos en sus sitios sin respetar la licencia correspondiente, por el momento solo dar soporte va e-mail a aquellos usuarios que yo pueda comprobar que cumplen con los puntos detallados en la misma. CORREOS DE USUARIOS QUE NO SE PUEDA COMPROBAR QUE CUMPLEN CON LA LICENCIA NO SERAN RESPONDIDOS. Gracias por comprender.

Ejemplo: formulario de contacto en AJAX con validacin cliente y servidorPara obtener los cdigos clicke aqu y no olvides revisar a nuestros anunciantes :)

DescripcinEn este ejemplo he realizado un formulario de contacto (es funcional, pueden aprovechar para enviarme un mensaje ;)) el cual realiza el proceso de envo mediante AJAX. Tambin se incluyen algunos efectos visuales simples como la capa transparente para los mensajes de confirmacin y los mensajes de ayuda flotantes que se pueden ver posicionando el cursor en el signo de pregunta de cada campo. Como es costumbre en mis cdigos, he desarrollado el ejemplo lo suficientemente independiente como para configurarlo, modificarlo sin demasiada complicacin y probar su funcionamiento, pero lo suficientemente dependiente como para evitar el copiar/pegar y ya

tenerlo andando felizmente en un sitio. La idea de este script es ayudar a comprender el envo mediante POST de varios parmetros y el manejo de las respuestas que el servidor retorna para mostrarlas en cliente.Nombre: Empresa: Telfono: Mail:

Comentarios:

FuncionamientoEl funcionamiento de este cdigo es bastante sencillo: al presionar el botn "Enviar" una funcion JS se encarga de obtener los valores de los campos y validarlos en cliente utilizando diferentes criterios. Si algn campo es errneo, se cambia su className para cambiar su fondo al color rojo y se muestra el mensaje de error correspondiente. Si no existen errores, se llamar a una funcin tambin JS que abrir la conexin XMLHttpRequest con el servidor enviandole los datos que el usuario ha completado. El servidor validar los datos una vez mas he intentar enviar mediante la funcin mail de PHP la informacin a un correo electrnico configurable. Si todo ha salido bien en servidor, se envia a cliente la cadena "Ok"; caso contrario se enviar un "Error". Para finalizar, el cliente recibir la cadena de respuesta del servidor y mostrar un mensaje de error o confirmacin segn corresponda. Para obtener los cdigos clique aqu.

Ejemplo: navegacin mediante tabs o pestaas y AJAX con JavaScript no intrusivoPara obtener los cdigos clicke aqu y no olvides revisar a nuestros anunciantes :)

Descripcin

El script es un simple panel de navegacin mediante pestaas en el cual las secciones son cargadas desde base de datos mediante AJAX. El cdigo ha sido desarrollado, muy a pesar mio, pensando en la flexibilidad. Los que conocen mis cdigos saben que no me gusta desarrollar cosas demasiado configurables para evitar el copiar/pegar y obligarlos a, al menos, tener que analizar el cdigo, pero no es el caso de este script. El sistema es adaptable a cualquier estructura de tablas, o incluso, soporta que las secciones estn en tablas diferentes con estructuras diferentes. En casi todas las lneas del programa hay comentarios para facilitar el aprendizaje; el desarrollo se pens para que el fuente sea claro de seguir en lugar de super optimizado, asi que queda en ustedes mejorarlo a gusto. Vale la pena mencionar tambin que el uso de JavaScript no intrusivo permite que no haya eventos ni cdigos JS mezclados con el HTML, ganando claridad en el cdigo (pronto actualizar los dems ejemplos a esta metodologa).Tab 1 Tab 2 Tab 3 En la capa contenedora pueden cargar texto o tambin texto con imgenes. Pueden por supuesto armar su estructura de tablas o mejor an con capas y estilos CSS. Todos los datos estn en una base de datos y pueden estar en distintas tablas con distintas estructuras. Tambin es fcilmente modificable para estructuras XML. Esta es mi mascota, no es simptica?

FuncionamientoAl hacer click en una pestaa, se llama a una funcin JavaScript encargada de obtener el ID de la pestaa activa y vincularlo con el nombre de la seccin que se debe cargar. Tambin en ese momento se cambian los estilos de las pestaas para dar la sensacin de pestaa activada/desactivada mediante z-index y colores de fondo. El identificador de la seccin es enviado al servidor, el cual vincula este identificador con la tabla, fila y columna en la cual debe extraer los datos. Los datos son convertidos a UTF8 para conseguir la visualizacin de caracteres especiales (acentos y dems) y enviados al cliente en formato HTML puro. El cliente recibir los datos y los colocar en la capa colocada para mostrarlos mediante innerHTML. Para obtener los cdigos clique aqu.

Clase para generar automticamente select (combos) dependientes multinivelPublicado el 20.08.2007 Posteado por Daniel en Desarrollo Web, JavaScript, PHP, AJAX

Bueno, en realidad la clase la comenc con el objetivo de que sea un generador y validador de formularios sacndome de encima la necesidad de crear el cdigo JavaScript y PHP cada vez que tena que validar un form diferente. El tema es que genera los select dependientes tan cmodamente que me pareci til compartirla con ustedes, ms teniendo en cuenta la cantidad de correos que me llegan a diario indicandome las dificultades que se presentan en la adaptacin de este ejemplo. Voy a comenzar colocando un ejemplo de uso. Lamentablemente todava no hice la documentacin que debera, pero como mencion, la idea de la clase es otra y la misma la generar cuando termine de desarrollarla. Puede que encuentren mtodos que no hacen nada, u otros que aparentan no tener sentido; la verdad es que me qued cdigo colgando para el cual tengo objetivos pensados pero an no me he puesto a trabajar en ellos. De todas maneras todo funciona perfecto, como debe ser. El cdigo se compone de una clase principal -llamada muy originalmente "Form"- la cual para llevar a cabo sus tareas se valdr de otras 3 clases que son algo as como plug-ins. Existe entre ellos un objeto DataAccess el cul debern configurar con sus datos de acceso a la base de datos que aplica el patrn Singleton (si no sabes que es revisa por aqu). Sin mas charla les muestro el modo de uso y comento algunas cosillas. El resto de las configuraciones las colocar mas adelante a medida que avance con el desarrollo de la clase y le agregue algo ms que solo generar selects:PLAIN TEXT PHP: 1. 81. 82. 83. 84. 85. Documento sin ttulo 86. 87. 88. 95. 96.

Esto generara 3 selects, como pueden ver, estas tantas lneas generan el cdigo JS y PHP necesario para que todo funcione y utilizando AJAX! Por ahora no hace mas que eso y la documentacin es una mie***, ya lo s, pero pronto estar todo listo. Creo que como ejemplo le puede ser til a ms de uno. Cualquier dudilla comenten, aqu estare para responder. Les adjunto los archivos con las clases: http://www.formatoweb.com.ar/blog/files/validation.rar Saludos a todos!