Lección 12: AJAX
AJAX, acrónimo de Asynchronous JavaScript And XML
o JavaScript asíncrono y XML, es una técnica que nos permite comunicarnos con otros servicios para obtener/añadir/modificar/borrar información de manera asíncrona (a continuación de ser cargada la web). Nos abre la puerta a una cantidad ilimitada de información por parte de otros servicios (estadísticas, bases de datos, cálculos…) que bien tratada enriquecerán la navegación con estructuras nuevas de HTML o elementos que mejoran la experiencia.
Por ejemplo si estoy haciendo un buscador de viajes, sería agradable indicar que tiempo hará en el destino cuando se indique la fecha de salida. En este caso preguntaría a un servidor externo (API) dicha información para después crear un apartado dentro de la web con la temperatura. ¿Esas predicciones están en mi código? No, para nada. Pregunto, me responden y muestro.
API significa: interfaz de programación de aplicaciones o application programming interface
. Puede ser interna del lenguaje, como el propio fetch
o externa, como un servicio que nos permite hacerle peticiones AJAX.
Cuando gestionamos información, independientemente del lenguaje o base de datos, disponemos 4 acciones básicas elementales.
- Crear (
Create
). - Leer (
Read
). - Actualizar (
Update
). - Borrar (
Delete
).
Para simplificar se le denomina CRUD.
Cuando realizamos peticiones AJAX disponemos del mismo sistema aunque usamos verbos para comunicarnos con el servidor.
- GET: Leer.
- POST: Crear.
- PUT: Actualizar.
- DELETE: Borrar.
O también llamados métodos (Methods
).
Si quisiera conectarme con un API externo usaremos la función fetch
.
fetch('https://dominio.com/')
.then(function(response) {
// Transforma la respuesta. En este caso lo convierte a JSON
return response.json();
})
.then(function(json) {
// Imprimo por consola
console.log(json)
});
Con versión ES6 de JavaScript se modernizó las herramientas para realizar peticiones en AJAX, llamada fetch
. El 27 de Marzo del 2017 Safari lo implementó aunque Chrome y Firefox ya lo tenían habilitado desde 2015. Fue en ese momento cuando se convirtió en una posibilidad para usarlo, aunque encontrarás por la red muchos ejemplos antiguos usando XMLHttpRequest
.
Su ejecución es asíncrona, por lo que siempre nos devolverá una Promise
(una promesa). Para esperar a que termine tenemos 2 posibilidades, o usar la función then()
o ejecutarlo en una función asíncrona y esperar con await
.
async function hacerPeticion() {
// Realiza la petición
const miFetch = await fetch('https://dominio.com/');
// Transforma la respuesta. En este caso lo convierte a JSON
const json = await miFetch.json();
// Imprimo por consola
console.log(json);
}
hacerPeticion();
Mi recomendación es que realices las llamadas con este último ejemplo ya que será más fácil de estructurar y además es más rápida en devolver resultados (hablamos de milésimas de segundo, tampoco hay que perderla cabeza con el tema). Igualmente ten cuidado cuando realices un return
ya que devolverá una promesa.
GET
Usando .then()
fetch('https://jsonplaceholder.typicode.com/users')
.then(function(response) {
// Transforma la respuesta. En este caso lo convierte a JSON
return response.json();
})
.then(function(json) {
// Usamos la información recibida como necesitemos
console.log(json)
});
Otra versión con función arrow
.
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((json) => console.log(json));
Usando await
async function obtenerUsuarios() {
// Realiza la petición
const miFetch = await fetch('https://jsonplaceholder.typicode.com/users');
// Transforma la respuesta. En este caso lo convierte a JSON
const json = await miFetch.json();
// Imprimo por consola
console.log(json);
}
obtenerUsuarios();
Imprime por consola.
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
...
POST
Usando .then()
fetch('https://jsonplaceholder.typicode.com/users', {
headers: {
'Content-type': 'application/json'
},
method: 'POST',
body: JSON.stringify({ id: 11, name: 'Rodrigo Díaz de Vivar', username: 'El Cid' })
})
.then(function(response) {
// Transforma la respuesta. En este caso lo convierte a JSON
return response.json();
})
.then(function(json) {
// Usamos la información recibida como necesitemos
console.log(json)
});
Otra versión con función arrow
.
fetch('https://jsonplaceholder.typicode.com/users', {
headers: {
'Content-type': 'application/json'
},
method: 'POST',
body: JSON.stringify({ id: 11, name: 'Rodrigo Díaz de Vivar', username: 'El Cid' })
})
.then((response) => response.json())
.then((json) => console.log(json));
Usando await
async function anyadirUsuario() {
// Realiza la petición
const miFetch = await fetch('https://jsonplaceholder.typicode.com/users', {
headers: {
'Content-type': 'application/json'
},
method: 'POST',
body: JSON.stringify({ id: 11, name: 'Rodrigo Díaz de Vivar', username: 'El Cid' })
});
// Transforma la respuesta. En este caso lo convierte a JSON
const json = await miFetch.json();
// Imprimo por consola
console.log(json);
}
anyadirUsuario();
Devolviendo.
{
"id" : 11,
"name" : Rodrigo Díaz de Vivar,
"username" : El Cid
}
PUT
Usando .then()
fetch('https://jsonplaceholder.typicode.com/users/1', {
headers: {
'Content-type': 'application/json'
},
method: 'PUT',
body: JSON.stringify({ username: 'El Campeador' })
})
.then(function(response) {
// Transforma la respuesta. En este caso lo convierte a JSON
return response.json();
})
.then(function(json) {
// Usamos la información recibida como necesitemos
console.log(json)
});
Otra versión con función arrow
.
fetch('https://jsonplaceholder.typicode.com/users/1', {
headers: {
'Content-type': 'application/json'
},
method: 'PUT',
body: JSON.stringify({ username: 'El Campeador' })
})
.then((response) => response.json())
.then((json) => console.log(json));
Usando await
async function actualizarUsuario() {
// Realiza la petición
const miFetch = await fetch('https://jsonplaceholder.typicode.com/users/1', {
headers: {
'Content-type': 'application/json'
},
method: 'PUT',
body: JSON.stringify({ username: 'El Campeador' })
});
// Transforma la respuesta. En este caso lo convierte a JSON
const json = await miFetch.json();
// Imprimo por consola
console.log(json);
}
actualizarUsuario();
Dándonos la información que hemos modificado.
{
username: "El Campeador",
id: 1
}
DELETE
Usando .then()
fetch('https://jsonplaceholder.typicode.com/users/2', {
method: 'DELETE'
})
.then(function(response) {
// Transforma la respuesta. En este caso lo convierte a JSON
return response.json();
})
.then(function(json) {
// Usamos la información recibida como necesitemos
console.log(json);
});
Otra versión con función arrow
.
fetch('https://jsonplaceholder.typicode.com/users/2', {
method: 'DELETE'
})
.then((response) => response.json())
.then((json) => console.log(json));
Usando await
async function borrarUsuario() {
// Realiza la petición
const miFetch = await fetch('https://jsonplaceholder.typicode.com/users/1', {
headers: {
'Content-type': 'application/json'
},
method: 'DELETE'
});
// Transforma la respuesta. En este caso lo convierte a JSON
const json = await miFetch.json();
// Imprimo por consola
console.log(json);
}
borrarUsuario();
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Te ayudo?
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios