Federico Alemany
AJAX con jQuery y PHP
Escrito por Federico Alemany - 02 de mayo de 2014
Unos dias atrás, leyendo algunos articulos sobre PHP, me llamo la atencion la cantidad de consultas que habian acerca de cómo usar AJAX con PHP. Si bien es un tema que da mucho para hablar, las consultas que se hacian eran mas bien basicas.
Lo primero que se me ocurrio hacer, era simplemente compartir una porcion de codigo que habia escrito hace tiempo, aunque sea, como para mostrar de que se trata AJAX.
En este articulo no solo voy a mostrar un ejemplo practico, sino que ademas, voy a explicar algunas de las variantes que tiene el framework jQuery con respecto al uso de AJAX.
Empecemos…
Lo primero que tenemos que entender, es una diferencia basica entre javascript y PHP: javascript es un lenguaje de programacion, que “se ejecuta” en el navegador, o como se dice “del lado del cliente”, mientras que PHP es un lenguaje interpretado en el servidor.
Cuando una persona visita un sitio web, solicita al servidor dicha pagina. El servidor (entre otras cosas) revisa si la pagina tiene algun codigo PHP (u otro lenguaje “del lado del servidor”), y de ser asi, primero ejecuta dicho codigo, y luego manda la pagina procesada al cliente (navegador).
jQuery, es un framework escrito en javascript que nos facilita mucho el trabajo… sobre todo a la hora de trabajar con AJAX… pero mas claro, echale wiki .
En nuestro ejemplo, vamos a usar AJAX para cargar datos desde una base de datos, y tambien para almacenarlos.
Tenemos una base de datos llamada “prueba”, dentro de la cual existe la tabla “ejemplo_ajax” con dos campos: CLAVE y NOMBRE (esta tabla y estos campos son solo a modo de ejemplo), dentro de los cuales, vamos a guardar los datos para nuestro ejercicio.
Veamos ahora, la pantalla principal… el index.php:



Esta pagina consiste basicamente en un campo de texto, y un boton de guardar, con los que realizaremos la carga de los nombres que necesitemos guardar en la base, y sin refrescar la pagina (de eso se trata basicamente AJAX) poder agregarlo a nuestra lista de nombres mostrada en pantalla.
Pero, veamos mas de cerca las dos partes mas interesantes del codigo:



Esta funcion, responde al evento click sobre el boton guardar. Lo que hace basicamente es utilizar la funcion “ajax” del nucleo (core) de jQuery. Esta funcion, realiza una llamada asincrona (por defecto) al servidor web, solicitando alguna respuesta especifica, en nuestro caso, ese parametro se define en el parametro “url”. Ademas del nombre del recurso solicitado, le pasamos el valor de nuestro campo de texto a traves del parametro “data” (en formato JSON).
Los otros parametros (datatype y type) son, el tipo de respuesta que esperamos DEL servidor y el tipo de solicitud que hacemos AL servidor (respectivamente).
Luego, el parametro “success” define una funcion que se ejecutara solo si la llamada al servidor se ejecuto con éxito, caso contrario se ejecuta la funcion definida en el parametro “error”. Ademas de estos dos parametros, existe un tercer parametro llamado “complete”, al cual se le puede definir una funcion que se ejecutara al final de la llamada, independientemente si fue ejecutada con éxito o no.
Para saber mas acerca de la funcion $.ajax(), puede seguir el siguiente enlace.



Aquí, solo se ejecuta la funcion .load() de jQuery, y notese que se aplica sobre una etiqueta la cual va a contener el resultado de la llamada a la funcion. Si bien esta funcion es mas sencilla que la anterior, tambien admite ciertos parametros de uso. Puede saber mas acerca de esta funcion aquí.
Concluyendo, una funcion, envia al servidor el nombre que necesitamos almacenar usando la funcion del nucleo de jQuery $.ajax(), mientras que otra funcion (la funcion “load()”) realiza una consulta al servidor para leer todos los nombres actualmente almacenados.
Aquí estan los dos archivos PHP encargados de procesar las respuestas
guardo_contacto.php



obtengo_lista.php



Y antes de terminar, un ejemplo para ver como funciona el codigo

Ver ejemplo.

Comentarios:

Nombre:
Comentario: