Ingeniería Systems: Una web más inteligente

Regresar al índice

Comunicación asincrónica

Piensen un segundo en dos personas que están una al lado de la otra, hablando el mismo idioma, y respondiéndose a medida que la otra pregunta, en tiempo real. Por otro lado, imagínense hace cientos de años, a una persona enviando una carta a otra que vive a cientos o miles de kilómetros de distancia.
En el primero de los casos, como ambas personas están en simultáneo entablando conversación, se mantienen en un mismo tiempo embarcadas en la misma tarea de comunicación. Mientras que en el segundo de los casos, la primer persona escribe la carta, la envía, y continúa con su vida. La segunda persona, tiempo después, recibirá la correspondencia e interrumpirá sus tareas en algún momento para responder y continuar con la comunicación.
El segundo de los casos, es lo que se denomina comunicación asincrónica, en la cual las dos partes se comunican de manera diferida en el tiempo, es decir, cuando no están conectadas al mismo tiempo. Esto es lo que ocurre con el correo electrónico o con los foros, donde alguien deja una comunicación y luego algún otro usuario contesta al mensaje.
En la computación, la comunicación asincrónica o no bloqueante es una forma de procesamiento que permite seguir ejecutando programas antes de que la transmisión y recepción de las respuestas hayan terminado.
El envío de información entre dos subsistemas es mucho mas lento que el procesamiento de datos dentro de un mismo sistema. Por ello, si nosotros nos quedamos esperando a que una comunicación se finalice antes de continuar con el resto de nuestro programa, probablemente estemos dejando muchos recursos de la computadora sin uso. Por eso es que usamos la comunicación asincrónica, donde solo quedan bloqueados los procesos que requieren de que se complete la comunicación, mientras que el resto del procesamiento sigue su curso.

Mejorando interfaces asicrónicamente

Una de las cosas mas interesantes que podemos hacer cuando programamos de manera asincrónica, es ir partiendo nuestras interfaces en pequeñas partes que, gracias al tipo de programación que estamos aprendiendo, pueden ir actualizándose sin necesidad de recargar toda la página.
Por ejemplo, si ustedes entran en Outlook.coma chequear sus correos electrónicos, y seleccionan alguno de los correos de la columna izquierda, verán que no se recarga toda la página para mostrarles el contenido del mismo. Años atrás, cuando las tecnologías que usaremos no estaban desarrolladas, constantemente las interfaces se refrescaban completamente, haciendo que nosotros nos cansemos porque también la velocidad de conexión a internet era mas baja. Hoy día, no solo las velocidades son mas altas sino que también lo que se refresca (y por ende la información que se descarga) son solo partes parciales de la pantalla, haciendo nuestra experiencia mas amigable.

AJAX (o AJAJ)

En la actualidad, las aplicaciones Web pueden enviar datos a, y recuperar datos de, un servidor de forma asincrónica (en segundo plano) sin interferir con la visualización y el comportamiento de la página existente. Los datos pueden ser recuperados mediante un tipo de dato que se llama XMLHttpRequesty que iremos viendo. A pesar del nombre, no se requiere el uso de XML, que es un lenguaje utilizado principalmente para la transmisión de información, sino que JSONse utiliza a menudo en lugar (otro tipo de lenguaje para comunicación), y no siempre las comunicaciones son 100% asincrónicas.
Para realizar este tipo de comunicaciones en la web, que actualice partes de las interfaces se suele utilizar Ajax(o AJAJen el caso de utilizar JSON), que no es una sola tecnología, sino un grupo de tecnologías. HTML y CSS pueden usarse en combinación para armar las interfaces y darle diseño. El DOM(que es la información que corresponde a como está armada la interfaz HTML) se accede con JavaScript para modificarla dinámicamente, y permitir al usuario interactuar con la información presentada. JavaScript y el objeto XMLHttpRequestproporcionan un método para el intercambio de datos de forma asíncrona entre el navegador y el servidor para evitar cargas de una página completa.

El DOM

