Entendiendo como funciona el internet. Parte AJAX.

Emmanuel Orozco
Laboratoria Developers
2 min readMay 15, 2017

Imagina que vas a mandar una carta a tu enamorada. Le vas a confesar tu amor. ¿Qué haces?

  1. Escribes la carta.
  2. La pones en el buzón

Y esperas una respuesta.

Esa respuesta no sabes si va a llegar.

¿Vas a esperar a que te responda, sin hacer absolutamente nada?

Usualmente la programación síncrona hace eso. Ejecuta comandos y no avanza al siguiente comando a menos que el comando en ejecución se termine completamente de ejecutar.

En este caso, tendríamos que esperar hasta que nuestra enamorada tenga ganas de responder, sea positiva o negativamente.

En la programación asíncrona NO funciona así.

Se ejecutan instrucciones y se continúan ejecutando más instrucciones, independientemente si se termina o no una instrucción.

En el caso de nuestro enamorada, mandamos la carta y procedemos a hacer otras actividades. Cuando tenga que responder, responderá. No estamos esperando la respuesta sin hacer ninguna otra actividad.

AJAX. (Asynchronous Javascript and XML) Es la implementación de esta técnica de programación asíncrona en Javascript.

Imagina que estás escribiendo un comentario en Facebook y lo envías.

Con un modelo tradicional síncrono, en cuanto aprietas enter, se envía la solicitud, pero también se actualiza TODO el contenido del navegador (no puedes hacer nada hasta que se actualice la página).

Con un modelo asíncrono, en cuanto aprietas enter, se envía la solicitud y NO se actualiza toda la página. Tu podrías recibir notificaciones, dar likes, etc. Independientemente si el comentario se agrega o no.

La implementación que usa Javascript para AJAX, se llama XMLHttpRequest. Y es un objeto.

Como recordaras, todos los objetos se inicializan con la palabra reservada, new.

var ajax = new XMLHttpRequest();

Los objetos tienen métodos y 2 métodos del objeto XMLHttpRequest son open() y send()

Esto significa que podemos hacer esto:

ajax.open("GET", "paginaEnServidor.txt");ajax.send();

.open() se encarga de preparar la solicitud. En este caso, el primer parámetro es el verbo HTTP, el segundo el lugar a donde va a ejecutar ese verbo.

.send() se encarga de enviarla.

Cabe mencionar que el objeto XMLHttpRequest nativo de Javascript, NO es la única forma de implementar AJAX en nuestro software. También están librerías como jQuery, fetch, superagent, etc. Usualmente su implementación de AJAX es más fácil de realizar.

--

--

Emmanuel Orozco
Laboratoria Developers

Ingeniero de software. Me encanta lo que hago. Odio el vodka. Voy a cambiar el mundo.