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.

Ejemplo 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

Método 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

Método 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

Método 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

Método 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();

12-1 12-2 12-3 12-4 12-5 12-6

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario