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 código de tu sitio web. Por Pablo Lecce
Atención: 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 páginas web usando AJAX . Esto aligerará mucho el peso de tus archivos javascript y de tus páginas ya que usarás 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 cómo 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. <script> 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!=""){

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

El codigo tiene dos funciones. _pagina por donde le paso la url de la página 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 página que se solicite mediante la funcion. La funcion recibeid es la que se encarga de pasar valores entre páginas mediante AJAX.getTime(). 3. Por Pablo Lecce Atención: Contenido exclusivo de DesarrolloWeb. . 2. ya sean estos mediante GET o mediante POST.true).open("POST". Para ello usa 4 variables: 1.com. Copyright. _pagina+"?"+valorget+"&tiempo="+new Date(). } else { ajax. } } </script> Bien.send(null).send(valorpost). Si bien es compleja. La primera es la función que carga el objeto AJAX propiamente dicho. No reproducir. 4. su explicacion no es objeto de este tutorial. y podes usar cualquier funcion para la carga del objeto xhttprequest que vengas usando previamente. DESGLOSANDO LA FUNCION ¿Envio por GET o por POST? Primeramente mediante el siguiente codigo if(valorpost!=""){ ajax. aqui te pasaremos a explicar el código de la funcion a fin que podas entenderlo mejor.ajax.

} else { ajax. Adicionalmente sucede que si envias mediante GET y hay variables POST. Como sabes. si uno envia por metodo POST esto se hace de forma diferente a cuando envias mediante GET.getTime(). ajax. aunque podes reemplazarla por una frase si deseas. Por ello la utilidad de este condicional es saber si hay variables POST que deben ser pasadas. Y una vez que recibe los resultados.send(valorpost). setear el método a POST y sino dejarlo en GET.true).send. _pagina+"?"+valorget+"&tiempo="+new Date(). las mismas no serán pasadas. enviando los datos de la solicitud mediante POST o GET segun corresponda. "application/x-www-form-urlencoded"). se complementa el primer condicional. if(valorpost!=""){ ajax. } else { . Finalmente la otra parte importante de la funcion Mediante el siguiente condicional.open("GET". con el codigo adecuado para ajax. los carga en la capa.setRequestHeader("Content-Type". Mientras la página esta siendo llamada carga una coqueta imagen de cargando. La siguiente parte del código básicamente verifica los estados. } La funcion determina el método que usará el objeto AJAX para enviar las variables a la página.

. Copyright.send(null). Para los interesados. En esta línea de artículos ya publicamos hace poco un artículo sobre el uso de Ajax en jQuery simplificado. los resultados de dicha llamada a veces tardan en llegar.. 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. lo que puede derivar en diversos problemas. cuando sepamos más cosas sobre el framework Javascript jQuery y pongamos en marcha algunas prácticas aconsejables de programación orientada a objetos. modificando un ejemplo anterior. Una de las cosas que más habitualmente podríamos desear hacer cuando se realiza una llamada Ajax es la creación de un mensaje de carga. generando repetidas e innecesarias llamadas al servidor.com. No reproducir. Por qué un mensaje de carga al hacer Ajax Cuando hacemos una solicitud por Ajax. En este artículo veremos cómo crear ese mensaje de carga al realizar una solicitud Ajax con jQuery. se puede ver este ejemplo de Ajax en una página aparte. Aunque queremos remarcar que las cosas se podrían hacer de otra manera. Queremos ver algunas cosas típicas que podríamos desear hacer con Ajax en una página web. que podemos colocar con un simple texto "cargando. Así pues. para crear un mensaje de carga mientras que el usuario espera la respuesta Ajax del servidor. lo que le puede confundir y pensar que no ha hecho clic correctamente en el enlace o botón. Sería normal en ese caso que el usuario pulse repetidas veces un enlace o un botón de envío de formulario. Durante ese tiempo el usuario puede no ver ninguna reacción por parte del navegador. aunque se necesitan varias instrucciones más para asociar las acciones Ajax como respuesta a eventos en la página). En el mencionado artículo vimos cómo hacer una llamada Ajax con 1 sola línea de código (el Ajax en si era una línea de código. Vamos a explicar la implementación de este mensaje de carga. Por Miguel Angel Alvarez Atención: Contenido exclusivo de DesarrolloWeb." o con la típica imagen de Ajax Loader. facilitando el proceso de desarrollo con el framework Javascript jQuery. . algo mejorada. } Vemos más posibilidades de Ajax en jQuery. pero siempre teniendo en cuenta que nuestra intención en este ejemplo es mantener un código pequeño que se pueda entender fácilmente.ajax.

pero se podría colocar cualquier cosa.preventDefault().</div> <br> <div id="destino"></div> Como se puede ver.. $("#destino"). gracias al atributo de estilo CSS display:none). que activará la llamada a Ajax cuando se haga clic sobre él. Otra cosa que el lector deberá conocer para poder entender este ejemplo es Mostrar y ocultar elementos de la página con jQuery. Llamada a Ajax con jQuery y el mensaje de carga En este punto vamos a describir cómo se tendría que hacer la llamada al servidor con Ajax. }). <a href="#" id="enlaceajax">Haz clic!</a> <div id="cargando" style="display:none. donde mostraremos la respuesta recibida tras la solicitud Ajax.">Cargando. vamos a mostrar el código HTML que tendremos en la página que hará la solicitud Ajax. function(){ $("#cargando"). que sirve para generar un código a ser ejecutado cuando la página está lista para recibir instrucciones Javascript que trabajen con el DOM. "inline").load("pagina-lenta. donde encontraréis unas explicaciones que voy a dar por sabidas en este caso. 2) una capa con id="cargando" que es donde está el mensaje de carga (nosotros hemos colocado un texto. Lo que explicaré en este artículo es cómo se tiene que mostrar el mensaje de carga cuando se inicia la llamada y como eliminarlo una vez hemos recibido la respuesta por Ajax. $(document). $("#cargando").php".click(function(evento){ evento. "none").Preparando el código HTML Como un primer paso. por lo que os refiero al artículo Uso de Ajax muy sencillo con jQuery. 3) la capa "destino".css("display". como el típico gif animado que muestra que se está procesando la solicitud (conviene fijarse también que esa capa cargando está oculta de momento. En la primera línea se está especificando un método ready() sobre el objeto document. }) Voy comentando línea a línea el código anterior. tenemos tres elementos: 1) el enlace. color: green..css("display". }). pero lo cierto es que este proceso ya lo explicamos con detalle anteriormente. .ready(function(){ $("#enlaceajax").

function(){ Se hace la llamada Ajax. que se ejecutará después que el método load() se haya terminado de procesar.ready(function(){ $("#enlaceajax"). puesto que cuando se ejecute esta función ya se habrá realizado todo el procesamiento Ajax. tal como se vio en el artículo Mostrar y ocultar elementos de la página con jQuery.css("display". Ahora viene la parte en la que se mostrará el mensaje de carga: $("#cargando").js" type="text/javascript"></script> <script> $(document). esto es. Por si sirve para aclarar las cosas. alterando la propiedad display. "inline"). Realmente no tiene ninguna complicación especial. con un simple cambio en el atributo CSS display de la capa. el enlace que activará el Ajax) para definir un evento "click". con la siguiente línea de código: $("#destino"). estas cosas se podrán hacer de una manera más elegante cuando aprendamos un poquito más sobre jQuery. Simplemente se muestra la capa con id="cargando". Esto se hace para anular el comportamiento típico del enlace. "none"). con el método load() sobre la capa que queremos actualizar con el contenido traído por Ajax. como decía. tenemos que ocultar la capa con el mensaje de carga. Ese cambio de atributo lo hacemos con el método css() sobre el elemento que queremos alterar.php".min. $("#cargando"). que es la capa con id="destino". Este método recibe la URL de la página a cargar y una función callback.css("display". Aunque. Entonces.En la segunda línea se accede al elemento con identificador "enlaceajax" (es decir. Esto es todo.3. Eso lo conseguimos con el método css(). después de que la solicitud Ajax se haya recibido y se haya mostrado su contenido en la capa que recibe el método. dejo a continuación el código completo de la página que hace la solicitud con jQuery: <html> <head> <title>Ajax Simple</title> <script src="jquery-1. Ahora.load("pagina-lenta.click(function(evento){ . de manera similar a como lo habíamos realizado para mostrar la capa cargando.2. En la siguiente línea se ejecuta el método preventDefault() sobre el evento producido al hacer clic sobre el enlace. en esa función callback.

. Por Miguel Angel Alvarez Atención: Contenido exclusivo de DesarrolloWeb..</div> <br> <div id="destino"></div> </body> </html> Código de la página PHP que se invoca por Ajax El código de la página PHP que traemos por ajax "pagina-lenta. color: green.php".. $("#destino"). }). }). }) </script> </head> <body> Esto es un Ajax con un mensaje de cargando.php" es el siguiente: <?php sleep(3). sin tener que complicarnos la .load("pagina-lenta. Copyright.">Cargando.css("display". No reproducir.preventDefault(). Una de las ventajas de los frameworks Javascript es que nos permiten desarrollar scripts que hacen uso de Ajax de una manera muy fácil y encima. <br> <br> <a href="#" id="enlaceajax">Haz clic!</a> <div id="cargando" style="display:none.. function(){ $("#cargando").. "none"). en la serie de artículos que estamos publicando en DesarrolloWeb. ?> Es muy fácil desarrollar Ajax en jQuery..com.").gina. echo ("He tardado 3 segundos en ejecutar esta p&aactute. $("#cargando").css("display".com para mostrar el uso de este framework (léase el Manual de jQuery). En este artículo veremos el ejemplo más sencillo de Ajax con el framework Javascript jQuery.evento. Ha llegado el momento de hacer una primera aproximación a Ajax. "inline").

Habíamos visto en otros frameworks Javascript ejemplos similares. podría en poco tiempo empezar a utilizar Ajax con alguno de estos frameworks. donde podemos ver qué tan fáciles son las cosas con este framework Javascript. pero sirve para abrirnos las puertas a muchas aplicaciones interesantes. <a href="#" id="enlaceajax">Haz clic!</a> Si hemos leído hasta aquí el Manual de jQuery podremos saber cómo asignar un evento a un enlace. de las cuales sólo 1 es para ejecutar la propia llamada al servidor por Ajax.load("contenido-ajax.click(function(evento){ //elimino el comportamiento por defecto del enlace evento. cuando se pulse un enlace. Se trata de un ejemplo extremadamente sencillo. La primera impresión que he tenido sobre el uso de Ajax en jQuery es realmente grata. como en el artículo Ajax con Mootools.com y lo puedes ver en una página aparte. Aquí podemos ver el enlace. Nosotros vamos a demostrar cómo es de sencillo en jQuery.vida con la compatibilidad entre distintos navegadores. recordemos cómo asignar una función para cuando se haga clic en el enlace: $(document). Pero antes voy a necesitar una capa donde mostrar el contenido que vamos a recibir del servidor con la llamada Ajax. pero tenemos que quitarnos el sombrero ante la extremada sencillez con la que se puede hacer un ejemplo similar en jQuery. }) Ya se trata sólo de poner en marcha Ajax dentro de la función del evento "click" sobre el enlace. al que ponemos un identificador (atributo id) para seleccionarlo desde jQuery.html"). //Aquí pondría el código de la llamada a Ajax }). cualquier persona que sepa un poco de Javascript. Una única línea de código será suficiente: $("#destino").preventDefault(). Le pondremos id="destino" para poder referirnos a ella desde jQuery: Y ahora la parte más interesante. para traer un contenido.ready(function(){ $("#enlaceajax"). . Sin duda. Esto lo hemos puesto en marcha en el servidor de DesarrolloWeb. por la facilidad con la que se puede realizar un primer ejemplo. No obstante. Sea suficiente decir que en este ejemplo de Ajax utilizaremos tan sólo 4 líneas de código. Traer un contenido con Ajax al pulsar un enlace En este sencillo ejemplo haremos llamada a Ajax.

js" type="text/javascript"></script> <script> $(document). Es una simple invocación al método load() de un elemento de la página.html" y simplemente le hemos colocado un texto cualquiera. Lo hemos guardado en el mismo directorio que la página web donde está el script jQuery.preventDefault().2.min. El archivo que cargamos con load() en este ejemplo es "contenido-ajax. puesto que la llamada por Ajax se hace por http y el archivo que se carga entonces tiene que recibirse por un servidor web. Cabría comentar que jQuery tiene muchos otros métodos de realizar conexiones por Ajax. no te funcionará. que pueden servir para muchos otros casos de trabajo que podemos encontrarnos. que lo mande con ese protocolo al navegador. Así de simple! Podemos ver el código completo de este ejemplo: <html> <head> <title>Ajax Simple</title> <script src="jquery-1.Con esta simple sentencia estamos realizando una llamada a Ajax con jQuery. }) </script> </head> <body> <a href="#" id="enlaceajax">Haz clic!</a> <br> <div id="destino"></div> </body> </html> Podemos ver el ejemplo en marcha en una página aparte.ready(function(){ $("#enlaceajax"). Si pones los archivos en tu disco duro y los ejecutas tal cual. $("#destino"). Al método load() le pasamos como parámetro la ruta de la página que queremos cargar dentro del elemento. }). en concreto el que habíamos puesto con id="destino". .html"). Nosotros hemos escogido el más sencillo para dar una primera demostración de las posibilidades.load("contenido-ajax.3.click(function(evento){ evento. Nota: para que este ejemplo funcione debe colocarse en un servidor web. Puedes utilizar cualquier espacio de hosting que tengas o bien un servidor web que puedas tener instalado en tu ordenador.

php". }).3 también se pueden enviar los parámetros a la página a cargar con Ajax por medio de una variable de tipo string. Cuando se utiliza una notación de objetos como la que hemos visto. éstos viajan por el método GET. . function(){ alert("recibidos los datos por ajax").php". por el método "POST".ready(function(){ $("#enlaceajax"). }) En este caso estamos cargando con load() una página PHP llamada "recibeparametros. se pueden hacer acciones. Función callback: como otros métodos de jQuery. $("#destino").. en lugar de una notación de objetos como hemos comentado. Esos datos viajarían en la URL. Nota: En un artículo anterior ya comentamos el habitual uso de funciones callback en jQuery.load("recibe-parametros.preventDefault(). Cuando se use un string para especificar los parámetros a enviar en el request http. edad: 45} Por ejemplo. podemos especificar opcionalmente una función a ser ejecutada cuando se termine de ejecutar el método. con ese código estaríamos enviando a la página los datos nombre y edad. que podremos recoger por GET. Ahora veamos un código donde hacemos uso de estos dos parámetros: $(document). Estamos pasando los parámetros "nombre" y "edad" a una página. Además.". hemos colocado una función callback en la que simplemente hacemos un alert().Pasar parámetros y ejecutar acciones después de la llamada a Ajax El método load() que hemos visto en el ejemplo anterior tiene otros dos parámetros opcionales que podemos utilizar si fuera necesario: Parámetros a pasar a la página: la página que carguemos con Ajax puede recibir parámetros por la URL. Nota: Desde jQuery 1. edad: 45}. que se ejecutará cuando la llamada a Ajax haya terminado. con los valores "pepe" y 45. {nombre: "Pepe".click(function(evento){ evento. {nombre: "Pepe". como borrar un mensaje típico de "cargando. }). que se especifican con la típica notación de propiedades y valores de jQuery. En este caso.. los datos viajan por el método POST. cuando se termine la llamada Ajax.

Y todo esto sin tener que volver a cargar la página gracias a AJAX.?> Podemos ver este ejemplo en una página aparte. para complementar esta información. también podéis ver el vídeo de Ajax con jQuery. como el ejemplo del artículo siguiente que nos enseña a mostrar un mensaje de carga miestrás esperamos la respuesta Ajax del servidor. nos aparecerá otro combo con la lista de provincias de nuestro país. . y una vez seleccionamos la provincia nos aparecerá la población. una vez seleccionado el país. Un ejemplo claro lo tenemos a la hora de registrarnos en alguna web en la que nos piden nuestra población. Además. Como decía. Está de más decir que si elegimos España nos saldrán sólo las provincias del país y si elegimos Madrid. existen muchas otras maneras de hacer conexiones Ajax con jQuery.Este sería el código fuente de "recibe-parametros. primero seleccionas el país. ¿Y que es un combo anidado? Pues este tipo de combos son listas que van desplegándose una después de otra según lo que seleccionemos en la lista anterior. sólo las poblaciones de la comunidad de Madrid.php": Recibido el siguiente dato: <br> Nombre: <?php echo $_POST["nombre"]. Tutorial – Creación de combos anidados con base de datos MySql En muchos formularios que circulan por la red tienen combox anidados.?> <br> Edad: <?php echo $_POST["edad"]. Normalmente se hace con combos anidados. Con esto hemos podido comprobar lo sencillo que es realizar con jQuery una carga de contenidos que se reciben por Ajax.

sql aquí para despues cargarlo en vuestra base de datos tal y como se ve en la imagen.Supongo que habreis entendido ya que es un combo anidado. 1. Ahora os explicaré como podemos crearlos: Creación de la base de datos En este apartado os explicaré de que consta la base de datos y sus tablas. a la que llamaremos "AJAX" y que estará compuesta por 3 tablas: . Lo primero que haremos es crear la base de datos. pero podeis descargar el archivo .

con los siguientes registros (podemos crear tantas opciones como queramos). 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". como podeis ver en la siguiente imagen: . y relacionando los registros con los de la tabla select_2 gracias al campo relacion. poniendo los mismos campos. la tabla quedaría de la siguiente manera: o Select_3: Seguiremos la misma estructura de la tabla select_2. Cada una de estas tablas contendrán los siguientes registros: o Select_1: Crearemos dos campos.select_1: Correspondiente al primer combo select_2: Correspondiente al segundo combo select_3: Correspondiente al tercer combo 2. una clave unica que llamaremos "id". La tabla debería quedar con los siguientes registros: o o o o Select_2: Crearemos tres campos. una clave unica que llamaremos "id" y un campo llamado opcion que será el nombre que aparecerá en el primer combo.

Creación de la conexión con la base de datos Para poder conectar la base de datos con nuestra página web. "contraseña"). 4. "usuario". function conectar() { mysql_connect("tunombreservidor". 3.PHP llamado : PLAIN TEXT PHP: 1. . tendremos que crearnos un archivo . 2. mysql_select_db("ajax").

mysql_close(). y saber como conectarlas. Donde tendremos que cambiar "tunombreservidor". para hacer las pruebas en localhost lo tengo así: PLAIN TEXT PHP: 1. dependiendo de la cantidad de coincidencias en BD) para completarla. Autocompletar (suggest) con AJAX .ejemplo práctico Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :) Instrucciones En el input de la izquierda se pueden agregar palabras a la base de datos del autocompletador. { 9. 10. } 11. "usuario". Una vez realizado todo el proceso de creación de la base de datos y sus tablas. function desconectar() 8. En mi caso. "contraseña" por nuestros datos de acceso a la MySQl. Escribir alguna y presionar el botón "Ingresar" y esperar el mensaje de confirmación. En el input derecho al escribir dos letras o más (no buscará sugerencias al tipear sólo una letra) se desplegará una lista con 20 sugerencias (o menos. Funcionamiento Se trata de un script que no accede a la BD con cada tecla presionada. "root". ""). ?&gt. 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. 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. } 6. 7.5. mysql_connect("localhost". Solo accede cuando lo cree necesario siguiendo las pautas siguientes: .

con comunicación XML.php" con sus estilos y funciones JavaScript en archivos externos más los SQL necesarios para el armado de las tablas. El código fuente esta compuesto por dos archivos ". Si esa cadena es igual a las primeras letras de la cadena actual. Selects dependientes (combos dependientes) con AJAX . El segundo select será habilitado en el momento que se haya seleccionado una opción válida del primer select y mostrará las opciones disponibles que se correspondan con dicha elección. Si se borra un caracter.ejemplo práctico Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :) Importante El script de esta página NO utiliza XML para comunicar servidor-cliente y cargar los valores (utiliza innerHTML). con la nueva búsqueda se regresará a la BD y se traerá esos nuevos resultados. El listado de países y estados se incluye también con el ejemplo. que utilice JavaScript no intrusivo y sea muy sencillo de usar. Instrucciones Hacer click en la primera lista desplegable. 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). se determina si la anterior busqueda arrojó resultados que no se pudieron mostrar debido al límite existente de cantidad de coindidencias a mostrar. se determina cual fue la última cadena que devolvió resultados nulos. Para obtener los códigos cliqueá aquí. Actualización Este código fuente queda pendiente de actualización debido a su complejidad y el poco tiempo del que dispongo. En caso contrario. En ese caso. Si deseas descargarte un script que genere automáticamente el código necesario para hacer funcionar select dependientes multinivel. seleccionar cualquier opción de las dispuestas. por lo que no se accede a ella. visita este script. se sabe de antemano que no habrá resultados. Funcionamiento .  Si se agrega un nuevo caracter al input. De todas formas he añadido algunos comentarios entre líneas para hacer más ameno su estudio. por supuesto sin realizar recarga de la página.

". Ingreso a base de datos sin recargar la página con AJAX . Para obtener los códigos clickeá aquí. Código más claro y limpio. 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 común) y devolverá los datos en formato HTML.. Si el usuario ha seleccionado la opción "Elige". Solo resta que el cliente ubique esta información en el contenedor (parentNode) del select posterior al cambiado en la cadena de actualización. Los datos modificados son enviados a la base de datos sin necesidad de realizar una recarga de la página.El primer select es generado mediante una función escrita en lenguaje de servidor (en este caso PHP) la cuál se encarga de consultar nuestra base de datos e imprimir todos los registros de un campo de determinada tabla. si la opción elegida no es "Elige".. Actualización Los últimos cambios realizados son:    Re-estructuración del código fuente para hacerlo reutilizable para "X" cantidad de combos dependientes. Modificar el contenido a gusto y luego clickear fuera del cuadro. el evento onChange de JavaScript se dispara llamando a una función. deqw Contreras . los select posteriores en la cadena de actualización cambiarán su estado a "Selecciona opción. tarea que se hará mediante innerHTML.ejemplo práctico Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :) Instrucciones Hacer click en cualquiera de los dos cuadros de texto gris ubicados por debajo de este texto. Cuando el valor de este primer select es modificado. Por el contrario.php" muy ordenado y fácilmente entendible para aquellos que están dando sus primeros pasos con AJAX. El código fuente viene en dos archivos ". se abrirá una conexión asincrónica con el servidor enviandole como dato el ID del select modificado y el valor seleccionado. ideal para su estudio. Añadido de comentarios nuevos para ayudar a la comprensión del sistema. Esta función se encargará de determinar cuál select ha sido el modificado y el valor que el usuario ha seleccionado en el mismo.

