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.

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.

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

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

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

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

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

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

¿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.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario