P. 1
Cuando Se Realiza Una Web Que Usa AJAX

Cuando Se Realiza Una Web Que Usa AJAX

|Views: 441|Likes:
Publicado porDiana Sucre

More info:

Published by: Diana Sucre on Oct 04, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

08/15/2013

pdf

text

original

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!=""){

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

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

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

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

css("display".ready(function(){ $("#enlaceajax"). <a href="#" id="enlaceajax">Haz clic!</a> <div id="cargando" style="display:none. . 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. function(){ $("#cargando"). En la primera línea se está especificando un método ready() sobre el objeto document. }). $("#destino")..click(function(evento){ evento.">Cargando. "none"). 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.preventDefault(). "inline"). 3) la capa "destino". $("#cargando"). pero lo cierto es que este proceso ya lo explicamos con detalle anteriormente. donde encontraréis unas explicaciones que voy a dar por sabidas en este caso. donde mostraremos la respuesta recibida tras la solicitud Ajax. pero se podría colocar cualquier cosa. }) Voy comentando línea a línea el código anterior.load("pagina-lenta. por lo que os refiero al artículo Uso de Ajax muy sencillo con jQuery. 2) una capa con id="cargando" que es donde está el mensaje de carga (nosotros hemos colocado un texto. 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. gracias al atributo de estilo CSS display:none).</div> <br> <div id="destino"></div> Como se puede ver. vamos a mostrar el código HTML que tendremos en la página que hará la solicitud Ajax. Otra cosa que el lector deberá conocer para poder entender este ejemplo es Mostrar y ocultar elementos de la página con jQuery. que activará la llamada a Ajax cuando se haga clic sobre él. $(document). }).Preparando el código HTML Como un primer paso. 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.php". tenemos tres elementos: 1) el enlace.. color: green.css("display".

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

}). Por Miguel Angel Alvarez Atención: Contenido exclusivo de DesarrolloWeb. color: green. ?> Es muy fácil desarrollar Ajax en jQuery. echo ("He tardado 3 segundos en ejecutar esta p&aactute. function(){ $("#cargando")... "none").. 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..</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. <br> <br> <a href="#" id="enlaceajax">Haz clic!</a> <div id="cargando" style="display:none. $("#cargando").php".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. Ha llegado el momento de hacer una primera aproximación a Ajax.gina.php" es el siguiente: <?php sleep(3).css("display". "inline").evento.css("display". }) </script> </head> <body> Esto es un Ajax con un mensaje de cargando. en la serie de artículos que estamos publicando en DesarrolloWeb.preventDefault()."). sin tener que complicarnos la . Copyright.com. $("#destino")...">Cargando. }). No reproducir.load("pagina-lenta.

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

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

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

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

Supongo que habreis entendido ya que es un combo anidado. a la que llamaremos "AJAX" y que estará compuesta por 3 tablas: . pero podeis descargar el archivo . 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. 1.sql aquí para despues cargarlo en vuestra base de datos tal y como se ve en la imagen. Lo primero que haremos es crear la base de datos.

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

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

Autocompletar (suggest) con AJAX .5. } 11. ""). "usuario". { 9. Donde tendremos que cambiar "tunombreservidor". mysql_close(). ?&gt. para hacer las pruebas en localhost lo tengo así: PLAIN TEXT PHP: 1. mysql_connect("localhost". 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. 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. En mi caso. 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. Una vez realizado todo el proceso de creación de la base de datos y sus tablas. Solo accede cuando lo cree necesario siguiendo las pautas siguientes: .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. } 6. y saber como conectarlas. "contraseña" por nuestros datos de acceso a la MySQl. function desconectar() 8. Funcionamiento Se trata de un script que no accede a la BD con cada tecla presionada. Escribir alguna y presionar el botón "Ingresar" y esperar el mensaje de confirmación. 10. "root". 7.

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

Cuando el valor de este primer select es modificado. 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. Actualización Los últimos cambios realizados son:    Re-estructuración del código fuente para hacerlo reutilizable para "X" cantidad de combos dependientes. ideal para su estudio. El código fuente viene en dos archivos ". Si el usuario ha seleccionado la opción "Elige".". Código más claro y limpio. deqw Contreras . los select posteriores en la cadena de actualización cambiarán su estado a "Selecciona opción. si la opción elegida no es "Elige". Para obtener los códigos clickeá aquí. Solo resta que el cliente ubique esta información en el contenedor (parentNode) del select posterior al cambiado en la cadena de actualización.php" muy ordenado y fácilmente entendible para aquellos que están dando sus primeros pasos con AJAX.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. Modificar el contenido a gusto y luego clickear fuera del cuadro. 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.. tarea que se hará mediante innerHTML. el evento onChange de JavaScript se dispara llamando a una función.. se abrirá una conexión asincrónica con el servidor enviandole como dato el ID del select modificado y el valor seleccionado.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. Por el contrario. Añadido de comentarios nuevos para ayudar a la comprensión del sistema. Los datos modificados son enviados a la base de datos sin necesidad de realizar una recarga de la página. Ingreso a base de datos sin recargar la página con AJAX .

Actualización Los últimos cambios realizados son:     Añadida posibilidad de incremento en la cantidad de inputs únicamente desde código HTML.Funcionamiento Al clickear sobre una de las dos filas punteadas. Vuelve ahora a verificar la disponibilidad del apodo que has ingresado. Corrección de un pequeño error en la validación en servidor. 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. La finalidad del input derecho es revisar si un determinado apodo o palabra existe en la base de datos e informarle al usuario. Nuevos comentarios destinados al mejor entendimiento del código. Si la validación es correcta. mail o dato en general en base de datos con AJAX . 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. Si se te informa de que ese apodo ya existe. Puedes ingresar un valor. Para obtener los códigos clickeá aquí. Una vez que hayas encontrado un apodo disponible. en caso contrario se informa al usuario mediante un mensaje de error. ingrésalo en el input de la izquierda y espera el mensaje de confirmación.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. se informa al servidor de manera asincrónica cuales son esos datos recogidos. . Verificar la existencia de un apodo. prueba con uno diferente. presionar el botón y esperar el mensaje de confirmación del sistema. verás que ya no se encuentra disponible. Código eficientizado y más claro. Para probar el sistema por completo puedes comprobar primero la existencia de un apodo en el input derecho. A este input se le asigna también un ID que luego lo indetificará con la base de datos. 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.

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. Se trata de pedir información al servidor mediante los botones dispuestos y que el servidor responda de manera asincrónica. En primer lugar se recoge el valor que el usuario ha ingresado en el input. Esto es un ejemplo básico. 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. 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. Para obtener los códigos cliqueá aquí. 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. El servidor valida nuevamente los datos recibidos y realiza la operación de INSERT y/o SELECT según corresponda.Funcionamiento El funcionamiento es similar tanto para la operación de ingreso como para la operación de verificación. Instrucciones . para no complicarnos) es colocada vía JavaScript en el div correspondiente. Corregido un bug que aparecía en servidores con PHP5 y determinada configuración. AJAX en 40 líneas. también es muy apto para adaptarlo a tus necesidades. La respuesta (enviada en formato texto plano.

mediante el evento onclick. 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. El servidor enviará la respuesta en texto plano (sin ningún tipo de formato) y el cliente. 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.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". 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. 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. al recibirla. Comentarios. Como es costumbre en mis códigos. dudas. CORREOS DE USUARIOS QUE NO SE PUEDA COMPROBAR QUE CUMPLEN CON LA LICENCIA NO SERAN RESPONDIDOS. Datos cargados asincrónicamente Funcionamiento Al clickear en cualquiera de los botones. Gracias por comprender. Si estás utilizando proxy. sugerencias sobre el ejemplo pueden enviarlas a: edanps@gmail. se llamará. puede que en lugar de tu IP se retorne un campo vacío. modificarlo sin demasiada complicación y probar su funcionamiento. pero lo suficientemente dependiente como para evitar el copiar/pegar y ya . a la función traerDatos() de JavaScript. la colocará con la propiedad innerHTML en el div instanciado para este fin. pueden aprovechar para enviarme un mensaje .com. 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.)) el cual realiza el proceso de envío mediante AJAX. Para obtener los códigos clickeá aquí.

caso contrario se enviará un "Error". se envia a cliente la cadena "Ok". Si algún campo es erróneo. 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 cliente recibirá la cadena de respuesta del servidor y mostrará un mensaje de error o confirmación según corresponda. Si todo ha salido bien en servidor. 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. Si no existen errores. 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. 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. Para obtener los códigos cliqueá aquí.tenerlo andando felizmente en un sitio. 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 . se cambia su className para cambiar su fondo al color rojo y se muestra el mensaje de error correspondiente. Para finalizar.

El sistema es adaptable a cualquier estructura de tablas. al menos. 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. Esta es mi mascota. Pueden por supuesto armar su estructura de tablas o mejor aún con capas y estilos CSS. 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. muy a pesar mio. o incluso. ganando claridad en el código (pronto actualizaré los demás ejemplos a esta metodología). El cliente recibirá los datos y los colocará en la capa colocada para mostrarlos mediante innerHTML. soporta que las secciones estén en tablas diferentes con estructuras diferentes. tener que analizar el código. El identificador de la sección es enviado al servidor. En casi todas las líneas del programa hay comentarios para facilitar el aprendizaje. Todos los datos están en una base de datos y pueden estar en distintas tablas con distintas estructuras. Para obtener los códigos cliqueá aquí. El código ha sido desarrollado. Los que conocen mis códigos saben que no me gusta desarrollar cosas demasiado configurables para evitar el copiar/pegar y obligarlos a. fila y columna en la cual debe extraer los datos. Tab 1 Tab 2 Tab 3 En la capa contenedora pueden cargar texto o también texto con imágenes. ¿no es simpática? Funcionamiento Al hacer click en una pestaña. pero no es el caso de este script. pensando en la flexibilidad. el cual vincula este identificador con la tabla. También es fácilmente modificable para estructuras XML.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. . 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. asi que queda en ustedes mejorarlo a gusto. 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. el desarrollo se pensó para que el fuente sea claro de seguir en lugar de super optimizado.

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. require 'classes/DataAccess. 12. 'id'=>'select_1'. El tema es que genera los select dependientes tan cómodamente que me pareció útil compartirla con ustedes. require 'classes/LinkedSelect. 15. 'table'=>'select_1'. 4. require 'classes/Form.Clase para generar automáticamente select (combos) dependientes multinivel Publicado el 20. 'type'=>'select'. require 'classes/ElementsFromDB. ). 16.php'.class. 5. 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 más que solo generar selects: PLAIN TEXT PHP: 1.08. 13.php'. JavaScript.class. De todas maneras todo funciona perfecto. 'options'=>'opcion'. 'post'). 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í). 11. <?php 2.la cual para llevar a cabo sus tareas se valdrá de otras 3 clases que son algo así como plug-ins. El código se compone de una clase principal -llamada muy originalmente "Form". Voy a comenzar colocando un ejemplo de uso. u otros que aparentan no tener sentido. 'elementsfromdb'=>array( 9. 'attributes'=>array( 14. Lamentablemente todavía no hice la documentación que debería. 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. PHP.php'.2007 Posteado por Daniel en Desarrollo Web. 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. pero como mencioné. AJAX Bueno. 'values'=>'id'. Puede que encuentren métodos que no hacen nada. como debe ser. la idea de la clase es otra y la misma la generaré cuando termine de desarrollarla.class.class. 6. 7.php'. $form=new Form('form'. 'name'=>'select_1' . $form->AddInput(array( 8. 3. 10.

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

ar/blog/files/validation. </body> 96. echo "<br>". ?> 84. Creo que como ejemplo le puede ser útil a más de uno.org/1999/xhtml"> 82.rar Saludos a todos! .org/TR/xhtml1/DTD/xhtml1-strict. 77. <?php 89. 90. 80.0 Strict//EN" "http://www. <title>Documento sin título</title> 86. 73. </html> Esto generaría 3 selects.72. 94. $form->GetInput('select_1'). charset=iso-8859-1" /> 85. <?php $form->GenerateAdditionalJS(). como pueden ver. ya lo sé. 'locations'=>array( 'js'=>'js/'. <body> 88. 74.w3. ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 76. ). ?> 95.dtd"> 81. 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***. echo "<br>". pero pronto estará todo listo. 92. 91. <head> 83.formatoweb. 79. <meta http-equiv="Content-Type" content="text/html. aquí estare para responder. Cualquier dudilla comenten. </head> 87. 'php'=>'classes/' ) )).com. $form->GetInput('select_2'). <html xmlns="http://www. $form->GenerateForm(). 75. 93. Les adjunto los archivos con las clases: http://www. $form->GetInput('select_3'). 78.w3.

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->