Ajax con Jquery

Cuando empecé con Ajax lo hice con mi propia librería, yo mismo me cree las funciones que iba a utilizar y confieso que siempre me ha ido bien, pero ahora, he dado un paso más en mi camino por aprender y he decidido empezar a utilizar Jquery como framework javascript.

De momento, me he resistido a utilizar frameworks para css e incluso aún ando dudando si usar alguno para php, pero lo que si tengo claro, es que voy a usar Jquery.

Ajax con Jquery

Sinceramente, esperaba algo más complicado y me ha sorprendido gratamente, tanto su facilidad de uso como lo sencillo que es de modificar.

Para poder utilizar Ajax en Jquery recomiendo leer (aunque sea por encima) la API en la página oficial, allí nos explicarán cómo se hace internamente y cómo se puede usar.

Lo primero que tenemos que tener claro, es que antes de usar Ajax, tenemos que activar Jquery, por lo que la primera instrucción que debería aparecer en nuestra página sería

$(document).ready(function(){
   ....
});

Ahora, una vez inicializado, podemos pasar a utilizar la función Ajax, que llamaremos de la siguiente manera

$.ajax({
   ....
});

Una vez que ya tenemos la llamada a la función que controla Ajax, tendremos que configurarlo mediante una serie de parámetros, tendremos parámetros de configuración, como indicar el tipo de datos que vamos a mandar, la página que se cargará, el tipo de transferencia que realizaremos y otra serie de parámetros a los que yo llamo de estado, donde podremos realizar acciones, cuando empiece, cuando termine, cuando falle, mientras está enviando datos…

No voy a poner todos los posibles parámetros, estos están explicados muy bien en la API antes mencionada, así que me limitaré a hacer un par de ejemplos con lo más frecuente.

Ejemplo para cargar una página estática

Si queremos cargar una página estática “prueba.html” en la capa “destino” deberíamos utilizar el siguiente código

$.ajax({
        url: "prueba.html",
        success: function(html){
            $.("#destino").html(html)
        }
});

En este caso le estamos indicando, mediante el parámetro url, la página que se cargará y mediante el estado success, lo que tendrá que ejecutarse cuando la transferencia haya terminado.

Ejemplo para cargar una página dinámica

En el caso de que queramos hacer lo mismo pero con páginas dinámicas que puedan recibir parámetros, el código sería así

$.ajax({
        type: "POST",
        url: "alta.php",
        data: "nombre=Jose&id=15",
        success: function(html){
             $.("#destino").html(html)
        }
});

Supongo que no hace falta explicar mucho, la única diferencia es que podemos definir de qué forma se enviarán los datos, post o get y el parámetro que los contendrá, data.

¿Y si algo falla?

Si en algún momento el proceso de transmisión falla, tenemos un estado para poder tomar medidas al respecto, es el error.

$.ajax({
        type: "POST",
        url: "alta.php",
        data: "nombre=Jose&id=15",
        success: function(html){
             $.("#destino").html(html)
        },
        error: function(html){
             alert("El proceso ha fallado!");
        }
});

¿Cómo pongo una imagen para indicar que está funcionando?

Uno de los grandes problemas de Ajax es que a veces la gente no sabe que la página está trabajando, para ello, una forma de indicarles que no deben preocuparse es poner un gif que indique que la página está trabajando.

¿Cuando se mostrará esta información? pues sencillo, desde que empiece el proceso hasta que se llegue al estado success.

$.ajax({
        type: "POST",
        url: "alta.php",
        data: "nombre=Jose&id=15",
        beforeSend: function(objeto){
	     $('#destino').html("<img src='ruta/loading.gif' alt='Loading...'/>");
        },
        success: function(html){
             $.("#destino").html(html)
        },
        error: function(html){
             alert("El proceso ha fallado!");
        }
});

Con esto ya tendríamos nuestra pequeña función para utilizar Ajax en nuestros proyectos.