Universidad Tecnológica NacionalFacultad Regional Rosario

Ingeniería en Sistemas de Información

Cátedra: Tecnologías de Desarrollo de Software IDE

Trabajo Práctico I:

AJAX

Integrantes del Grupo 2:

ALLEGRI, LucasPEDRINI, Ciro

Año Lectivo: 2013

Indice de Contenido.

Introducción........................................................................................................................................2Desarrollo............................................................................................................................................3

Objetivo y Funcionamiento Básico.............................................................................................3Evolución.........................................................................................................................................4Tecnologías Requeridas...............................................................................................................5Comunicación Asíncrona..............................................................................................................6Aplicaciones...................................................................................................................................7

Renderizado parcial..................................................................................................................7Servicios Web............................................................................................................................8

Limitaciones....................................................................................................................................9Frameworks..................................................................................................................................10Desarrollo en ASP.NET AJAX y Ejemplos...............................................................................14

Bibliografía........................................................................................................................................15

1

Introducción.El término AJAX es acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono

y XML), es una técnica de desarrollo web para crear aplicaciones web interactivas y enriquecidas.

Las aplicaciones que hacen uso de dicha tecnología se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, ya sea en renderización parcial o empleando servicios web.

Con la aparición de AJAX se produjo un cambio de paradigma en lo referido al desarrollo web: si bien la estructura básica era la misma, las páginas podían dejar de ser estáticas para brindar una experiencia superior al usuario, brindando mayor interactividad, al hacer que las páginas fueran mucho más responsivas.

Desde un punto de vista histórico, AJAX es el resultado de sucesivas tecnologías, como lo fueron los iFrames de Microsoft en 1995, los Applets de Java en 1998, luego implementado a partir de una librería COM bajo el objeto XMLHttpRequest, el cual años posteriores seria incorporado por defecto en los exploradores web, primero en Mozilla y luego expandiéndose a todos los demás.

2

Desarrollo.

Objetivo y Funcionamiento Básico.

Como se menciono anteriormente, AJAX se originó como respuesta ante la necesidad de contenido dinámico para los usuarios. Así, el contenido podía ser cargado en forma fragmentada, según las necesidades de los usuarios.

La estructura de funcionamiento, que era simple y efectiva, seguía siendo la misma: peticiones aplicando el protocolo HTTP que se realizaban desde el navegador del cliente al servidor. Solo que ahora éstas podían ser realizadas mediante dicha tecnología, la cual actuaba a modo de proxy, sirviendo de puente entre cliente y servidor.

El servidor podría proveer contenido específico para las solicitudes mediante AJAX permitiendo una experiencia más rica para el usuario, similar a la de las aplicaciones de escritorio.

3

Evolución.

AJAX fue creado en 2005 por Jesse James Garrett, pero a pesar de esto la historia de las tecnologías que permiten AJAX se remonta a una década antes.

Las técnicas para la carga asíncrona de contenidos en una página existente sin requerir recarga completa remontan al tiempo del elemento iFrame (introducido en Internet Explorer 3 en 1996) y el tipo de elemento Layer (introducido en Netscape 4 en 1997, abandonado durante las primeras etapas de desarrollo de Mozilla). Ambos tipos de elemento tenían el atributo SRC que podía tomar cualquier dirección URL externa, y cargaba una página que contenga JavaScript que manipule la página paterna.

El Microsoft's Remote Scripting (o MSRS, introducido en 1998) resultó un sustituto más elegante para éstas técnicas, con envío de datos a través de un applet Java el cual se puede comunicar con el cliente usando un framework desarrollado en JavaScript. El mismo recibía información e invocaba una función para el retorno definida por el programador, la cual actualizaba la interfaz de usuario mediante modificaciones de HTML dinámico o técnicas similares. Esta técnica funcionó en ambos navegadores, Internet Explorer 4 y Netscape Navigator 4.

En 1999 Microsoft creo un objeto de las librerías COM (Component Object Model), el cual podía ser utilizado desde el navegador. Los objetos COM son componentes externos que requieren permisos explícitos para correr en el explorador web, en particular, para correr el XMLHttpRequest (y en consecuencia acceder a las funcionabilidades AJAX) era necesario configurar el navegador para aceptar el componente ActiveX.

Este mismo objeto COM, XMLHttpRequest, evolucionó a largo del tiempo, siendo luego implementado dentro del mismo navegador. El primero en hacer esto fue Mozilla, y luego le siguieron todos los demás navegadores.

El proyecto continuó siendo ampliado a través de la W3C, referente de estándares, hasta el año 2006, re-escribiéndolo y añadiendo nuevas funcionabilidades.

4

Tecnologías Requeridas.

Para poder implementar la tecnología AJAX, se deben utilizar un conjunto de distintas tecnologías. Hay cierta flexibilidad entre cuáles de ellas utilizar para cada una de las funciones a tener en cuenta. Dichas funciones son: presentación de la aplicación, interacción y muestra dinámica de los datos, intercambio de información y comunicación asíncrona.

Para la presentación de la aplicación, deben utilizarse lenguajes de marcado (markup languages) como HyperText Markup Language (HTML) o XHTML (eXtensible HTML), en conjunto con hojas de estilo en cascada (Cascading Style Sheets, CSS).

Para la interacción y muestra dinámica de los datos se utiliza el Document Object Model (DOM). Es una representación independiente de plataforma y neutral respecto al lenguaje de los contenidos de una pagina web, al cual los scripts pueden acceder para leer o modificar el contenido de la estructura y los estilos del documento mismo.

Para realizar el intercambio de datos, se puede utilizar eXtensible Markup Language (XML) junto con eXtensible Stylesheet Language Transformations (XSLT) para su manipulación, o usar la alternativa, JavaScript Object Notation (JSON), que algunos autores indican que cambia el nombre de la tecnología en AJAJ (Asynchronous JavaScript and JSON).

Para realizar la comunicación asíncrona, se utiliza el objeto XMLHttpRequest, cuyo funcionamiento se explica más adelante.

Para poder reunir todas estas tecnologías se dispone de JavaScript.

5

Comunicación Asíncrona.

La comunicación asíncrona es realizada gracias al objeto XMLHttpRequest. Este objeto está diseñado para realizar una única acción clave: realizar pedidos vía el protocolo HTTP contra un servidor. Este pedido puede realizarse tanto de forma síncrona como asíncrona

Para utilizar el componente luego de crearlo, se debe primero abrir el canal a la URL especificando el método de conexión “open”. Luego pueden especificarse encabezados adicionales a la petición.

Luego, especificando el método y realizando la llamada con el método “send” del objeto XMLHttpRequest, se procede a abrir un socket de conexión y a enviar el paquete. Luego del llamado al método “send”, el control vuelve a donde se llamó inmediatamente, por lo que se puede seguir atendiendo solicitudes sin la necesidad de esperar la respuesta del servidor.

En caso de ser síncrono, se retornará automáticamente el valor cuando este sea obtenido, en cambio, si se trata de una conexión tipo asíncrona se deberá tener creada una función que monitoree el estado de la operación. Cuando el servidor termine la operación, lo indicará cambiando el atributo “readyState”, que llamará al método “onStateChange”, en el que se realizarán diferentes acciones según el tipo de retorno, pudiendo mostrar luego la información obtenida al usuario.

La información devuelta por el objeto XMLHttpRequest será interpretada como texto plano, a no ser que se especifique lo contrario, así podrá ser accedida de a trozos mientras es recibida durante la transferencia.

El objeto XMLHttpRequest permite además especificar que la respuesta será en forma de documento XML, con todas las potencialidades que esto permite. A diferencia del texto crudo, este tipo de respuesta no podrá ser leída hasta que se reciba la respuesta en su totalidad, ya que sino no podrían interpretarse los diferentes nodos de información.

En la actualidad es una practica muy común realizar envíos y transmisiones de texto plano que en realidad contiene información en formato JSON. En caso de utilizar este formato se

6

deberán crear, o utilizar, librerías externas para su interpretación.

Aplicaciones.

Renderizado parcial.Antes de hablar sobre el renderizado parcial debemos hablar sobre que son los postbacks.

Postback es el nombre que se le da al proceso de enviar una página ASP.NET al servidor para su procesamiento. El postback se realiza si la página requiere que se procese información en el servidor, es decir, si se necesita de algo que el usuario no pueda realizar.

Gracias al renderizado parcial la necesidad de refrescar toda la página como resultado de un postback desaparece, en cambio, solo se actualizan ciertas regiones individuales que han cambiado. Como resultado, los usuarios dejan de ver como toda la página se refresca luego de cada postback, lo que hace que la interacción del usuario con la pagina sea mas fluida. ASP.NET hace posible agregar renderizado parcial tanto en paginas nuevas como en paginas existentes sin la necesidad de escribir un script para el usuario.

