navegador servidor … llamada http estándar

Tecnologías de Desarrollo de Software IDE

Trabajo Práctico I

AJAXIntegrantes:

Allegri, LucasPedrini, Ciro

Resumen de Contenido:

• Introducción• Objetivo y Funcionamiento Básico• Tecnologías Requeridas• Comunicación Asíncrona• Frameworks• Aplicaciones

Renderizado Parcial Servicios Web

• Limitaciones• Implementación .NET

• AJAX es un acrónimo de Asynchronous JavaScript And XML.

• Desde un punto de vista práctico, es una tecnología de desarrollo web que permite crear aplicaciones web interactivas y enriquecidas.

• Desde un punto de vista técnico, permite a las aplicaciones web recuperar y enviar datos de forma asíncrona a un servidor, sin interferir con el comportamiento de la aplicación. Para ello utiliza JavaScript y XML.

• El resultado observable de utilizar AJAX es la capacidad de actualizar las páginas sin necesidad de recargarlas.

• La aparición de AJAX marcó un cambio de paradigma en lo referido al desarrollo Web: las páginas pasaron de ser estáticas a dinámicas y responsivas, lo que se traduce en mayor interactividad con el usuario.

• El objetivo que conllevó a la aparición de AJAX fue brindar contenido dinámico en las aplicaciones web, lo que se traduce en una mayor interactividad para los usuarios.

• Para lograr alcanzar dicho objetivo, se dispuso de un proxy entre la aplicación y el servidor, el cual se encargaba de comunicarse con ambos según sea requerido.

• El funcionamiento básico de la comunicación aplicación-servidor, sin AJAX, es el siguiente:

Navegador

Servidor

<html>…</html>

Llamada HTTP estándar

• Al utilizar AJAX, este es el funcionamiento básico de la comunicación aplicación-servidor:

Navegador

ServidorLlamada HTTPProxy

Respuesta HTTP

URL, params

Datos

DHTMLJS

• 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, pero las mismas suelen combinarse mediante JavaScript.

• Dichas funciones son: Presentación de la aplicación

web. Interacción y muestra dinámica

de los datos. Intercambio de datos. Comunicación asíncrona.

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

Navegador

Dominancia en la cascada.

Estilos del navegador web.

Archivo CSS

Estilos en un archivo CSS externo.

Página Web

Estilos en el elemento <head> del archivo HTML.

Elemento Individual

Estilos propios a los elementos HTML individuales.

• 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.<table> <tbody>

<tr>

<tr>

<td>

<td>

<td>

<td>

Indiv1

Indiv2

Indiv3

Indiv4

• 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).

• Algunos autores indican que si se utiliza JSON y no XML, cambia el nombre de la tecnología en AJAJ (Asynchronous JavaScript and JSON).

Ejemplo JSON:"persona": { "nombre": "Juan", "apellido": "Pérez", "edad": 25, «dirección": { «calle": "Rioja", "ciudad": "Rosario", "provincia": «Santa Fe",

}}

Ejemplo XML:<persona> <nombre> Juan </nombre> <apellido> Pérez </apellido> <edad> 25 </edad> <dirección> <calle> Rioja </calle> <ciudad> Rosario </ciudad> <provincia> Santa Fe </provincia> </dirección></persona>

• Para realizar la comunicación asíncrona, se utiliza el elemento XMLHttpRequest.

• El objeto XMLHttpRequest esta 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 sincrónica como asincrónica.

• La información devuelta puede ser tanto texto plano, como JSON (a través de texto plano y usando librerías externas) o XML.

• En primera instancia, la página web creará el elemento XMLHttpRequest, utilizando JavaScript.

Página Web JavaScript

ServidorSe crea el XMLHttpRequest

Estado 0Conexión no Inicializada

Script PHP

• Para utilizar el componente, luego de crearlo, se debe primero abrir el canal a la URL especificando el método de conexión “open”.


Servidor


Estado 1Conexión Inicializada

Se crea el XMLHttpRequest

Request.open()

Script PHP

• Se especifica el método y realiza la llamada con el método “send”, se procede a abrir un socket de conexión y a enviar el paquete.


Servidor

Script PHP




Request.open() Request.send()

Estado 2Procesando

Solicitud

• En algún momento, el servidor comenzará a enviar la respuesta a la página web, mientras se siguen atendiendo otras solicitudes.


Servidor

Script PHP




Request.open() Request.open()

Estado 2Procesando