en caso contrario se informa al usuario mediante un mensaje de error. Si la validación es correcta. A este input se le asigna también un ID que luego lo indetificará con la base de datos. verás que ya no se encuentra disponible. se informa al servidor de manera asincrónica cuales son esos datos recogidos. Verificar la existencia de un apodo. mail o dato en general en base de datos con AJAX . Código eficientizado y más claro. Actualización Los últimos cambios realizados son:     Añadida posibilidad de incremento en la cantidad de inputs únicamente desde código HTML. Vuelve ahora a verificar la disponibilidad del apodo que has ingresado. Nuevos comentarios destinados al mejor entendimiento del código. Al quitar el foco de este nuevo input recientemente creado (haciendo clic en alguna otra parte de la página) otra función 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.Funcionamiento Al clickear sobre una de las dos filas punteadas. se captura el evento onClick y una función de JavaScript se encarga de transformar el texto contenido en esta fila en un campo input cuyo atributo value es igual a ese texto.ejemplo práctico Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :) Instrucciones El input de la izquierda se utiliza para ingresar nuevas palabras o apodos a la base de datos. . Puedes ingresar un valor. La finalidad del input derecho es revisar si un determinado apodo o palabra existe en la base de datos e informarle al usuario. El servidor simplemente valida que la información recibida no contenga caracteres no permitidos (se valida tambián en el servidor debido a que no podemos confiar en que la información siempre provenga filtrada desde JavaScript) y luego la guarda mediante un INSERT en la tabla correspondiente. 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. ingrésalo en el input de la izquierda y espera el mensaje de confirmación. Corrección de un pequeño error en la validación en servidor. prueba con uno diferente. Una vez que hayas encontrado un apodo disponible. Para obtener los códigos clickeá aquí. presionar el botón y esperar el mensaje de confirmación del sistema.

Corregido un bug que aparecía en servidores con PHP5 y determinada configuración. también es muy apto para adaptarlo a tus necesidades. La respuesta (enviada en formato texto plano. Actualización Los últimos cambios realizados son:   Añadidos nuevos comentarios para facilitar el entendimiento del código. devolviendo al cliente un mensaje de confirmación. Para obtener los códigos cliqueá aquí. El servidor valida nuevamente los datos recibidos y realiza la operación de INSERT y/o SELECT según corresponda. AJAX en 40 líneas.Funcionamiento El funcionamiento es similar tanto para la operación de ingreso como para la operación de verificación. un ejemplo sencillo para iniciarse en esta tecnología y aprender a utilizarla Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :) Aclaración A pedido de muchos usuarios que me han eviado correos (aprovecho para agradecerles sus sugerencias y críticas) he realizado un ejemplo básico de AJAX en no más de 40 líneas de código fuente. para no complicarnos) es colocada vía JavaScript en el div correspondiente. Se trata de pedir información al servidor mediante los botones dispuestos y que el servidor responda de manera asincrónica. Ese valor es validado en el cliente y enviado al servidor mediante el método POST (se utiliza este método para evitar el cacheo de datos. En primer lugar se recoge el valor que el usuario ha ingresado en el input. Instrucciones . como lo expliqué aquí) con un nombre de variable que indica si se trata de un proceso de ingreso o verificación. sencillo y muy fácil de entender de como funciona el tema de comunicación asincrónica cliente-servidor. Esto es un ejemplo básico.

Comentarios. Datos cargados asincrónicamente Funcionamiento Al clickear en cualquiera de los botones. mediante el evento onclick. CORREOS DE USUARIOS QUE NO SE PUEDA COMPROBAR QUE CUMPLEN CON LA LICENCIA NO SERAN RESPONDIDOS. Gracias por comprender. modificarlo sin demasiada complicación y probar su funcionamiento.Cliquear en el botón "Traer IP" o "Traer hora del server" para visualizar la información correspondiente (información enviada desde el servidor) en la capa cuyo contenido original es "Datos cargados asincrónicamente". pueden aprovechar para enviarme un mensaje . Para obtener los códigos clickeá aquí.)) el cual realiza el proceso de envío mediante AJAX. Como es costumbre en mis códigos. a la función traerDatos() de JavaScript.com. ACLARACION al 12/04/07: Debido a la enorme cantidad de usuarios que están utilizando los códigos en sus sitios sin respetar la licencia correspondiente. sugerencias sobre el ejemplo pueden enviarlas a: edanps@gmail. pero lo suficientemente dependiente como para evitar el copiar/pegar y ya . puede que en lugar de tu IP se retorne un campo vacío. Si estás utilizando proxy. he desarrollado el ejemplo lo suficientemente independiente como para configurarlo. También se incluyen algunos efectos visuales simples como la capa transparente para los mensajes de confirmación y los mensajes de ayuda flotantes que se pueden ver posicionando el cursor en el signo de pregunta de cada campo. Esta función se encargará de identificar que botón fue el presionado (mediante un parámetro que se le envía a la función) y abrirá una conexión XMLHttpRequest al archivo del servidor para solicitar la información pertinente. la colocará con la propiedad innerHTML en el div instanciado para este fin. por el momento solo daré soporte vía e-mail a aquellos usuarios que yo pueda comprobar que cumplen con los puntos detallados en la misma. se llamará. dudas. Ejemplo: formulario de contacto en AJAX con validación cliente y servidor Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :) Descripción En este ejemplo he realizado un formulario de contacto (es funcional. al recibirla. El servidor enviará la respuesta en texto plano (sin ningún tipo de formato) y el cliente.

Si todo ha salido bien en servidor. se cambia su className para cambiar su fondo al color rojo y se muestra el mensaje de error correspondiente. caso contrario se enviará un "Error". se llamará a una función también JS que abrirá la conexión XMLHttpRequest con el servidor enviandole los datos que el usuario ha completado. Nombre: Empresa: Teléfono: Mail: Comentarios: Funcionamiento El funcionamiento de este código es bastante sencillo: al presionar el botón "Enviar" una funcion JS se encarga de obtener los valores de los campos y validarlos en cliente utilizando diferentes criterios. El servidor validará los datos una vez mas he intentará enviar mediante la función mail de PHP la información a un correo electrónico configurable.tenerlo andando felizmente en un sitio. Si algún campo es erróneo. el cliente recibirá la cadena de respuesta del servidor y mostrará un mensaje de error o confirmación según corresponda. se envia a cliente la cadena "Ok". Si no existen errores. Para finalizar. Para obtener los códigos cliqueá aquí. La idea de este script es ayudar a comprender el envío mediante POST de varios parámetros y el manejo de las respuestas que el servidor retorna para mostrarlas en cliente. Ejemplo: navegación mediante tabs o pestañas y AJAX con JavaScript no intrusivo Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :) Descripción .

Los datos son convertidos a UTF8 para conseguir la visualización de caracteres especiales (acentos y demás) y enviados al cliente en formato HTML puro. pero no es el caso de este script. asi que queda en ustedes mejorarlo a gusto. muy a pesar mio. También en ese momento se cambian los estilos de las pestañas para dar la sensación de pestaña activada/desactivada mediante z-index y colores de fondo. El código ha sido desarrollado. . Tab 1 Tab 2 Tab 3 En la capa contenedora pueden cargar texto o también texto con imágenes. El sistema es adaptable a cualquier estructura de tablas. fila y columna en la cual debe extraer los datos. al menos. soporta que las secciones estén en tablas diferentes con estructuras diferentes. Pueden por supuesto armar su estructura de tablas o mejor aún con capas y estilos CSS. se llama a una función JavaScript encargada de obtener el ID de la pestaña activa y vincularlo con el nombre de la sección que se debe cargar. Vale la pena mencionar también que el uso de JavaScript no intrusivo permite que no haya eventos ni códigos JS mezclados con el HTML. El identificador de la sección es enviado al servidor. pensando en la flexibilidad.El script es un simple panel de navegación mediante pestañas en el cual las secciones son cargadas desde base de datos mediante AJAX. tener que analizar el código. Todos los datos están en una base de datos y pueden estar en distintas tablas con distintas estructuras. Los que conocen mis códigos saben que no me gusta desarrollar cosas demasiado configurables para evitar el copiar/pegar y obligarlos a. el desarrollo se pensó para que el fuente sea claro de seguir en lugar de super optimizado. Para obtener los códigos cliqueá aquí. o incluso. También es fácilmente modificable para estructuras XML. Esta es mi mascota. ¿no es simpática? Funcionamiento Al hacer click en una pestaña. El cliente recibirá los datos y los colocará en la capa colocada para mostrarlos mediante innerHTML. el cual vincula este identificador con la tabla. En casi todas las líneas del programa hay comentarios para facilitar el aprendizaje. ganando claridad en el código (pronto actualizaré los demás ejemplos a esta metodología).