La renderizacion parcial recae sobre los controles del servidor de ASP.NET y las funciones de cliente en la librería Microsoft AJAX. No es necesario utilizar la librería Microsoft AJAXpara habilitar el renderizado parcial, ya que esta funcionalidad se provee automáticamente cuando se utilizan los controles de servidor de ASP.NET AJAX. Sin embargo, se pueden utilizar los API expuestos en la librería del cliente para funcionalidad adicional.

Las características principales de ASP.NET que soportan el renderizado parcial son:

Un modelo declarativo que trabaja como los controles de ASP.NET. En muchos escenarios se pueden especificar sectores de renderizado parcial solo utilizando marcas declarativas.

Integración entre los controles de servidor ASP.NET AJAX y la librería Microsoft AJAX para tareas comunes. Estas tareas incluyen la habilitación de los usuarios a cancelar los postbacks, mostrando mensajes de progreso customizados durante los postbacks asincrónicos, y determinando cuantos postbacks asincrónicos están siendo procesados.

Opciones de manejo de errores para renderización parcial, que habilitan la customización en como los errores son mostrados en el navegador.

Compatibilidad entre navegadores, que esta integrado en la funcionalidad AJAX de ASP.NET. Simplemente usar los controles de servidor automáticamente invoca la funcionalidad correcta del navegador.

7

Servicios WebLos servicios web son parte integral del framework .NET. Estos proveen soluciones para

intercambiar información entre sistemas distribuidos, que pueden ser de diferentes plataformas.

Si bien los servicios web suelen ser usados por ser compatible en distintos sistemas operativos, modelos de objetos y lenguajes de programación para enviar y recibir información, también pueden ser usados para inyectar información en forma dinámica dentro de paginas ASP.NET AJAX o enviar información a páginas de un sistema back-end.

Existen dos patrones estructurales que mayormente se utilizan en el diseño de servicios web, ellos son REST (Representational State Transfer) y SOAP (Simple Object Access Protocol).

Un servicio web SOAP usa una única URL para exponer todas las funcionalidades y documentos que el servicio provee mediante WSDL (Web Service Description Language). Detrás de la URL existe un único manejador que interpretará el pedido, examinará el contenido del mismo y llamará a los métodos internos correspondientes.

Un servicio Web REST usa distintas URLs por cada funcionabilidad. En REST las funcionalidades son documentadas mediante links y encabezados HTTP. Cada operación tendrá una única URL la cual actuará como manejador, procesando la solicitud.

Mientras que REST recae en el uso de URLs para expresar que operaciones son solicitadas y con qué información. En cambio, SOAP utiliza meta-datos en formato WSDL para definir el contrato y el tipo de datos que se intercambiarán entre cliente y servidor.

REST es mas flexible y promueve un desacoplamiento entre cliente y servidor, por el otro lado, SOAP define un contrato basado en WSDL, el cual, si fuese modificado, implicaría que los clientes tuviesen que adaptar sus implementaciones del servicio.

Otro punto diferencial entre ambos patrones es el formato, mientras que SOAP admite solo XML, REST puede devolver la información en otros formatos, tales como JSON, RSS, o CSV.

8

Limitaciones.Se deberá tener presente que las aplicaciones enriquecidas con AJAX no son aplicaciones

de escritorio, por lo que contarán con ciertas limitaciones referidas al ámbito multimedia, gráficos avanzados, control de hardware y almacenamiento de datos.

Para ser realista, si el proyecto a desarrollar fuese de gran envergadura serían necesarios entonces conocimientos más profundos de JavaScript, no habiendo una alternativa a este para implementar AJAX.

Además, las aplicaciones en AJAX siguen utilizando el modelo clásico de aplicación web que depende de una conexión al servidor, ya sea en una red de área local o a través de Internet.

Actualmente, gracias a HTML5 se cuentan con mayores funciones, tales como el almacenamiento local, o el uso de demás elementos multimedia, los cuales, si se combinaran con AJAX potenciarían las capacidades de la plataforma.

Debe tenerse en cuenta, además, que cualquier usuario que tenga un navegador que no soporte JavaScript o XMLHttpRequest, o simplemente tiene esa función deshabilitada, no podrá ver las páginas que dependen de AJAX correctamente.

9

FrameworksExisten muchos frameworks que permiten implementar funcionalidades AJAX. Entre ese

