Mostrando las entradas con la etiqueta XMLHttpRequest. Mostrar todas las entradas
Mostrando las entradas con la etiqueta XMLHttpRequest. Mostrar todas las entradas

miércoles, 15 de julio de 2015

Videos - Curso ASP.NET MVC Editora Perú (Parte 2)

Videos del Curso de ASP.NET MVC en Editora Perú (Parte 2)

Segunda parte del curso de ASP.NET MVC con Demos muy buenos, por ejemplo varias formas de paginación: conectada, desconectada parcial y desconectada total, además de una aplicación que incluye un Login cifrado y una consulta y actualización de empleados, incluyendo su foto.

Demo 16 - Paginación Conectada Asincrona con XmlHttpRequest y String

En este video se muestra como paginar en forma conectada y asíncrona, es decir, se obtiene cada pagina desde la base de datos (con un procedimiento almacenado) y luego este es enviado como una cadena al cliente.

La llamada de este método se hace en JavaScript en forma asíncrona con XmlHttpRequest y se forma el HTML dinamicamente con los datos (string) devuelto por el servidor.

Esta técnica debe usarse cuando los datos a consultar deben hacerse en línea, ya que varian constantemente, por ejemplo, el stock de los productos.


Demo 17 - Paginación Desconectada Parcial Asincrona

En este video se muestra como paginar en forma desconectada parcial y asíncrona, es decir, una sola vez se hace el envio de datos desde el Servidor de Datos al Servidor Web y se guarda en un objeto TempData.

Se crea un método (acción) en el Controlador que permite Paginar, recuperando del TempData los datos y devolviendo los datos de una sola pagina en forma de cadena.

La llamada de este método se hace en JavaScript en forma asíncrona con XmlHttpRequest y se forma el HTML dinamicamente con los datos (string) devuelto por el servidor.

Esta técnica debe usarse cuando los datos a consultar no se necesitan en línea (desconectado) y son muchos registros (mas de 1000 por ejemplo).


Demo 18 - Paginación Desconectada Total Asincrona

En este video se muestra como paginar en forma desconectada total y asíncrona, es decir, una sola vez se hace el envio de datos desde el Servidor de Datos al Servidor Web y de éste al Cliente.

Se envian como cadenas los datos de los productos y en el cliente usando JavaScript se forma el HTML de la tabla y los índices de paginas y se asocia a una función de JavaScript que permite paginar.

Esta técnica debe usarse cuando los datos a consultar no se necesitan en línea (desconectado) y son pocos registros (menos de 1000 por ejemplo).

La gran ventaja de esta técinca es que si se cae el Servidor Web o el Servidor de Datos no afectaría a la pagina ya que funciona todo localmente.


Demo 19 - Login, Consulta y Actualización con Foto (Parte 1)

En esta primera parte, se muestra un video de como crear un Login usando un Filtro de Autenticación validando  mediante un objeto de Sesión.

El login corresponde al usuario asignado a un cliente y esta cifrado usando JavaScript mediante el algoritmo hash MD5 implementado en la librería creada por Google CryptoJS.


Demo 19 - Login, Consulta y Actualización con Foto (Parte 2)

En esta segunda parte se muestra como crear una Consulta de Empleados por código, la cual incluye los datos del Apellido, Nombre, Fecha de Nacimiento y la Foto del Empleado.


Demo 19 - Login, Consulta y Actualización con Foto (Parte 3)

En esta tercera parte del video se muestra como actualizar los datos del empleado (incluyendo la foto) en forma asíncrona usando XmlHttpRequest mediante el método "post" y un FormData.

Para grabar la foto se envía como cadena (base 64) pero sin cabecera, pero en el servidor se convierte a array de bytes y luego se pasa a la entidad de negocio y se envia a la regla de negocio que permite actualizar los datos del empleado, incluyendo la foto.


Lo destacado de todos los demos es que son asíncronos y consumen el menor ancho de banda, ya que uso mi propio serializador de cadenas y uso XHR (asíncrono nativo).

martes, 7 de julio de 2015

Videos - Curso ASP.NET MVC Editora Perú (Parte 1)

Videos del Curso de ASP.NET MVC en Editora Perú (Parte 1)

Comparto la primera parte del Curso de ASP.NET MVC realizado en Editora Perú (Diario El Peruano y Agencia de Noticias Andina), en donde casi todos los demos son en forma asíncrona con la mejor performance (XmlHttpRequest y Strings).

Demo 10 - Consulta Conectada Sincrona con Todo el HTML

En este video se muestra una aplicación que permite filtrar los productos por categoría en forma conectada, es decir, consultando en cada momento a la base de datos usando librerías.

Para mostrar los datos del filtro se vuelve a mostrar la Vista completa, es decir todo el HTML, por lo cual se ve el parpadeo.


Demo 11 - Consulta Conectada Asincrona con Ajax Form y Vista Parcial

En este video se muestra una aplicación que permite filtrar los productos por categoría en forma conectada, es decir, consultando en cada momento a la base de datos usando librerías.

A diferencia del demo anterior, la consulta es asíncrona usando un Formulario Ajax y una Vista Parcial que solo muestra la tabla de productos, por lo que no ocurre el parpadeo.


Demo 12 - Consulta Conectada Asincrona con jQuery Ajax y JSON

En este video se muestra una aplicación que permite filtrar los productos por categoría en forma conectada, es decir, consultando en cada momento a la base de datos usando librerías.

A diferencia del demo anterior, la consulta es asíncrona usando jQuery Ajax y JSON que disminuye los datos enviados al cliente en casi la mitad con respecto a la vista parcial.


Demo 13 - Consulta Conectada Asincrona con jQuery Ajax y String

En este video se muestra una aplicación que permite filtrar los productos por categoría en forma conectada, es decir, consultando en cada momento a la base de datos usando librerías.

A diferencia del demo anterior, la consulta es asíncrona usando jQuery Ajax y Strings para lo cual se crea un Serializador que permite convertir la Lista de Objetos en Cadenas separadas por un delimitador de campos y otro de registros.

Esta técnica permite reducir los datos enviados al cliente en casi la tercera parte con respecto a JSON, es decir, el HTML es el 100%, Vista Parcial 50%, JSON 25% y Strings 8%. Esta última tecnica que propongo es la máxima en Performance.


Demo 14 - Consulta Desconectada Parcial Asincrona con jQuery Ajax y String

En este video se muestra una aplicación que permite filtrar los productos por categoría en forma desconectada parcial, es decir, desconectada de la base de datos, pero conectada al servidor web.

La consulta es asíncrona usando jQuery Ajax y Strings para lo cual se crea un Serializador que permite convertir la Lista de Objetos en Cadenas separadas por un delimitador de campos y otro de registros.

En el Servidor Web los datos se guardan en un TempData al inicio y luego se recuperan cada vez que se filtra, viajando solo una cadena conteniendo los productos por categoría.


Demo 15 - Consulta Desconectada Total Asincrona con jQuery Ajax y String

En este video se muestra una aplicación que permite filtrar los productos por categoría en forma desconectada total, es decir, desconectada de la base de datosy del servidor web.

La consulta es asíncrona usando jQuery Ajax y Strings para lo cual se crea un Serializador que permite convertir la Lista de Objetos en Cadenas separadas por un delimitador de campos y otro de registros.

Todos los datos de categorias y productos se envian al cliente, pero solo se guardan los productos para poder filtrarse por JavaScript.


Los alumnos que alguna vez llevaron conmigo ASP.NET MVC, se daran cuenta que la forma como estamos programando es un poco diferente, ya que uso mas JavaScript y menos C#.

lunes, 23 de marzo de 2015

Videos - Curso de ASP.NET MVC Domingos (Parte 3)

Videos del Curso de ASP.NET MVC Domingos (Parte 3)

Comparto la tercera parte del Curso de ASP.NET MVC realizado los Domingos.

Curso de MVC Domingos - Demo 11 - Consulta Asíncrona en el Servidor con jQuery Ajax y JSON

En este video se muestra como realizar una consulta asíncrona de productos por categoría usando jQuery Ajax y devolviendo una lista de objetos como JSON para escribir el HTML en el cliente por Javascript.


Curso de MVC Domingos - Demo 12 - Consulta Asíncrona en el Servidor con XmlHttpRequest y Strings

En este video aprenderemos como realizar una consulta asíncrona de productos por categoría usando XmlHttpRequest (lo que usa internamente jQuery y Ajax) y devolviendo una cadena (String) para reducir el ancho de banda ya que es la octava parte de una vista parcial y la tercera parte de un JSON.


Curso de MVC Domingos - Demo 13 - Consulta Desconectada en el Cliente con jQuery Ajax y JSON

Este video muestra como realizar una consulta de productos por categoría totalmente desconectada del servidor web y de base de datos, recibiendo la primera vez todos los datos como JSON usando jQuery Ajax y filtrándolos en el cliente por JavaScript.


Curso de MVC Domingos - Demo 14 - Ordenación Desconectada en el Cliente con jQuery Ajax y JSON

En este video se muestra como ordenar los productos en el lado del cliente, totalmente desconectado del servidor web y de datos, para lo cual inicialmente hacemos una llamada asíncrona con jQuery Ajax y devolvemos un JSON con los productos los cuales se ordenan usando una función genérica de JavaScript.



viernes, 12 de diciembre de 2014

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.

jueves, 16 de octubre de 2014

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