Ya hemos visto anteriormente que las peticiones de datos a través de un servidor son asíncronas. Para explicar la asincronía de estas peticiones, vamos a trabajar en este artículo con AJAX, que es la forma básica de realizar peticiones al servidor, y así entenderemos mejor lo que ocurre cada vez que lanzamos dichas peticiones.

¿Qué es AJAX?

¿Cómo funciona?

Cada una de las líneas hace lo siguiente:

  • Realizaremos una petición a api/questions (es una api que nos hemos creado de preguntas, pero podría ser cualquier api).
  • El contenido lo estamos definiendo aquí, en este caso es un array de objetos con un id.
  • Le decimos que los datos van a ser de tipo json (‘content-type’, ‘application/json’)
  • Y transformamos el objeto a un formato JSON, que es un string con el método stringify.

Este sería un ejemplo de una llamada a la api que hemos creado más arriba:

Creamos un objeto request que será un XMLHttpRequest(). XMLHttpRequest es un objeto de javascript, creado por Microsoft y que proporciona una forma fácil de obtener información de una URL sin tener que recargar la página completa. (Para más información, consultar MDN )

A este objeto por un lado le asignamos un eventListener, que nos dará la respuesta de la petición. Y por otro lado, usamos un método del objeto, open, que es donde le especificamos la url a la que tiene que acceder.

Sólo faltaría ejecutar el método send para recibir los datos, así:

request.send();

Por otro lado, si nos fijamos en el ejemplo anterior, cuando definimos la función listener, que es la que recibe la respuesta, vemos que tiene un método JSON.parse(), que nos va a hacer más accesibles los datos, por ejemplo transformándolos en un objeto.

Normalmente en el cliente hacemos un JSON.parse() para recibir datos y haríamos un JSON.stringify() si quisiéramos pasarle los datos al servidor, como por ejemplo cuando usamos el método post.

Y en el caso del servidor, sería al revés, es decir, que si nos tiene que enviar un JSON, lo tiene que convertir a string.

En resumen, el servidor le pasa los datos al cliente en forma de string (con stringify) y el cliente, para trabajar con ello, lo tiene que volver a transformar, en este caso, a objeto (con parse).

If something does not work, ACT. Yes, you! That’s why I’m now #Developer at @vmware . Formerly @kairos_ds .Constantly absorbing knowledge. Proud #Adalaber

If something does not work, ACT. Yes, you! That’s why I’m now #Developer at @vmware . Formerly @kairos_ds .Constantly absorbing knowledge. Proud #Adalaber