Aprende como hacer peticiones Ajax con Jquery para cargar y enviar datos sin recargar la pagina.
En este artículo vamos a aprender cómo realizar peticiones Ajax básicas. Destacar que Ajax no es un lenguaje de programación, sino una técnica para crear mejores y más aplicaciones web interactivas.
También mencionar que para este articulo necesitas tener conocimientos previos de Jquery.
Con Ajax podremos hacer peticiones HTTP (GET y POST) sin necesidad de recargar la página con la consiguiente mejora de rendimiento y menor uso de ancho de banda, ya que sólo pedimos lo que necesitamos y lo cargamos dinámicamente en nuestra web.
En este caso las vamos a realizar con Jquery, ya que nos simplifica la tarea. Jquery dispone de muchos métodos para realizar las peticiones (http://www.w3schools.com/jquery/jquery_ref_ajax.asp), pero en este caso me centraré en el genérico $.Ajax(). A este método podemos pasarle distintos parámetros según nuestras necesidades, algunos de los más comunes son los siguientes:
- Url: indica la url donde enviaremos la petición.
- Type: especifica el tipo de petición (GET o POST).
- Data: datos que enviamos junto a la petición. Por ejemplo si el tipo es ‘get’, es equivalente a los parámetros que le pasaríamos a la url (?nombre=Luis&apellidos=lopez).
- DataType: tipo de datos que esperamos en la repuesta del servidor (XML, HTML, JSON, SCRIPT).
- Async: Para elegir s queremos una petición síncrona o asíncrona.
Una vez terminada la petición Ajax, tenemos 3 métodos con los que podemos recoger los datos recibidos, o controlar si ha habido algún error, o simplemente hacer algo cuando termine la petición.
.done: Si la petición Ajax se ha realizado correctamente, entra en este método. En data están los datos enviados por el servidor.
.fail: Se ejecuta si ha ocurrido algún problema en la petición, por ejemplo cuando la url especificada no existe.
.always: Como su nombre indica, se ejecuta siempre, independientemente si la petición es correcta o no. Muy útil si por ejemplo queremos quitar una imagen o texto indicando que se están cargando datos.
Ejemplo de una peticion Ajax con Jquery
Con el siguiente ejemplo, se ve más claro lo explicado anteriormente. Por ejemplo queremos cargar los datos de un usuario en una página de nuestra web al pulsar un cierto botón, en el evento onclick de dicho botón pondríamos la siguiente petición Ajax.
$.ajax(
{
url : ‘getDataUser.php’,
type: "POST",
data : {idP: ‘10’}
})
.done(function(data) {
$("#respuesta").html(data);
})
.fail(function(data) {
alert( "error" );
})
.always(function(data) {
alert( "complete" );
});
La petición la haremos a un archivo PHP llamado “getDataUser” que recogerá los datos del usuario cuya id es la pasada como parámetro post “idP”, en este caso 10. El tipo de petición es POST. Esto enviará una petición http POST, una vez acabada se muestra el mensaje “complete” ya que se ejecuta el método always, si hay algún error se ejecutará el método fail y mostrará “error”, y si todo ha salido bien escribiremos en nuestro html la respuesta, que serán los datos del usuario almacenados en “data”. Por ejemplo la respuesta puede ser una lista en HTML con dichos datos.
Si por ejemplo queremos enviar todos los datos de un form, simplemente utilizamos la función $(#myForm).serializeArray() o $(#myForm).serialize(), y los podríamos recoger fácilmente en el lado del servidor.
Con esto nos podemos dar cuenta del potencial de Ajax, que cada vez va cobrando una mayor relevancia, ya que nos permite ser más eficientes en la petición y recogida de los datos.
Más información:
http://api.jquery.com/jquery.ajax/
http://www.w3schools.com/jquery/jquery_ref_ajax.asp
primer comientaro
Hola, me pregunto si con ajax podría hace peticiones de php, ¿o hay otras posibilidades? Graciass
Claro, con AJAX lo que haces es enviar parámetros a un archivo PHP donde se encuentra la petición o consulta, y recogerá los datos que ese archivo .PHP devuelva. Eso es lo que hace AJAX, sin que tenga que cambiar de página..
AMmm.. Formulé mal la pregunta. Quise decir que si se pueden hacer otras cosas que no sean solo peticiones a PHP, como por ejemplo al pulsar un link redireccionar en segundo plano… Gracias de todos modos.
Podrias poner un ejemplo de un select dependiente con AJAX? Me interesa conocer el metodo para realizarlo. Muchas Gracias
Hola, te refieres a que por ejemplo, cuando cambias el valor de un select de html te cargue unos datos nuevos?
Exacto, he visto varios tutos y son algo complejos, me gustaría aclarar que el valor nuevo viene de la base de datos. Muchas Gracias
Utiliza la funcion «change» del select (Jquery), se ejecutará siempre que se cambie de valor el select. Dentro de dicha función, llamas con ajax por ejemplo a un fichero php donde recoges el valor de la BBDD, y en data le pasas algo para saber que hacer en el lado del servidor, si es el caso.
$(«#myselect»).change(function(){
$.ajax(
{
url : ‘getValorBBDD.php’,
type: «POST»,
data : { valorSelect: ‘XXX’ }
})
.done(function(data) {
$(«#respuesta»).html(data);
})
.fail(function(data) {
alert( «error» );
})
.always(function(data) {
alert( «complete» );
});
});
Siempre con información clara y util. Gracias Falcon =D
Dale las gracias a Enrique de la Torre, el fue el que propuso y redacto el articulo.
Oh, ya veo, la costumbre jeje. Gracias Enrique =D
Un formulario se puede enviar con cualquier evento, No subestimar el $(#myForm).serializeArray()
Ya que el submit por defecto del formulario, puede crear un efecto no deseado en nuestro sitio.
Pudieras compartir un ejemplo donde el usuario envie informacion digamos de un formulario pero la pagina que lo va cachar tiene varias funciones como le hariamos para indicarle al .ajax con estos datos ve a tal funcion?
Hola a todos, me parece muy buena opción desarrollar aplicaciones web con ajax y query para realizar peticiones al servidor.
Me llamo Víctor Gracia y soy desarrollador de aplicaciones web en Zaragoza, trabajo a diario con estas herramientas y estos lenguajes de programación.
Os comparto mi blog donde podéis algún tutorial para aprender a desarrollar en jquery, php y otros lenguajes.
http://www.victorgraciaweb.com
Saludos
muyy buen aporte gracias
Hola,
en el ejemplo cuando pasas el parámetro ‘López’ lo conviertes a ‘lopez’ eliminando la tilde ¿cómo lo enviarías con la tilde para que el servidor no tuviese problemas de codificación?
Como logro utilizar un método que se encuentra en una clase que tiene muchos otros metodos, como indico yo que el que quiero es ese y utilizar ese resultado? de ante mano muchas gracias