Asincronicidad Simple, orquesta links y formularios

Quizá la mayor pelea en temas de experiencia de usuario, algo que históricamente ha causado que programadores busquen diferentes tecnologías, es el tema de recargar la página cada vez que se hace alguna acción.

Se argumenta que se pierde la intención y el contexto, que genera errores y que el usuario pierde su norte cuando existe un "refresh" de toda la página. Inicialmente era un tema de "performance" porque había que cargar todo otra vez y el ancho de banda era limitado, ahora es más bien un tema de comodidad, el usuario quiere poder hacer acciones en cadena si tener que refrescar y buscar los "call to actions".

Al rescate la asincronía, una funciónalidad propia de javascript que gracias a sus capacidades de AJAX permite lanzar una tarea en plano oculto, y al terminar actualizar solo los elementos del DOM requeridos para notificar al usuario el resultado del proceso.

En lo personal, creo que la mejor implementación de esta tecnología la tiene un lenguaje bien probado construido como extensión de javascript, JQuery. Sin duda es más simple que cualquier construcción con frameworks complejos tipo Angular, React o hasta Vue. Además considero brinda mejor control y menos dependencia, no requiere precompilación y es muy ágil.

JQuery es un complemento excelente para el front y la interacción con el back de Coldfusion. veamos un ejemplo práctico, lo primero es incluir las librerias en la página donde quieres usarlo

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

Con esta librería agregada, ya podemos hacer maravillas con javascript usando menos lineas de código, y con una sintaxis más amigable, veamos primero la lógica de una solicitud al oprimir un simple link.

Vean la diferencia entre como es un link normal y un link que mediante su ID permite asincronía. En este segundo, en lugar de tener un href de la pagina a la que queremos ir tenemos un simple identificador del objeto para poder interactuar con el, vincular acciones y referencias.

<!--- LINK NO ASINCRONO --->
<a href="pagina.cfm">Ejecutar Proceso</a>

<!--- LINK ASINCRONO --->
<a id="doProcessLink">Ejecutar Proceso</a>

Nota que también se puede hacer asincronía referenciando todos los <a>'s de un DOM con $("a"), o mediante el constructo de clases.

Con este atributo ya podemos hacer lo que queramos! por ejemplo, al hacerle click se muestre una alerta con el texto "hola mundo". Observa por favor como esta acción sucede sin que se recargue la página.

<script>
$("#doProcessLink").click(function(){
  alert("hola mundo");
});
</script>

Extendamos esto para hacer una llamada asincrona a la página que ejecuta el proceso que quiero. Esto se va a hacer en un plano secundario cuando oprimas el link gracias justamente a la función AJAX de $.get (o $.post)

<script>
$("#doProcessLink").click(function(){
    // ASYNC CALL 
   $.get("http://kraken:8500/cflat/api.cfm", 
        function(data, status){
                alert("Data: " + data + "\nStatus: " + status);
          });  
});
</script>