miércoles, 11 de julio de 2012
AJAX ultra fácil y accesible (método propio) Jquery
jQuery »
AJAX ultra fácil y accesible (método propio)
Hace unos días me pregunté porqué era tan difícil implementar AJAX en un sitio cuando su principal característica es que se recargue un elemento de la página sin que se cargue toda por completo.
Me propuse hacer todo este rollo con un par de líneas de javascript, siendo el PHP el motor principal.
De esta forma y un par de horas por la noche, llegué a un método que me impresionó. La facilidad para implementarlo es demasiada: ¡3 líneas de código!.
Ahora les mostraré mi método.
1. PHP, el motor principal.
PHP se encargará de hacer las consultas en la base de datos como siempre lo has hecho: con los datos ingresados y enviados a través de un campo de formulario (elemento padre). Sus respectivos condicionamientos if y else más algún bucle determinarán los resultados en un elemento hijo.
Nota: El método GET será lo que utilizaremos para los formularios (aún no sé si se puede implementar con POST).
2. HTML, los identificadores son importantes.
Necesitamos mínimo 3 identificadores en el HMTL: un identificador "padre", un identificador "hijo" y un identificador "recargar" para actualizar el "hijo" (pues el hijo depende del padre, y si el padre cambia el hijo también).
Lo que hará nuestro script es justamente eso: actualizar el div donde se encuentra el resultado. Nada más ni nada menos.
3. Jquery
Este método funciona con jquery, y lo primero que debemos hacer es enlazar jquery en nuestro <head>.
<script type="text/javascript" src="jquery.js"></script>
Y lo que usamos de él en el script es el evento change o keyup dependiendo del caso y el famoso load().
4. ¡El script!
Y finalmente, este es el script de tres líneas. Lo podemos poner antes del </body>.
<script type="text/javascript">
$('#padre').keyup(function(){
$('#recargar').load('prueba2.php?busqueda='+$('#padre').val().replace(/ /g,"+")+' #hijo');
});
</script>
El script hace lo siguiente: recarga el elemento "recargar" del html y de paso envía a través del método GET una variable que nosotros definamos (en el ejemplo es "busqueda"). Por ello, tenemos la libertad de hacer lo que se nos dé la gana con PHP dentro del div "hijo" tomando en cuenta y condicionando siempre la variable "busqueda".
A final lo que se ve es muy sencillo. La idea es que al presionar el botón de envío obtengamos exactamente el mismo resultado que se nos muestra con javascript, y este último, se encargue de mostrarnos ese mismo ressultado antes de que presionemos el botón.
Y sin Javascript, todo funciona cool.
Ejemplos
Ejemplo 1: Combobox encadenado. El elemento hijo cambia según el elemento padre. Nota: aquí usamos el evento "change".
Ejemplo 2: Búsqueda instantánea. Cada vez que presionamos una letra los resultados de búsqueda se actualizan. En este caso mostramos sólo lo que se escribe.
Ejemplo 3: La misma búsqueda instantánea, pero implementado correctamente con la base de datos de DocumentoWeb. Prueba con la búsqueda "CSS", "PHP" o "Tutorial".
Descarga todos estos ejemplos.
Espero que les sirva y no se estresen con otros métodos que usan datos de XML, archivos javascripts dinámicos, etc. que he visto por ahi.
Actualización
Agregando otra línea fácilmente podemos poner el mensaje "Cargando..." mientras se cargan los resultados.
$('#padre').keyup(function(){
$('#recargar').html("Cargando...");
$('#recargar').load('prueba3.php?busqueda='+$('#padre').val().replace(/ /g,"+")+' #hijo');
});
Fuente: Jquery
No hay comentarios:
Publicar un comentario