Fui muy rápido? El DOM es un convención estándar que me permite representar e interactuar con elementos del HTML, XML u otros lenguajes. El DOM me permite que si en un HTML tengo un título con el tagH1, podré eventualmente, accederlo mientras estoy ejecutando mi sistema, y modificarlo como necesite. De esa manera, cuando en mi interfaz recibo una interacción del usuario, mediante AJAX o AJAJ, envío información al servidor, y continúo mostrando mi interfaz inalterada. Cuando recibo la respuesta a mi comunicación, accedo al DOM y le pido que modifique la parte del HTML que necesito alterar. Por ejemplo, en el caso de nuestro correo, le pido al servidor que me envíe información correspondiente al mail que seleccioné en la columna de la izquierda y mi interfaz se mantiene inalterada hasta que me devuelven el contenido del correo y actualizo solamente la sección de la derecha donde se muestran los correos.

Ejemplo básico

<!DOCTYPE html>
<html><head>
<script>
functionshowHint(str)
varxmlhttp;
if(str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script></head>
<body>
<h3>Comience a tipearun nombre</h3>
<formaction=""> Nombre: <input type="text" id="txt1" onkeyup="showHint(this.value)" /></form>
<p>Sugerencia: <spanid="txtHint"></span></p>

</body></html>

Cada vez que el usuario presiona una tecla, entonces, se llamará a la función de JavascriptshowHint, incluyendo el valor tipeado, para que la misma lo envíe a la página gethint.asp, de manera de obtener una sugerencia de nombre en caso de que lo tenga. Siempre que la longitud de la cadena que se encuentra en el campo de ingreso de texto txt1 sea mayor a 0, se enviará la información para su evaluación.
El contenido del archivo gethint.asp es el siguiente:

getHint.asp

<%response.expires=-1
dim
a(30)a(1)="Ana"
a(2)="Bernarda"
a(3)="Clara"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gabriela"
a(8)="Helena"
a(9)="Ingrid"
a(10)="Johana"
a(11)="Karen"
a(12)="Lisa"
a(13)="Nina"
a(14)="Oriana"
a(15)="Paula"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cinthia"
a(19)="Doris"
a(20)="Inti"
a(21)="Elisa"
a(22)="Dora"
a(23)="Solange"
a(24)="Yanina"
a(25)="Violeta"
a(26)="Sabrina"
a(27)="Elizabeth"
a(28)="Hilda"
a(29)="Marta"
a(30)="Eugenia"

'recibir el parámetro que me enviaron desde el HTMLq=ucase(request.querystring("q"))
'buscar las sugerencias siempre que la longitud de q>0

if len(q)>0 then 
hint=""
for i=1 to 30 
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
Retornar "sin sugerencia" si no se encuentran coincidencias'o retornar el valor encontrado
if hint="" then
response.write("sin sugerencias")
else
response.write(hint)
end if
%>

AJAX con archivo remoto

En el ejemplo anterior, simplemente hicimos un llamado asincrónico a un archivo ASP que nos devolvió un dato a mostrar. En vez de ello, podríamos requerirle a una aplicación remota un archivo en formato XML o JSON con una variedad de datos y luego interpretarlos y mostrarlos en nuestro programa. Eso es por ejemplo lo que hacen las aplicaciones de nuestras computadoras que nos muestran el clima. Se conectan a páginas como accuweather.comy nos traen archivos XML o JSON. Simplemente reemplazamos la función showHinten nuestro HTML original por otra que podamos llamar y que se ocupe de traer la información. Por ejemplo:

Esta función recibirá como parámetro la dirección de donde debe ir a buscar el archivo XML, y luego recorrerá el archivo XML y armará una tabla en nuestra interfaz gráfica con toda la información recuperada.

XML

Hemos estado mostrando como mediante AJAX (que significa AsynchronousJavascriptand XML) podemos actualizar partes de mi interfaz de usuario, sin necesidad de bloquear los otros procesos. Esto lo hicimos mediante XML, aunque mencionamos que también existe un lenguaje para la comunicación llamado JSON. Pero qué son estos dos lenguajes que mencionamos?
XML, al igual que HTML, es un lenguaje de marcas que define un conjunto de reglas para la codificación de documentos en un formato que es a la vez legible y legible por máquina. Los objetivos del diseño de XML hacen hincapié en la simplicidad, generalidad, y la facilidad de uso a través de Internet.

Un archivo XML posee un ecabezadode la siguiente forma

<?xmlversion="1.0" encoding="UTF-8"?>

Y luego, se compone de una estructura que permite anidaciones, donde siempre tenemos un tago marca de apertura y uno de cierre de la siguiente forma:

<persona>
<nombre>John</nombre>
<apellido>Doe</apellido>
<documento>23456789</documento>
<auto>
<marca>Ford</marca>
<modelo>Escort</modelo>
<fabricado>2006</fabricado>
</auto>
</persona>

XML es tan sencillo como lo que acabamos de ver, y en las comunicaciones entre subsistemas, se documenta cual será el formato del archivo, y en nuestra aplicación simplemente tendremos que contemplar que la información que intentemos leer sea la que el otro sistema nos esté proveyendo.

JSON

JSON por otro lado, que significa JavascriptObjectNotation, también es un estándar abierto que permite transmitir pares de datos que contienen el nombre del atributo y el valor que corresponde.
Para transmitir a través de un archivo .jsonlos datos correspondientes a una persona, escribiríamos algo del siguiente tipo:

{

"nombre": "John",
"apellido": "Doe",
"edad": 25,
"altura_cm": 167.64,
"direccion": {
"calle": "21 2nd Street",
"ciudad": "New York",
"estado": "NY",
"codigoPostal": "10021-3100"
},
"telefono": [
{ "tipo": "casa", "numero": "212 555-1234" },
{ "tipo": "fax", "numero": "646 555-4567" }
]
}

Y luego, para leer el dato, simplemente usaremos funciones provistas por librerías de Javascriptdel tipo:

varp = JSON.parse(contact);

AJAJ

El siguiente código de JavaScript es sólo un ejemplo de un cliente que utiliza XMLHttpRequestpara solicitar datos en formato JSON desde un servidor. (La programación del lado del servidor la omitimos, pero asumimos que debe ser configurado para solicitudes de servicio a la urlque contiene una cadena con formato JSON.)

varmy_JSON_object;
varhttp_request= new XMLHttpRequest();
http_request.open("GET", url, true);
http_request.onreadystatechange= function() {
vardone = 4, ok = 200;
if(http_request.readyState=== done && http_request.status=== ok) {
my_JSON_object= JSON.parse('''http_request.responseText''');
}
};
http_request.send(null);

El objeto XMLHTTPRequestes simplemente un tipo de datos que permite hacer pedidos a un servidor vía internet (y recibir las respuestas) de objetos de comunicación que pueden ser XML, JSON, HTML, archivos de texto u otras variedades.

Procesos batch

El procesamiento batches la ejecución de una serie de programas ("trabajos") en una computadora sin intervención manual.
Los trabajos se establecerán de tal modo que se pueden ejecutar hasta el final sin interacción humana. Todos los parámetros de entrada están predefinidos por los scripts o programas que desarrollamos, información que les enviamos al comienzo de ejecución, archivos o el propio lenguaje de control de trabajos.
De esa manera, podríamos tener un programa en el servidor calculando constantemente cual será el clima de la próxima semana, escuchando en un puerto del servidor por pedidos por parte de las computadoras de los usuarios que necesitan la información y enviándola mediante XML o JSON para que sea consumida correctamente. Estos procesos no se encuentran controlados directamente por ningún usuario mediante una interfaz de usuario, sino que una vez que se ponen en ejecución, simplemente harán su trabajo hasta que lo terminen o sean interrumpidos.
Existen distintas formas de realizar un proceso batch. Algunos consisten en simplemente generar un programa y luego decirle al sistema operativo que el mismo es una tarea que debe ejecutar cada cierto tiempo, o en determinados momentos.
Otra forma es hacerlo mediante nuestro programa, como parte del mismo, ejecutándose mientras nosotros continuamos con otras tareas. Para ello, los pasos en ASP.NET son como sigue:

Añadir un elemento a la HttpRuntime.Cachecon un vencimiento fijo, al comienzo de nuestro código.
Cuando expire la caché, hacer el trabajo, como WebRequesto lo que sea.
Volver a añadir el elemento a la caché con un vencimiento fijo.

Proceso batch-ejemplo

Este código corre cada 60 segundos, ejecutando nuestras tareas. Sin embargo quizás no sea la mejor de las opciones debido a la utilización poco óptima de los recursos, en particular de la memoria caché (una de las memorias de la computadora).
Existen diversas soluciones que exceden al alcance del presente curso, pero que recomendamos su investigación.
http://msdn.microsoft.com/en-us/magazine/cc163854.aspx