Personajes de la Computación - JavaScript

Personajes de la Computación - JavaScript

Inicio esta sección del Blog llamada "Personajes de la Computación" para rendir un homenaje a las personas que han dado todo por hacer que esta ciencia llegue a ser una de las que mas avance ha tenido en las últimas décadas, sobre todo a los científicos, programadores, visionarios, etc, del Software.

Cuando desarrollamos Aplicaciones Web en cualquier plataforma o Framework usamos código del lado del servidor (.NET, Java, PHP, etc) y código del lado del cliente (HTML5, CSS3, JavaScript). JavaScript es un Lenguaje de Programación Interpretado y Orientado a Objetos que fue creado por Netscape en 1995, existen varias versiones de este, como JScript de Microsoft, pero la mas aceptada y estándar es la de ECMAScript (también conocida como ES y actualmente esta en la versión 6 y se viene desarrollando la 7).

En la última década el auge de JavaScript ha sido imparable, gracias a muchos productos innovadores como la Programación Asíncrona con JavaScript y XML (AJAX), el cual esta basado en XMLHTTP creado por Microsoft en 1999 y también por JSON (JavaScript Object Notation) creado por State Software en el 2001 o últimamente jQuery creado en la fundación Mozilla.

Pero detrás de todos estos productos, hay personas que son los responsables directos de dichos productos, algunos de los cuales menciono a continuación y a la vez dejo enlaces para ver mas detalle de su obra, así como también adjunto enlaces a "Libros Publicados" por ellos.

Brendan Eich
País Origen: USA
Año de Nacimiento: 1961 (53 años)
Creador de: JavaScript (1995)
Trabajos: Sillicon Graphics, MicroUnity Systems Engineering, Netscape, Fundación Mozilla

Enlaces:
JavaScript
Brendan_Eich


Douglas Crockford
País Origen: USA
Año de Nacimiento: ? (+60 años)
Creador de: JSON (2001)
Trabajos: Atari, Luciasfilm, Paramount, Electric Communities, State Software, Yahoo, PayPal

Enlaces:
Douglas_Crockford
Videos de Crockford

Libros:
JavaScript: The Good Parts

Alex Hopmann
País Origen: USA
Año de Nacimiento: ? (+45 años)
Creador de: XMLHTTP (1999), AJAX (2002)
Trabajos: ResNova Software, Microsoft, Pure Networks, Launch21 Consulting, DeepRockDrive

Enlaces:
Alex Hopmann
XMLHttpRequest
AJAX


John Resig
País Origen: USA
Año de Nacimiento: 1984 (30 años)
Creador de: jQuery (2006)
Trabajos: Fundación Mozilla

Enlaces:
John_Resig

Libros:
Pro_JavaScript_Techniques

Secrets_of_the_JavaScript_Ninja

Comentario Final

En este primer post de Personajes de la Computación hemos visto un resumen de "4 grandes de JavaScript". Es necesario conocer a quien debemos el honor de simplificar nuestro trabajo del día a día, ya que mucha gente usa JavaScript, JSON, AJAX y jQuery pero no saben quien lo creo, para que empresa trabajaban, porque lo creo, solo se dedican a usar.

Así como sabemos quienes son nuestros padres, hermanos y familiares debemos saber quienes son los amigos que nos ayudan a hacer las cosas mas simples. Sobre todo ver su obra, los libros, documentos o estándares que han compartido sintetizando sus años de investigación y experiencia.
No es lo mismo leer a un "entusiasta" o una persona que recién empieza que al "creador".

En los siguientes post de Personajes veremos los grandes personajes de HTML5, HTTP, Google, Microsoft, Lenguajes de Programación, etc.

Por ultimo, les dejo un refrán: "Dime a quien sigues y te diré como quien quieres ser". Si sigues a estos grandes de la computación, lees sus libros, ves sus conferencias, videos, etc, ten por seguro que algún día podrías también ser un grande.

El Demo del Día: Programación Asíncrona en ASP .NET con XmlHttpRequest

Programación Asíncrona en ASP .NET con XmlHttpRequest

En este breve post veremos como hacer un envío asíncrono usando XmlHttpRequest, para los que no conocen que es, es el padre de AJAX y fue creado por Microsoft por el año 2000 para usarlo en Outlook Web Access (OWA) que era un cliente de correo. Uno de los integrantes y líder del equipo que desarrollo XmlHttp es Alex Hopmann, para mayor información visitar su web:
Alex Hopmann

Requerimiento

Se desea registrar el nombre y la observación de una persona en el servidor, sin hacer un Full PostBack ni refrescar toda la pagina cuando se muestre el resultado, es decir, se desea hacer un envío y recepción asíncrona en forma nativa con HTTP.

Solución

Para enviar asíncronamente datos desde el Cliente Web (Navegador o Browser) hacia el Servidor Web podemos usar XmlHttpRequest desde JavaScript, en cualquier tipo de aplicación del servidor, sea ASP .NET, Java o PHP.

Crear la Aplicación Web en ASP .NET Web Form

Crear un "Nuevo Sitio web vacío de ASP .NET" en C# o VB.NET (en mi caso esta en VB.NET) llamado "Asincrono_XmlHttpRequest":

Nota: Conseguir una imagen para la espera llamada: Progress.gif

Cambiar de nombre a la pagina por "Registro.aspx" y realizar el siguiente diseño:

Para lograr el diseño mostrado, escribir el siguiente HTML:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Registro.aspx.vb" Inherits="Registro" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        function enviarDatos() {
            var nombre = document.getElementById("txtNombre").value;
            var observacion = document.getElementById("txtObservacion").value;
            var espera = document.getElementById("divEspera");
            var xhr = new XMLHttpRequest();
            xhr.open("get", "Registro.aspx?nombre=" + nombre + "&observacion=" + observacion,true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onloadstart = function () { espera.style.display = "inline"; }
            xhr.onloadend = function () { espera.style.display = "none";  }
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var spn = document.getElementById("lblMensaje");
                    spn.innerHTML = xhr.responseText;
                }
            }
            xhr.send();
            return false;
        }
    </script>
</head>
<body style="background-color:aqua">
    <form id="form1" runat="server">
    <div>
        <h1>Envio Asincrono con XmlHttpRequest</h1>
        <h2>Registro de Datos</h2>
        Nombre:<br />
        <asp:TextBox ID="txtNombre" Width="300" runat="server" /><br/>
        Observacion: <br />
        <asp:TextBox ID="txtObservacion" Width="300" TextMode="MultiLine"
           Rows="5" runat="server" /><p />
        <input id="btnGrabar" type="submit" value="Grabar"
           onclick="return enviarDatos();" runat="server" />
        <p />
            <asp:Label ID="lblMensaje" runat="server"></asp:Label>
    </div>
    <div id="divEspera" style="display:none;text-align:center;position:fixed;left:0px;top:0px;
       width:100%;height:100%;background-color:gray;">
        <h1>Espera un momento...</h1>
        <img src="Progress.gif" width="600" height="400" alt="" />
    </div>
    </form>
</body>
</html>

Nota: La función "enviarDatos" se esta asociando al evento "click" del botón para realizar el envio asíncrono usando el método send de la clase XMLHttpRequest. Además para recibir la respuesta del servidor se esta usando el evento "onreadystatechange" en donde se escribe HTML sobre la etiqueta "lblMensaje".

Escribir código en Visual Basic (o C#) para devolver los resultados, no sin antes hacer una pausa simulando la demora del servidor, tal como sigue:

Partial Class Registro
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Dim Nombre As String = Request.QueryString("nombre")
        Dim Observacion As String = Request.QueryString("observacion")
        If Nombre IsNot Nothing Then
            System.Threading.Thread.Sleep(3000)
            Response.Write(String.Format("{0} escribio {1}", Nombre, Observacion))
            Response.End()
        End If
    End Sub
End Class

Nota: Para devolver los resultados del servidor al cliente estamos usando el objeto Response con sus métodos write para escribir la salida y end para enviarla al cliente.

Probar la Pagina Web

Guardar el Sitio Web, clic derecho a la Pagina "Registro.aspx" y seleccionar "Ver en el explorador".
Se mostrará una ventana similar a la mostrada en la siguiente figura:

Ingresar el nombre y la observación y luego clic al botón "Grabar" para realizar el envío de datos asíncrono al servidor. Observen que no se mueve el botón de Refresh del navegador, es decir no se hace un Full PostBack.

Luego, parecerá la pantalla de espera (div) con la imagen del progreso, tal como se muestra en la siguiente figura:

Después de los 3 segundos de espera se mostrará el resultado final sin refrescar toda la pagina, tal como se muestra en la siguiente figura:

Comentario Final

En este pequeño demo hemos visto como podemos llamar y recibir datos en forma asíncrona usando la API de HTML llamada XMLHttpRequest, la cual es nativa y actualmente es soportada por todos los navegadores modernos: Chrome, Firefox, Safari e Internet Explorer.

Esta forma de uso es mas ligera por ser nativa, pero no es tan difundido su uso por un poco de desconocimento (como todas las cosas), la mayoría conoce a los hijos de XMLHttpRequest que son jQuery ($.ajax, $.get, $.post, etc) y Microsoft AJAX Library (ScriptManager, UpdatePanel, Sys, etc).

Descarga:
Demo21_Asincrono_XmlHttpRequest