Usando Ajax con PHP y jQuery
Ajax se usa básicamente para reducir las demoras en la navegación web evitando recargar la página cada vez que se hace una petición al servidor. Podemos procesar y mostrar datos dinámicamente sin necesidad de cambiar o refrescar la página.
En el esquema tradicional, cuando se llama a un código PHP es necesario recargar la página, ya que el código reside en el servidor y dependemos de una petición HTTP. Ayudándonos de jQuery, podremos hacer que partes de nuestra web se comuniquen con el servidor sin necesidad de recargar la página.
De este modo, el cliente puede seguir trabajando en segundo plano mientras se procesa una petición en el servidor, reduciendo el tiempo de espera ya que el resto de la web ya lo tiene cargado.
Una vez se ha procesado la petición en el servidor, lo datos se muestran automáticamente por pantalla sin que la página actual se refresque. Vamos a ver un ejemplo muy básico sobre cómo usar Ajax ayudándonos de jQuery.
Qué necesitamos
- Biblioteca jQuery
- Fichero de funciones JS
- Fichero PHP
Preparando el terreno
Las llamadas a jQuery y a nuestro fichero de funciones serán algo parecido a esto:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/functions.js"></script>
El HTML
La estructura HTML dependerá de las necesidades de cada uno, pero lo más importante a destacar es el uso de identificadores en los elementos que vamos a usar para interactuar con el usuario. En nuestro ejemplo básico tenemos lo siguiente:
<div class="formFactorial"> <input type="text" placeholder="Número menor que 10" id="numero" class="form-control"> <button class="btn btn-primary" id="calc">Calcular factorial</button> </div> <div id="resultado"></div> <div class="gifCarga"><img id="loading_spinner" src="img/squares.gif"></div>
Podemos observar lo siguiente:
- Un input con identificador numero
- El identificador del botón es calc, lo usaremos para saber cuándo hacemos clic en él
- Hay un div con identificador resultado, en esta caja cargaremos el resultado de los datos procesados en el fichero PHP
- Tenemos una imagen con identificador loading_spinner. Esta imagen es un gif que simula un estado de carga que mostraremos y ocultaremos según nos interese
Ajax con jQuery
En nuestro fichero de funciones JS, vamos a poner un código parecido a este:
jQuery("#calc").click(function(){
//cogemos el valor del input
var num = jQuery("#numero").val();
//creamos array de parámetros que mandaremos por POST
var params = {
"numFactorial" : num
};
//llamada al fichero PHP con AJAX
$.ajax({
data: params,
url: 'ajax/factorial.php',
dataType: 'html',
type: 'post',
beforeSend: function () {
//mostramos gif "cargando"
jQuery('#loading_spinner').show();
//antes de enviar la petición al fichero PHP, mostramos mensaje
jQuery("#resultado").html("Déjame pensar un poco...");
},
success: function (response) {
//escondemos gif
jQuery('#loading_spinner').hide();
//mostramos salida del PHP
jQuery("#resultado").html(response);
}
});
});
Lo primero que vemos es el control del clic en el botón, cuando se le hace clic se llama el código que hay dentro de la función. Luego vemos que almacenamos en una variable el valor que hemos introducido en el input.
A continuación, y justo antes de usar Ajax, preparamos un array asociativo con los valores que le pasaremos a PHP. En este caso solo hemos puesto un valor, si necesitáramos pasar más variables lo podemos hacer así:
var params = {
"var1" : valor,
"var2" : valor,
"var3" : valor
};
Finalmente, con Ajax, llamamos al fichero PHP. En este ejemplo vemos unos pocos parámetros, pero hay varios más que pueden usarse, en la documentación de jQuery los podéis encontrar todos. Comentamos los de nuestro ejemplo:
- data: variable con los parámetros que hemos de pasar al fichero PHP
- url: ruta donde se encuentra el script PHP
- dataType: tipo MIME de los datos que mandamos al servidor. Con esto le decimos que tipo de respuesta se aceptará cuando procese los datos
- type: podemos mandar los datos a PHP vía POST o GET
- beforeSend: función que podemos llamar para ejecutar cierto código justo antes de enviar la petición al script PHP
- success: función llamamos para ejecutar código justo cuando el servidor ha dado su respuesta. Como parámetro ponemos la variable response que es la salida del script PHP
Te hemos preparado una demo que puedas ver los conceptos explicados. En este ejemplo se calcula el factorial de un número. Puedes descargarte el código fuente, donde encontrarás varios comentarios, de modo que tú también puedas poner en práctica el uso de Ajax con jQuery.
Si hay algo que no te ha quedado claro, o no consigues que te funcione, déjanos un comentario y trataremos de ayudarte.
En definitiva, Ajax permite ofrecer una mejor experiencia de usuario, se optimizan los recursos y es compatible cualquier plataforma web. Ahora bien, también hemos de tener en cuenta que Ajax no es siempre la mejor opción.
No hay que abusar de Ajax. Por poner un ejemplo, podríamos tener varios ficheros PHP que carguen los diferentes apartados de nuestra web, de modo que al hacer clic en cada uno de los elementos del menú se cargue uno de los ficheros PHP.
Con esto se consigue una web funcional, pero a nivel de SEO es una opción pésima, ya que nuestra URL nunca cambiará y no podremos indexar correctamente los contenidos de nuestro sitio. Además, hay otros inconvenientes relacionados con la URL, por ejemplo, el botón “atrás” del navegador pierde su funcionalidad.
Es importante valorar en qué funcionalidades de nuestro sitio web vamos a usar Ajax para que éste no se vuelva en nuestra contra.
Ver demo Descargar ejemplo