SolicitudEstado 3Recibiendo Respuesta

• Cuando el servidor termine la operación, cambiará el atributo “readyState”, que provocará una llamada al método “onStateChange”.


Servidor

Script PHP




Request.open() Request.send()

Estado 2Procesando

SolicitudEstado 3Recibiendo Respuesta

Estado 4Respuesta Recibida

Request.readyState

Request.onStateChange()

• Existen muchos frameworks que permiten implementar funcionalidades AJAX. Entre estos se diferencian:• Compiladores de JavaScript, que

corran en el lado del cliente del navegador web.

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

• Simplemente librerías JavaScript.

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

• Algunos de los frameworks que no son relativos a .NET, son:• Frameworks que implementan

AJAX en varios lenguajes del lado del servidor, como Apache Wicket (JAVA), Quicknet (PHP), etc.

• Frameworks que implementan AJAX en varios lenguajes del lado del cliente, como: Wt (C++), Catalyst (Perl), Sajax (PHP), Pyjamas (Python), Ruby on Rails (Ruby), etc.

• Algunos frameworks relativos a .NET son:• ASP.NET AJAX• Ext.Net • AJAX .NET Professional• Gaia AJAX para ASP.NET• Web.AJAX (Open Source)

• Se desarrollará principalmente el framework ASP.NET AJAX, que realmente es un conjunto de extensiones de ASP.NET para brindar funcionalidades AJAX.

• ASP.NET AJAX es una extensión de ASP.NET que permite implementar la tecnología AJAX fácilmente.

• Sin mucha dificultad podríamos enriquecer paginas estáticas, quizás previamente desarrolladas, utilizando controles finales disponibles en el framework.

• Integrado en ASP.NET desde la versión 3.5 del framework .NET, por lo que está disponible con Visual Studio 2008 o superior.

• Páginas más rápidas, ya que se realiza una mayor parte del procesamiento del lado del cliente.

• Elementos de interfaz familiares para el usuario.

• Soportado por la mayoría de los navegadores.

• Permite renderización parcial de 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 (ASP.NET AJAX Control Toolkit).

• La arquitectura del framework consta de dos partes: el lado del cliente (Microsoft AJAX Library), y el lado del servidor (Funcionalidades AJAX en ASP.NET).

• Adicionalmente, se cuenta con el ya nombrado Control Toolkit, un conjunto de ejemplos y componentes para crear controles; y con 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 .

Cliente Servidor

Microsoft AJAX Libraries

Funciones AJAX en ASP.NET

AJAX Control Toolkit

Future Releases

Componentes de ClienteComponentes no visuales,

Comportamientos, controles

Compatabilidad NavegadoresSoporte para Internet Explorer, Firefox, Safari

NetworkingSolicitudes asíncronas,

Serialización XML y JSON,Servicios Web y de Aplicaciones

Servicios EsencialesExtensiones de las clases

base JavaScript, Sistema deTipos, Debugging, Manejo de

Errores y Globalización.

Soporte para ScriptsRegistro, Locación,

Modo Debug/ Release

Servicios WebGeneración de Proxies, Métodos de Página,

Serialización XML y JSON

Servicios De AplicaciónAutenticación, Perfiles,

Roles

Controles del ServidorScriptManager, UpdatePanel,

UpdateProgress, Timer

• 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.

• 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 por su cuenta.

Características de ASP.NET relacionadas:

• Hace posible agregar renderizado parcial tanto en paginas nuevas como en paginas existentes sin la necesidad de escribir un script para el usuario.

• Tiene 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 referida a como los errores son mostrados en el navegador.

• Los servicios web 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 compatibles 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 páginas ASP.NET AJAX o enviar información a paginas de un sistema back-end.

Servicio Web 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.

• Admite solo XML.

Servicio Web REST (Representational State Transfer).

• Un servicio Web REST usa distintas URLs por cada funcionalidad. En REST las funcionabilidades son documentadas mediante links y encabezados HTTP.

• Cada operación tendrá una única URL la cual actuará como manejador, procesando la solicitud.

• Admite varios formatos, entre ellos XML, JSON, RSS y CSV.

• 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.

• Si el proyecto a desarrollar fuese de gran envergadura serian necesarios entonces conocimientos más profundos de JavaScript, no habiendo una alternativa a el mismo para implementar AJAX.

• 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.

Ver Laboratorio Anexo.

navegador servidor … llamada http estándar

Documents