AJAX con jQuery

AJAX con jQuery

En el caso de necesitar utilizar Ajax en nuestra página, jQuery simplifica mucho este proceso al reducir la función al mínimo. Ajax se utiliza para crear contenido dinámico en una página estática, esto significa que podremos variar el contenido de una página HTML según nos convenga en tiempo real.

AJAX son las siglas de Asynchronous JavaScript and XML. Este método permite la combinación de HTML, JavaScript y PHP. La unión de estos tres lenguajes da lugar a la comunicación entre servidores y clientes. El siguiente esquema resume perfectamente el funcionamiento de AJAX.

Como podemos observar, AJAX permite la comunicación y el intercambio de información entre lenguajes cliente, como HTML y JavaScript, con lenguajes servidor como PHP y MySQL.

Imaginemos que tenemos que crear un formulario para que inicien sesión los usuarios. Normalmente, las credenciales de los usuarios se almacenan en una tabla de una BBDD. Entonces, llegados a este punto, nos deberíamos plantear la siguiente cuestión:

¿Como puedo llegar desde HTML a la base de datos?

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

La respuesta es: por el método AJAX de jQuery en JavaScript y PHP con MySQL. AJAX va a comunicar el archivo JavaScript con el lenguaje PHP, y este último va a poder realizar consultas a la BBDD según el lenguaje en que esté programada. Volviendo al ejemplo del formulario de login, el flujo de trabajo será el siguiente:

  1. El usuario introduce sus credenciales.
  2. El usuario mediante una acción como puede ser el click del ratón en un botón, hace que se lance el método $.ajax() de jQuery utilizando JavaScript.
  3. El método $.ajax() envía la información de las credenciales del usuario a un archivo PHP.
  4. El archivo PHP recibe los datos y consulta la base de datos.
  5. El archivo PHP recibe la consulta y devuelve los resultados mediante AJAX.
  6. Finalmente, el archivo JavaScript recibe la información que le devuelve el método $.ajax() y la evalua.

Como se puede ver, mezclamos 4 lenguajes diferentes pero “unidos” por el método AJAX, permitiendo el intercambio de datos entre todos los lenguajes.

La función $.ajax() puede recibir muchos parámetros para el envío de información, vamos a ver cuales son los más destacados:

    • url: va a ser la dirección de destino. Normalmente es una página escrita en lenguaje PHP, ya que es el que se puede comunicar con bases de datos.
    • data: es un array de valores que le pasaremos a la dirección de destino.
    • type: el método por el que enviaremos los valores, que puede ser get o post.
  • beforeSend: es una función que se ejecuta mientras se están enviando los datos a la dirección de destino, comúnmente suele utilizarse para mostrar un mensaje de tipo “cargando…”.
  • success: también es una función. Esta se ejecuta cuando devuelve algún valor la dirección de destino, es decir, cuando finaliza la ejecución de AJAX. Esta función recibe un parámetro como respuesta que será el valor devuelto por el archivo de destino.

Vamos a crear un proyecto muy sencillo en el que probaremos todo el funcionamiento que acabamos de ver. En este ejemplo, en vez de hacer la consulta a la base de datos, vamos a simularla creando un usuario y una contraseña en el archivo PHP que deberá introducir el usuario. Además, de esta forma, podréis descargar el proyecto entero y probar su funcionamiento completo. Debemos tener muy claro que este proyecto se tiene que ejecutar en un entorno de servidor web, como por ejemplo APACHE, ya que contiene archivos en PHP y tienen que ser ejecutados por un servidor.

El árbol de directorios del proyecto va a ser el siguiente:

Copy to Clipboard

El archivo index.html que va a contener el formulario, va a tener el siguiente código:

Copy to Clipboard

El fichero index.css va a ser el siguiente:

Copy to Clipboard

El siguiente paso va a ser crear la función que utilizará ajax para comprobar si el login es correcto. En el archivo index.js vamos a crear una función llamada login, y su código va a ser el siguiente:

Copy to Clipboard

Vamos a analizar en profundidad esta función que acabamos de crear. En primer lugar podemos observar que recibe como parámetro dos variables: usuarioP y passwordP. Dentro de la función ajax() podemos ver que en primer lugar estamos indicando el archivo php de destino. En segundo lugar, los datos que vamos a enviar al archivo php. En tercer lugar podemos ver el método por el que se lo enviamos, en este caso post. Después, en el beforeSend, no estamos ejecutando nada dentro de la función ya que no es necesario. Por último, en el success, estamos analizando la respuesta que nos devuelve la función ajax del archivo php.

Para lanzar esta función, vamos a utilizar el evento click sobre el botón con id “btn_login” que tenemos en el archivo index.html, pasandole como parámetros los valores de los campos con id “campo_usuario” y “campo_password”. Entonces, nuestro archivo index.js quedará de la siguiente manera:

Copy to Clipboard

Por último, vamos a crear el archivo funciones.php, que se encontrará dentro del directorio php de nuestro proyecto. El código del fichero funciones.php es el siguiente:

Copy to Clipboard

Analizando el archivo funciones.php, lo primero que hacemos es evaluar la variable “$_POST[“funcion”]” que, en función del valor que contenga, va a entrar en el “if” o no. Esto se utilizar para estructurar y ordenar el archivo de funciones, ya que por norma general, no va a contener únicamente una función. Después utilizamos la variable “$login” para saber si el usuario ha introducido bien las credenciales. En caso de que haya acertado, el archivo funciones.php devolverá un 0, y en el caso de que falle devolverá un 1. Este es el valor que recuperaremos en la función $.ajax del archivo index.js, en el apartado success. El parámetro “respuesta” que se recibe en AJAX es lo que nos está devolviendo el archivo funciones.php. En este caso podemos obtener 3 respuestas:

  • 0: el login es correcto.
  • 1: el login es incorrecto
  • Otro valor: ocurrió algún problema en el archivo funciones.php o el servidor donde está alojado está caído. Cada servidor puede alojar un valor distinto, por eso se evalúa con cualquier otro valor.

Terminando con el tutorial, como siempre, os dejo con una demostración de su funcionamiento y el enlace de descarga del proyecto completo.

4.8 (95.91%) 44 votes

2020-10-09T09:26:10+00:00