Realizando peticiones con AJAX
AJAX (Asynchronous JavaScript and XML) son un conjunto de tecnologías que te permiten hacer llamados a servidores desde el navegador sin necesidad de refrescar la página.
Aunque es posible realizar llamados AJAX utilizando JavaScript puro, jQuery lo hace mucho más fácil.
jQuery ofrece varios métodos para realizar llamados AJAX pero el principal es
$.ajax() que recibe un objeto como en el siguiente ejemplo:var request = $.ajax({
method: "GET",
url: "http://...../"
});
En este ejemplo estamos realizando una petición de tipo
GET. Sin embargo, podríamos omitir el method de este ejemplo porque GET es el valor por defecto.El objeto que retorna tiene tres métodos:
done, fail y always que reciben un callback. El callback de done se dispara cuando la petición es exitosa, el de fail cuando falla y el de always siempre, sin importar si es exitosa o falla:request.done(function(data) {
alert(data); // imprimimos la respuesta
});
request.fail(function() {
alert("Algo salió mal");
});
request.always(function() {
alert("Siempre se ejecuta")
});
Puedes encadenar los métodos de la siguiente forma para hacer el código más compacto:
$.ajax({
method: "GET",
url: "http://...../"
}).done(function(data) {
alert(data); // imprimimos la respuesta
}).fail(function() {
alert("Algo salió mal");
}).always(function() {
alert("Siempre se ejecuta")
});
Para hacer peticiones que envían información en el cuerpo (usualmente cuando haces
POST, PUT ó PATCH) debes utilizar la llave data. Por ejemplo:$.ajax({
method: "POST",
url: "http://...../",
data: { name: "Pedro" }
});
Por defecto,
data se envía como si fuera información de un formulario, utilizando application/x-www-form-urlencoded como Content-Type.Para enviar otro formato como JSON, por ejemplo, debes convertir el objeto que le pasas a
data en una cadena de texto y utilizar contentType de la siguiente forma:$.ajax({
method: "POST",
url: "http://...../",
data: JSON.stringify({ name: "Pedro" }),
contentType: "application/json"
});
Veamos un resumen de las llaves más comunes que puede tener el objeto que le pasamos al método
ajax:Nombre | Descripción |
|---|---|
url | Define la URL a donde se va a enviar la petición. Por defecto utiliza la ruta actual. |
method | Define el verbo HTTP. Por defecto es "GET" |
data | La información que vamos a enviar en el cuerpo del mensaje |
contentType | El tipo de contenido que vamos a enviar en el cuerpo. Por defecto es application/x-www-form-urlencoded |
Existen otros métodos para hacer llamados AJAX con jQuery que por debajo utilizan el método
$.ajax:El método
get recibe 2 parámetros: la URL y el callback (la función que quieres que se ejecute cuando el resultado es exitoso).$.get("/products", function(data) {
$(".result").html(data);
});
Este método es similar a
$.get() pero espera formato JSON por defecto:$.getJSON("/products", function(data) {
console.log(data);
});
Last modified 2mo ago