gran conjunto de frameworks (cientos), hay pocos que únicamente proveen funcionalidades AJAX: por lo general proveen además funcionalidades referidas a aplicaciones web en general. Por lo tanto, la clasificación es difusa y no se entrará en demasiado detalle al respecto.

Entre estos framework, por lo menos desde el punto de vista teórico, podemos diferenciar:

Compiladores que corran en el lado del cliente del navegador web, y utilizan JavaScript.

Frameworks del lado del servidor que utilizan librerías JavaScript.

Simplemente librerías JavaScript.

Frameworks Generales.Como breve reseña de los frameworks que no son relativos a la plataforma .NET, podemos

diferenciar aquellos que principalmente son relativos al lado del cliente de la aplicación o página web, y aquellos que lo son del lado del servidor.

Algunos de los frameworks que implementan AJAX en varios lenguajes del lado del servidor son Apache Wicket (JAVA), Quicknet (PHP), etc.

Algunos frameworks que implementan AJAX en varios lenguajes del lado del cliente, son Wt (C++), Catalyst (Perl), Sajax (PHP), Pyjamas (Python), Ruby on Rails (Ruby), etc.

Como la mayoría de los frameworks proveen variadas funcionalidades, es difícil presentar una clasificación exacta. Algunos son híbridos

El uso de los mismos depende de las tecnologías a tener en cuenta, y de los requisitos tanto de desarrollo como de prestaciones finales de la aplicación web. Para una lista más completa, referirse a la bibliografía.

Frameworks Referidos a .NET.

Referidos a la plataforma .NET, se diferencian los siguientes frameworks principales:

ASP.NET AJAX.

Ext.Net

AJAX.NET Professional

Gaia AJAX para ASP.NET

Web.AJAX (es Open Source).

10

ASP.NET AJAX.ASP.NET AJAX es en realidad una extensión de ASP.NET (framework de aplicaciones web,

del lado del servidor, diseñado para producir páginas web dinámicas), que viene incorporada en el framework .NET desde su versión 3.5, por lo que está presente en Visual Studio por primera vez en la versión 2008.

Las funcionalidades que tiene este framework son, entre otras:

Eficiencia mejorada para las páginas web, ya que una parte significativa del procesamiento es realizado del lado del cliente (navegador web).

Elementos de interfaz familiares.

Renderización parcial de las páginas web.

Auto generación de clases proxy para simplicar la llamada a métodos de web services del lado del cliente.

Capacidad de crear controles de servidor a medida para crear funcionalidades para el cliente.

Soportado por la mayoría de los navegadores actuales.

Referido a la arquitectura, se pueden diferenciar dos partes principales: la parte del Cliente, compuesta por la Microsoft Ajax Library, y la parte del Servidor, compuesta por las funcionalidades referidas a AJAX de ASP.NET.

Además, hay dos componentes adicionales a tener en cuenta y que pueden ser considerados parte de la arquitectura: Microsoft AJAX Control Toolkit, un conjunto de ejemplos y componentes para crear controles especializados; y Future Releases, una colección de funcionalidades aún no implementas en las versiones oficiales lanzadas. Ambos son co-creados con la comunidad de desarrolladores .

11

La arquitectura del cliente incluye:

Librerías para soporto de componentes.Las componentes del cliente habilitan comportamientos dinámicos en el navegador sin la necesidad de realizar postbacks. Se dividen en tres categorías: Componentes no visuales (encapsulan código, como timers), Comportamientos (extienden el comportamiento básico de los elementos DOM) y Controles (que representan un nuevo elemento DOM con un comportamiento específico).

Compatibilidad de navegadores.La capa de compatibilidad de navegadores provee compatibilidad de los scripts AJAX con algunos navegadores de uso común, como Internet Explorer de Microsoft, Mozilla Firefox y Safari de Apple. Esto permite escribir los scripts de la misma manera, sin importar cuál es el navegador soportado al que se apunta.

Networking.La capa de trabajo de red o networking maneja la comunicación entre el script en el nave-gador, y los servicios o aplicaciones web. También administra los métodos de llamas asín-cronas remotas. Usualmente, com en el caso de la renderización parcial usando el control UpdatePanel, este capa se usa automáticamente y no es necesario escribir código.Además, provee soporte para acceder a formularios de autenticación basados en el servi-dor, información de rol e información de perfiles, en el script del cliente.

Servicios Esenciales.Las librerías del cliente de AJAX en ASP.NET consisten en archivos JavaScript (.js) que proveen funciones para el desarrollo orientado a objetos. Estas generan un alto nivel de consistencia y modularidad en el scripting del cliente.Las tareas específicas que identifican son:

