AJAX y su integracin con las plataformas de desarrollo

Ing. Miguel Angel Celin Polo

Politecnico Grancolombiano

Aplicaciones de Escritorio vs Web

Las Aplicaciones Desktop ofrecen al usuario el uso de procesos e interfaces sofisticadas. La simplicidad y lmites de las Aplicaciones Web (HTML) marcan la diferencia entre la interaccin con una aplicacin Web y una Desktop. Desarrolladores Web sacrifican la experiencia del usuario por la compatibilidad entre navegadores.

Modelo Tradicional

Web 2.0
Internet basado en servicios, permite a los usuarios colaborar entre s y compartir informacin de un nuevo modo. La web es la plataforma y los datos el procesador. Nuevos buzzwords: AJAX, RSS, Wikis, Semantic Web, Mash-ups, Rich Internet Apps, Web services

Presentando AJAX
AJAX brinda la posiblidad crear aplicaciones web enriquecidas, muy interactivas con los usuarios (RIA). AJAX permite procesar informacin considerables pausas y sin perder el estado. Es una combinacin existentes:
XHTML y CSS (DHTML) XMLHttpRequest JavaScript Document Object Model XML y XSLT

sin

de

varias

tecnologas

Modelo AJAX
AJAX mejora la experiencia del usuario usando el objeto XMLHttpRequest para realizar llamadas al servidor e invocar servicios Web sin refrescar la pgina completamente. La porcin de la pgina que es actualizada es modificada mediante JavaScript con el XML que es recibido. El usuario puede seguir interactuando con la pgina mientras que un proceso asncrono se esta ejecutando en un segundo plano.

Modelo AJAX

Tecnologas AJAX
XHTML y CSS: estndares usados para la presentacin y el diseo de la informacin. XML y XSLT: intercambio y manipulacin de datos. Document Object Model (DOM): expone los elementos de una pgina HTML como una coleccin estndar de objetos (document, window) que pueden ser manipulados programaticamente.

XMLHttpRequest
XMLHttpRequest enva y recibe de forma asncrona informacin del servidor. XMLHttpRequest provee de los siguientes mtodos y propiedades:
open crea la conexin. send enva la peticin al servidor. responseXml informacin del servidor en XML. responseText informacin del servidor en texto simple. readyState indica el status de la disponibilidad de la informacin.

JavaScript
AJAX extiende el uso de script del lado del cliente. Javascript se utiliza para hacer llamadas a procedimientos remotos para despus realizar el proceso en el cliente. Tambin es usado caractersticas de la UI. para mejorar

Por qu usar AJAX

Para construir rpidos y dinmicos sitios web. Para ahorrar recursos.
Es mejor usar los recursos de todas las computadoras cliente que slo los de un servidor y una red. Ajax permite realizar procesos en la computadora cliente (con JavaScript) con datos provenientes del servidor. El proceso de crear la pgina es realizado en el servidor antes de ser envada a traves de la red.

Limitantes
El desarrollo de aplicaciones con AJAX requiere del conocimiento de los objetos del documento (DOMs), los cuales difieren entre los distintos navegadores. JavaScript no ofrece todas las caractersticas de la programacin orientada a objetos, ni del cdigo administrado que el.NET Framework ofrece. Crear aplicaciones web, con programacin del lado del cliente requiere del expertis con un nuevo lenguaje y una nueva plataforma de desarrollo.

Introduccin al AJAX de Microsoft

Facilita el uso y extiende los beneficios de AJAX sobre la plataforma ASP .Net. Permite la creacin de pginas ASP.NET con una enriquecida e interactiva UI, adems de comunicarse con el servidor. Integra libreras de cdigo cliente con el framework de ASP.NET 2.0, ofreciendo la misma plataforma de desarrollo del lado del cliente.

Objetivos del AJAX de Microsoft

Crear una plataforma altamente productiva para las aplicaciones web
Suite enriquecida de componentes, controles, y comportamientos para escenarios comnes

Perfectamente integrado con la plataforma Microsoft y el modelo de aplicacin

Totalmente integrado con ASP.NET y el mdelo de aplicacin IIS

Objetivos del AJAX de Microsoft

Integracin con las plataformas de desarrollo y usuario
Integrado con aplicaciones para el desarrollo de herramientas (Visual Web Developer / Visual Studio 2005) y diseadores (Expression Web Designer)

Trabaja con un gran nmero de navegadores

Modelo basado en el cliente Microsoft AJAX Library

Browser
Presentation (HTML/CSS) AJAX Service Proxies

Server Application Initial Rendering (UI + Behavior) Data Data

Pages

UI Behavior (Script)

UI Behavior (Managed Code)

AJAX Script Framework

Component/UI Framework, Controls Client Application Services

ASP.NET
Page Framework, Server Controls Application Services

Modelo basado en el servidor ASP.NET 2.0 AJAX Extensions

Browser Initial Rendering (UI + Behavior) Input Data Updated UI + Behavior Server Application
Pages

Presentation (HTML/CSS)

UI Behavior (Managed Code)

AJAX Script Framework

Component/UI Framework, Controls Client lient Application Services

ASP.NET
Page Framework, Server Controls Application Services

Controles ASP.NET AJAX

Los controles ASP.NET AJAX permiten crear un comportamiento de cliente enriquecido con muy pocos scripts de cliente, o ninguno, por ejemplo la actualizacin de parte de una pgina (actualizar partes seleccionadas de la pgina en lugar de actualizar toda la pgina con una devolucin) y la presentacin del progreso de la actualizacin durante las devoluciones asincrnicas. Las actualizaciones parciales de pginas asincrnicas evitan la sobrecarga de las devoluciones de pgina completa.

Controles ASP.NET AJAX

ScriptManager (control) Administra el script de cliente para las pginas web ASP.NET habilitadas para AJAX. ScriptManagerProxy (control) Permite a los complementos anidados, como las pginas de contenido y los controles de usuario, agregar referencias de servicios y scripts a pginas cuando ya hay un control ScriptManager definido en un elemento primario.

Controles ASP.NET AJAX

Timer (control) Realiza devoluciones a intervalos definidos. Si se usa el control Timer con un control UpdatePanel, se pueden habilitar actualizaciones parciales de pginas a un intervalo definido. El control Timer tambin permite enviar la pgina completa. UpdatePanel (control) Permite crear aplicaciones web enriquecidas y centradas en clientes. Con los controles UpdatePanel, puede realizar una actualizacin parcial de pginas.

Controles ASP.NET AJAX

UpdateProgress (control) Proporciona informacin de estado acerca de las actualizaciones parciales de pginas en los controles UpdatePanel.

Atlas Control Toolkit ASP.NET AJAX Control Toolkit

Desarrollo basado en el feedback de la comunidad. Suite de componentes y controles para tareas y escenarios de uso comn. Ej.
Accordion CascadingDropDown CollapsiblePanel DragPanel ReorderList CollapsiblePanel PasswordStrength

 http://www.youtube.com/watch?v=Yrr9vvtL FAs&feature=related