La web tiene menos de 30 años entre nosotros y en este poco tiempo ha cambiado el mundo tanto, como en su momento lo hizo la imprenta. Si observamos claramente, la gran mayoría del mundo utiliza de cierto modo la web, para enviar un correo, para ver vídeos en YouTube, para redes sociales, en fin, para una infinitud de cosas que ya hace parte de nuestra vida cotidiana, siendo así, indispensable en la sociedad.
Algo que nos preguntamos es ¿Cómo funciona la web?
La web trabaja con una arquitectura cliente/servidor, donde el cliente solicita recursos al servidor, el servidor verifica que este cliente cumpla con los requisitos y tenga los permisos para acceder a dicha información, en caso de cumplirlos, el servidor entregará la información.
Recordemos que una arquitectura en programación, consiste en la estructura de componentes y sus relaciones para construir un sistema. En el caso de la web, existe un servidor que es el que almacena la información y un cliente que consulta esa información que suele ser una persona en un navegador web.
La web no es el único sistema qué utiliza la arquitectura cliente/servidor, también lo podemos ver en el uso de correo electrónico, transacciones en línea, o también, en accesos a recursos como impresoras, escáner, documentos etc.
En el caso de la web, las peticiones se hacen normalmente en cada evento de un cliente, por ejemplo, un clic en un enlace o un inicio de sesión; Tradicionalmente cada petición al servidor requiere recargar, refrescar o actualizar la página para ver la nueva información, esto puede ser normal si se va a otra página interna del sitio, pero no es eficiente cuando lo que se quiere es solo cambiar un fragmento de la página, como un chat, un mapa, o mostrar alguna información contextual sobre una compra.
Una vez tenemos claro el funcionamiento de la web, entraremos a fondo en el tema que nos interesa, funcionamiento de “AJAX” y “Websockets”
Arquitectura AJAX cliente / servidor
Ajax llegó a la web para revolucionar y optimizar su funcionamiento, haciendo que esta se pueda fragmentar para actualizar o refrescar no toda la página web, sino solo una parte de ella.
Para entender mejor este concepto, podemos recordar que, en años anteriores cuando se hacía una actualización en cualquier parte de la web, se debía espera a que esta se actualizara por completo, gracias a esta técnica de desarrollo Ajax, se logra que sea solo un fragmento en la página web se actualice, al lograr esto surgen las múltiples aplicaciones y dinamismos en la web, como lo es el caso de validación de cupones, inicio de sesión, formularios, entre otros.
Antes de continuar, hablaremos de donde viene el término AJAX.
Como bien sabemos, la web funciona bajo el protocolo HTTP que es el conjunto de reglas que deben seguir cliente / servidor para comunicarse efectivamente. Las peticiones HTTP no tienen información de estado, por eso se manda desde “frontend” una información de sesión (cookies), y un proxy permite crear cachés y balancear las cargas.
También cuenta con un lenguaje de programación interpretado orientado a objetos, como lo es “JavaScript”, el cual sirve para que los usuarios puedan interpretar sus acciones mientras están navegando en la web.
Al igual la web, cuenta con el objeto creado por Microsoft, XMLHttpRequest o XHR, el cual su función es poder hacer peticiones solo a ciertas partes de la página sin necesidad de recargarlas, estas consultas retornaban como código XML.
Recordando estas funciones principales de la web, podemos proceder a explicar con exactitud la procedencia de AJAX.
Tenemos que es un conjunto de estas tecnologías donde observamos que se compone de:
Asynchronous, JavaScript, And XML (AJAX), siendo un modo de programación que no bloquea la ejecución de otros procesos mientras resuelve ciertas peticiones, realizando estas acciones de manera asíncrona, haciendo que esta acción solo sea interpretada de acuerdo a la petición de solo un fragmento de la página, y el servidor valida y responde solo a ese fragmento, haciendo acciones como: cambio de colores, cambio de números, importante para listas de precios con cupones de descuento.
Podemos observar estas peticiones por XMLHttpRequest con pequeño ejemplo.
XML, es un lenguaje demarcado de información, es decir, un lenguaje de estructura, muy parecido a HTML. Hablaremos de la evolución que ha tenido este lenguaje.
Con XML, marcamos la información. Seguido a eso se crea una etiqueta con el nombre que asignamos, el cual envuelve todos los datos que vamos a entregar, donde cada dato cuenta con una descripción, haciendo que el código sea bastante amplio, y por cada dato, son más Bites que se envían. Con la evolución que ha tenido XML aparece JSON reduciendo la sintaxis del código agilizando los procesos, todo esto nos conlleva a que AJAX, utiliza esta misma tecnología, con una sintaxis más corta y eficiente.
Podemos observar en el siguiente ejemplo el funcionamiento de XMLHttpRequest (XHR)
Se instancia el Objeto XMLHttpRequest.
const xhr = new XMLHttpRequest()
Luego configuramos la petición con el método open.
// configurar la petición
xhr.open('GET',url,true)
Seguido a eso, indicamos que vamos hacer con esa petición.
// que hacer con la petición
xhr.addEventListener('load', hacerAlgo)
Y, por último, el método “send” es quien realiza la petición.
// realizar la petición
xhr.send()
Promises, Fetch y Axios
Explicaremos un poco el termino asíncrono que utiliza Ajax, el ejemplo más claro es el siguiente código. Donde por medio de la función “console.log” imprima un dato en este caso “a”, luego, espere un segundo e imprima el dato “b” y por último imprima el dato “c”.
console.log('a')
setTimeout( () => console.log('b'), 1000)
console.log('c')
Cuando se ejecutan estas líneas de código hacen que se imprime “c” antes que “b”; es decir, la ejecución salta a la siguiente línea y no espera que la función termine para continuar con las siguientes, así podemos entender la denominación de asíncrono.
Pasa lo mismo con una petición AJAX , donde el código puede saltar líneas y si el resultado de la petición es para dar continuidad y si esta no se ha completado afectará el programa por completo, generando un error y el programa terminaría, con esta acción no se tiene la certeza de saber en qué momento va a terminar la ejecución o petición de un proceso, para poder enviar otro proceso que depende de él.
Otro ejemplo:
let b
console.log('a')
setTimeout( () => b = 10, 1000)
console.log(b)
//a
// Invalid or unexpected token
Para el correcto funcionamiento de este código, necesitamos una forma de decirle: “espera a que la función anterior termine”, es aquí donde se utiliza las funciones “callbacks” siendo funciones que se ejecutan en otras, esto se hace para estar seguros que van a ejecutarse cuando termine la acción anterior; sin embargo, al ser funciones dentro de funciones, la anidación de “callbacks” puede volverse inmantenible, a esta acción se le conoce como “callback hell”, siendo muy difícil de controlar.
Una mejora es el uso de promesas, las cuales son una revolución de Javascript. Donde las “promesas” permiten esperar a que se cumpla o se rechace la acción o “promesa”. La mejor manera es entenderlo, es con un ejemplo real.
“Si ordenas tu cuarto, te compro una hamburguesa”
Ordenar el cuarto es la petición, la “promesa” sería el premio (la hamburguesa).
Las promesas son acciones que van a pasar a futuro, si se cumple o no, las acciones continúan, es lo que pasa con Javascript, sin saber el resultado de la “promesa”, la página no se bloquea y los demás procesos siguen ejecutándose.
Lo podemos visualizar con la siguiente sintaxis:
let promesa = () => {
return new Promise((resolve,reject) => {
resolve(hacerAlgo) // resuelve la promesa
reject(hacerOtraCosa) // rechaza la promesa
})
)
// Ejecutamos la promesa
// .then, cuando se resuelve la promesa
// .catch, cuando se rechaza la promesa
promesa()
.then(funcion)
.catch(otraFuncion)
Fetch
“Fetch” es una nueva API que nos permite hacer peticiones sin usar XHR de una manera muy sencilla, donde “Fetch”, realiza las promesas maximizando las líneas de código, haciéndolo más corto y mejor aún, es compatible con todos los navegadores.
fetch(url)
.then(response => response.json())
.then(response => { hacerAlgo() })
En resumen, AJAX es una técnica que permite, mediante programas escritos en Javascript, que un servidor y un navegador intercambien información, posiblemente en XML de forma asíncrona. Ya hemos hablado de Ajax, ahora, pasemos a hablar de los Websockets.
Websockets
Los WebSockets son muy similares a Ajax, debido a su similitud, un error que se comente, es pensar en dejar de usar Ajax porque Websockets es su reemplazo, pero no, son tecnologías diferentes, donde Ajax funciona, haciendo una petición, y el servidor toma su tiempo para dar una respuesta, en el caso de los websockets, siempre habrá un canal abierto por el cual viene y van datos, sin la necesidad de esperar respuesta del servidor, como lo es un Chat, se visualiza cuando la otra persona está escribiendo, esa función se realiza por medio de este canal abierto.
Explicado de otra manera; los websockets son un protocolo de comunicación que abren un canal de comunicación entre en el cliente y el servidor, con la peculiaridad de que este canal estará siempre abierto, y se usa tanto para recibir como para enviar datos (full duplex). Mientras que en Ajax hay que realizar una petición para cada dato que se quiere obtener, en Websockets, la comunicación es permanente y se usa para comunicación en tiempo real: notificaciones, chats, mapas entre otros.
Ejemplo de código de websockets:
let ws = new Websocket(url)
ws.onopen = notificarQueEstoyConectado
ws.send('Hola servidor')
ws.onmessage = leerMensajeDelServidor
ws.onclose = adiosServidor
Nota, cabe aclarar que el servidor debe estar configurado correctamente para abrir los Websockets y pueda recibir y enviar datos.
Ya para concluir, vamos a mencionar las diferencias entre estas dos tecnologías Ajax y Websockets.
Concluyendo podemos observar que tanto Ajax como Websockets permite hacer una petición de solo una parte de la página, a diferencia que Ajax, es de una sola vía y Websockets es de doble vía, Ajax, hace una petición para solicitar cierta información, mientras que Websockets, mantiene un canal abierto, donde la comunicación permanece continua.
No olviden amigos, Websockets no sustituye a Ajax y Ajax no sustituye a Websockets.
Recuerda que si deseas aprender a profundidad Ajax y Websockets tenemos un curso disponible 👉 https://ed.team/cursos/ajax-ws