o Extensiones orientadas a objetos de JavaScript, como clases, namespaces, manejo de eventos, herencia, tipos de datos y serialización de objetos.

o Una librería de clases base.o Soporte para librerías externas en assembly o como archivos JavaScript (.js).o Debuggeo mediante la clase Sys.Debug, que provee metodos para mostrar los ob-

jetos en forma leible al final de la página web, mostrar mensajes de trazabilidad, etc.

o El concepto de Globalización: hacer global y localizable el script para autoadaptar-se a los lenguajes y la cultura del cliente.

La arquitectura del servidor incluye:

Soporte para Scripts. Las funcionalidades AJAX en ASP.NET son implementadas usando scripts de soporte que son enviados al servidor desde el lado del cliente. Dependiendo de que funcionalidad AJAX se habilite, diferentes scripts son enviados desde el navegador.Además, ASP.NET AJAX provee un modelo para modos de lanzamiento (control de errores y manejo de excepciones optimizado para performance, con tamaño de script mínimo) y debug (debuggeo más robusto, como checkeo de tipos y argumentos).El soporte de scripts es usado por dos razones principales: la librería Microsoft Ajax (sistema de tipos y set de extensiones JavaScript, que incluye namespaces, herencia, interfaces, enumeraciones, etc.) y renderizado de página parcial, utilizando un postback asíncrono.Por último, provee soporte adicional para archivos .js localizados que están embedidos en assembly o disponibles en disco.

12

Servicios Web.Con funcionalidades AJAX en una página ASP.NET, se puede usar el script del cliente para llamar a ASP.NET Web Services (.asmx) y WCF (Windows Communication Foundation) services (.svc). Las referencias requeridas se agregan automáticamente a la página, y estas en devolución generan automáticamente las clases proxy que se usan desde el script para llamar a los web services.

Servicios de Aplicación.Los servicios de aplicación en ASP.NET son servicios web ‘built-in’ (ya creados), que se basan en autenticación de formularios, roles y perfiles de usuario de ASP.NET. Estos servicios pueden ser llamados desde el script del cliente en páginas con AJAX.

Controles del Servidor.Los controles del servidor de ASP.NET AJAX consisten en código de servidor y cliente que se integran para producir dinamismo en lo observado por este último. Cuando se agrega un control AJAX a una página ASP.NET, la página automáticamente envía script del cliente como soporte al navegador para tener funcionalidad AJAX. También se puede enviar código de cliente adicional para customizar las funciones de un control, pero no es requerido.

Los controles disponibles son:o ScriptManager.

Administra los recursos de los scripts para los componentes del cliente, renderizado parcial de página, localización, globalización y scripts de usuario customizados. Es necesario para utilizar los controles siguientes.

o UpdatePanel. Permite refrescar partes seleccionadas de una página, en lugar de refrescar toda la página, usando un postback asíncrono.

o UpdateProgress. Provee información del estado de actualización parciales de página del control UpdatePanel.

o Timer. Realiza postbacks en intervalos definidos. Puede usarse este control para actualizar la página en su totalidad o combinarlo con el UpdatePanel para actualizar un sector determinado de la misma cada cierto período de tiempo.

Cabe destacar que también pueden crearse controles del servidor ASP.NET que incluyen comportamiento AJAX del cliente. Estos controles customizados que aumentan las funcionalidades de los controles web de ASP.NET se denominan controles de extensión.

13

Desarrollo en ASP.NET AJAX y Ejemplos.

Ver Laboratorio Anexo.

14

Bibliografía

Páginas Web:

MSDN, ASP.NET – ScriptManager: http://msdn.microsoft.com/es-es/magazine/cc163354.aspx

MSDN, ASP.NET AJAX Overview: http://msdn.microsoft.com/en-us/library/bb398874%28v=vs.90%29.aspx

MSDN, Partial-Page Rendering Overview: http://msdn.microsoft.com/en-us/library/bb386573%28v=vs.100%29.aspx

Funcionamiento de XMLHttpRequest:http://www.cs.colorado.edu/~kena/classes/7818/f06/lectures/22/

Lista de Frameworks que permiten implementar AJAX:http://en.wikipedia.org/wiki/List_of_Ajax_frameworks

Libros:

Introducing Microsoft ASP.NET AJAX – Microsoft – Dino Esposito.

15