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?
Antes de lanzarnos de lleno en el tema, vamos a ver qué es AJAX. El acrónimo es Asynchronous JavaScript And XML, es decir, que es Javascript asíncrono y XML. En efecto, el propio concepto ya nos está hablando de asincronía. AJAX es una técnica que nos permite mantener una comunicación con el servidor de forma asíncrona en segundo plano, mientras navegamos por la aplicación web (en cliente) e interactuamos con ella, sin necesidad de estar recargándola. Esto mejora la rapidez, interactividad y usabilidad de la aplicación.
¿Cómo funciona?
Para comenzar, vamos a ver un ejemplo de end point. Un end point es una url que responde a una petición y ésta puede venir en varias formas, que serían los métodos get, post, put o delete. Como es una url, podrías escribirla en tu navegador y eso sería un get. En este caso, hemos creado un end point con nodejs y tendría una estructura como esta:
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).