class. 'elementsfromdb'=>array( 9. JavaScript. 'values'=>'id'. 11. $form->AddInput(array( 8. 'type'=>'select'. la verdad es que me quedó código colgando para el cual tengo objetivos pensados pero aún no me he puesto a trabajar en ellos. 13. 4. pero como mencioné. 'options'=>'opcion'. Existe entre ellos un objeto DataAccess el cuál deberán configurar con sus datos de acceso a la base de datos que aplica el patrón Singleton (si no sabes que es revisa por aquí). 6. Sin mas charla les muestro el modo de uso y comento algunas cosillas.class. 'id'=>'select_1'. 12. Voy a comenzar colocando un ejemplo de uso. 7. 10.php'. 'post').php'. la idea de la clase es otra y la misma la generaré cuando termine de desarrollarla. 'table'=>'select_1'. 15.class. 16. 3. De todas maneras todo funciona perfecto. Puede que encuentren métodos que no hacen nada.php'. El tema es que genera los select dependientes tan cómodamente que me pareció útil compartirla con ustedes.la cual para llevar a cabo sus tareas se valdrá de otras 3 clases que son algo así como plug-ins. ). u otros que aparentan no tener sentido. 'name'=>'select_1' . El resto de las configuraciones las colocaré mas adelante a medida que avance con el desarrollo de la clase y le agregue algo más que solo generar selects: PLAIN TEXT PHP: 1. Lamentablemente todavía no hice la documentación que debería. 'attributes'=>array( 14. PHP. require 'classes/LinkedSelect.2007 Posteado por Daniel en Desarrollo Web.08. <?php 2. 5. El código se compone de una clase principal -llamada muy originalmente "Form".Clase para generar automáticamente select (combos) dependientes multinivel Publicado el 20. como debe ser. require 'classes/DataAccess. en realidad la clase la comencé con el objetivo de que sea un generador y validador de formularios sacándome de encima la necesidad de crear el código JavaScript y PHP cada vez que tenía que validar un form diferente. más teniendo en cuenta la cantidad de correos que me llegan a diario indicandome las dificultades que se presentan en la adaptación de este ejemplo.class. AJAX Bueno. require 'classes/Form. $form=new Form('form'.php'. require 'classes/ElementsFromDB.

'default'=>array( 'value'=>'0'. 'js'=>'js/'. 39. 56. 23. 'locations'=>array( // rutas a los archivos JS y PHP 48. 18. 'option'=>'Elige. 'reference'=>'relacion'. 30. 'externalclass'=>'linkedselect'. 'table'=>'select_3'. 63. ).17. ). 58. 49.' 46. 55. 67. 43. 38. 26. 'linkedby'=>array( 65. 52. 'values'=>'id'. 27. 'type'=>'select'. 'showdefault'=>'0' // el value que tiene que tener select_1 para que en select_2 se muestre el option por defecto 42. 'default'=>array( 70. 'attributes'=>array( 'type'=>'select'. 'options'=>'opcion'..' . 28. 34. ). 25. 45. 22. 'option'=>'Elige.. 33. 32. 'id'=>'select_2'. 29.. 57. 'options'=>'opcion'. 'elementsfromdb'=>array( 54. 'option'=>'Elige. 'values'=>'id'. )). 'id'=>'select_3'. 66... ). 'linkedby'=>array( 'reference'=>'relacion'. 'name'=>'select_2' ).. 61. ). $form->AddInput(array( 'elementsfromdb'=>array( 'table'=>'select_2'. 60. 20. ). // columna de bd donde este la relacion entre select_1 y select_2 40. 41. ) 51. 71. 36. 'php'=>'classes/' 50. 'name'=>'select_3' 62. 'default'=>array( 44. ). 64. 35. $form->AddInput(array( 53. 'attributes'=>array( 59. 19. 'externalclass'=>'linkedselect'. 'id'=>'select_1'. 37. 31. 21. 69. 'showdefault'=>'0' 68. 24. 'id'=>'select_2'. 'value'=>'0'.' ) )). 47. 'selected'=>'1'. 'value'=>'0'. 'externalclass'=>'elementsfromdb'.

77.w3.com. $form->GenerateForm(). Creo que como ejemplo le puede ser útil a más de uno. charset=iso-8859-1" /> 85. $form->GetInput('select_2'). 91. 73. 76.0 Strict//EN" "http://www. ?> 84. $form->GetInput('select_3'). pero pronto estará todo listo.w3.ar/blog/files/validation.dtd"> 81.72. 'locations'=>array( 'js'=>'js/'.org/1999/xhtml"> 82. <meta http-equiv="Content-Type" content="text/html. 74. 94. $form->GetInput('select_1').org/TR/xhtml1/DTD/xhtml1-strict.formatoweb. 80. ). ya lo sé. ?> 95. 79. 90. Les adjunto los archivos con las clases: http://www. como pueden ver. estas tantas líneas generan el código JS y PHP necesario para que todo funcione ¡y utilizando AJAX! Por ahora no hace mas que eso y la documentación es una mie***. <html xmlns="http://www. 93. <?php 89. Cualquier dudilla comenten. ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.rar Saludos a todos! . </body> 96. </head> 87. echo "<br>". </html> Esto generaría 3 selects. <?php $form->GenerateAdditionalJS(). echo "<br>". aquí estare para responder. 'php'=>'classes/' ) )). 78. <head> 83. <title>Documento sin título</title> 86. 75. <body> 88. 92.

Sign up to vote on this title
UsefulNot useful