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.
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.
fetch('https://dominio.com/')
.then(function(response) {
// Transforma la respuesta. En este caso lo convierte a JSON
return response.json();
})
.then(function(json) {
// En este caso 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
.
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.
GET
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)
});
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",
...
Otra versión con función arrow
.
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((json) => console.log(json));
POST
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)
});
Devolviendo.
{
"id" : 11,
"name" : Rodrigo Díaz de Vivar,
"username" : El Cid
}
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));
PUT
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)
});
Dándonos la información que hemos modificado.
{
username: "El Campeador",
id: 1
}
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));
DELETE
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));

Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios