MecanismosComunicaciónAsíncrona

DESARROLLO WEB
EN ENTORNO CLIENTE
CAPTULO 7:
Utilizacin de Mecanismos de Comunicacin
Asncrona
Juan Manuel Vara Mesa
Marcos Lpez Sanz
David Granada
Emanuel Irrazbal
Jess Javier Jimnez Hernndez
Jenifer Verde Marn
Objetivos
Mecanismos de comunicacin asncrona en las

aplicaciones Web.
Tecnologas asociadas con la tcnica AJAX.
Formatos de envo y recepcin de informacin
asncrona.
Llamadas asncronas.
Libreras de actualizacin dinmicas actuales.
Desarrollowebenentornocliente
J.M.Vara,M.Lpez,D.Granada,E.Irrazbal,J.J.Jimnez,J.Verde
Captulo7 UtilizacindeMecanismosdeComunicacinAsncrona 2
Mecanismos de comunicacin sncrona
En un proceso habitual el cliente es el que

inicia el intercambio de informacin solicitando
datos al servidor que responde enviando un
flujo de datos al cliente.
Mecanismos de comunicacin asncrona
El mecanismo de comunicacin asncrona recarga en
segundo plano una parte de la pgina Web, dejando
desbloqueado el resto.
El cliente que enva una peticin no permanece

bloqueado esperando la respuesta del servidor.
Esto ayuda a que las aplicaciones Web tengan una

interactividad similar a las aplicaciones de escritorio.
Es en parte lo que hace algunos aos se denomina Web

2.0.
AJAX
La necesidad = aplicaciones Web interactivas.
Solucin = nuevo uso a tecnologas como XML, CSS o

DOM.
En 2005 J.J. Garrett habla por primera vez sobre AJAX

(Asynchronous JavaScript And XML) = JavaScript
asncrono y XML.
Se suprimen los efectos secundarios de las recargas,

como la prdida del contexto, la ubicacin del scroll o las
respuestas ms lentas.
Tecnologas en AJAX
XHTML y CSS para una presentacin basada en
estndares.
DOM para la interaccin y la visualizacin dinmica de

datos.
XML y XSLT para el intercambio y transformacin de

datos.
XMLHttpRequest para la recuperacin asncrona de los

datos.
y JavaScript como elemento de unin.
Eleccin de AJAX
Uso de nuevas tecnologas y mayor complejidad.
El comportamiento considerado lgico por el usuario
al utilizar la funcionalidad de volver a la pgina
anterior no es reproducido de la misma manera.
Las aplicaciones Web o sitios Web con AJAX utilizan
ms recursos del servidor.
El uso de las tecnologas asociadas con AJAX no
estn presentes por defecto en cualquier tipo de
dispositivos.
Aunque cada vez menos, todava existen
incompatibilidades entre navegadores.
Tecnologas involucradas: XHTML y CSS
XHTML es un HTML estndar especificado mediante un
documento XML. XHTML es ms riguroso con su
estructura:
o Los valores de los atributos, siempre entre comillas:
Incorrecto: <td colspan=2>.
Correcto: <td colspan="2">.
o Los nombres de elementos y atributos deben ir en minsculas:

Incorrecto: <IMG SRC="dibujo.png" /IMG>.
Correcto: <img src="dibujo.png" /img>.
o No est permitida la minimizacin de atributos (se usa el nombre

del atributo como valor):
Incorrecto: <textarea readonly>.
Correcto: <textarea readonly="readonly">.
Tecnologas involucradas: XHTML y CSS
Un cambio en el CSS es reflejado instantneamente
en todas las pginas que utilizan algn elemento de
presentacin identificado en dicha hoja de estilo.
DOM
El Document Object Model:
(DOM) es una representacin
de la pgina Web en una
estructura de jerarqua de rbol.
Es una API para representar

documentos XHTML.
Todas las partes de la pgina

estn accesibles desde el
cliente y no es necesario utilizar
tecnologas del lado del
servidor.
DOM
<html
xmlns="http://www.w3.org/1999/xh
tml">
<head>
<title>Pgina de Inicio</title>
</head>
<body>
<p>Contenido de la Pgina</p>
</body>
</html>
DOM
<html
xmlns="http://www.w3.org/1999/xh
tml">
<head>
<title>Pgina de Inicio</title>
</head>
<body>
<p>Contenido de la Pgina</p>
</body>
</html>
JavaScript
El lenguaje de scripting JavaScript es el ms

utilizado actualmente en los navegadores.
Es un lenguaje orientado a objetos, basado en

prototipos, imperativo, dbilmente tipado y
dinmico.
JavaScript
Utilizacin principal es en el lado del cliente.
Permitiendo mejoras en la interfaz de usuario,

pginas web dinmicas y accediendo al rbol
DOM para realizar modificaciones instantneas
del cdigo fuente.
El cdigo JavaScript se ejecuta en el propio

navegador y puede ir formando parte del propio
cdigo HTML de dicha pgina.
Ejemplo de JavaScript
<head>
<script type="text/javascript">
function cambiarAltura() {
if (novedades.style.height == "150px") {
novedades.style.height = "25px";}
else{
}
</script>
</head>
<body>
<div id="novedades" style="height:150px;
border:1px;">
<a href="#" onClick="cambiarAltura()">X</a>
<p>Alerta: La lnea de bus 25 cambia su
recorrido</p>
</div>
</body>
Ejemplo de JavaScript
<head>
<script type="text/javascript">
function cambiarAltura() {
if (novedades.style.height == "150px") {
else{
}
</script>
</head>
<body>
<div id="novedades" style="height:150px;
border:1px;">
<a href="#" onClick="cambiarAltura()">X</a>
<p>Alerta: La lnea de bus 25 cambia su
recorrido</p>
</div>
</body>
XML
El lenguaje XML es utilizado para describir y

estructurar datos.
Alrededor de XML encontramos otras

tecnologas: XQuery, XSLT.
Los navegadores contienen funcionalidades

internas para trabajar con documentos XML.
XSLT
Lenguaje para transformar un
documento XML en otro documento
XML, texto plano, etc.
Con XSLT podras recibir un

documento XML representando una
tabla y transformarlo en una tabla
XHTML.
XSLT utiliza otro lenguaje, el XPath,

para realizar consultas en el
documento XML cuando se aplican
las transformaciones.
En este caso, XPath busca

elementos dentro del XML de
entrada y XSLT los procesa.
El objeto XmlHttpRequest
Aparece a partir de Internet Explorer 5 en la
forma de un control ActiveX llamado XMLHttp.
Se fueron transformando en un estndar de facto

en navegadores como Firefox, Safari y Opera
(pero todava existen diferencias).
Actualmente el objeto XMLHttpRequest se

encuentra descrito por el World Wide Web
Consortium y sirve como una interfaz con la que
se realizan peticiones a servidores Web.
Atributos del objeto XMLHttpRequest
Atributo Descripcin
readyState Devuelveelestadodelobjetocomosigue:
0=sininicializar,1=abierto,2=cabeceras
recibidas,3=cargandoy4=completado.
responseBody Devuelvelarespuestacomounarray de
bytes.
responseText Devuelvelarespuestacomounacadena.
responseXML DevuelvelarespuestacomoXML.Esta
propiedaddevuelveunobjetodocumento
XML,quepuedeserexaminadousandolas
propiedadesymtodosdelrbolDOM.
status Devuelveelestadocomounnmero(p.ej.
404para"Not Found").
statusText Devuelveelestadocomounacadena(p.ej.
"Not Found").
Mtodos del objeto XMLHttpRequest
Mtodos Descripcin
abort() Cancelalapeticinencurso
getAllResponseHeaders() Devuelve el conjunto de cabeceras HTTP
como una cadena.
getResponseHeader Devuelve el valor de la cabecera HTTP
(cabecera) especificada.
open Especificaelmtodo,URLyotrosatributos
( mtodo, URL [, asncrono opcionalesdeunapeticin.
[, nombreUsuario [, clave]]] ) Elparmetrodemtodo puedetomarlos
valores"GET","POST",o"PUT.
ElparmetroURL puedeserunaURL
relativaocompleta.
Elparmetroasncrono especificasila
peticinsergestionadaasncronamenteo
no.
send([datos]) Envalapeticin.
Propiedades del objeto XMLHttpRequest
Propiedades Descripcin
onreadystatechange Eventoquesedisparaconcadacambio
deestado.
onabort Evento que se dispara al abortar la
operacin.
onload Evento que se dispara al completar la
carga.
onloadstart Evento que se dispara al iniciar la carga.
onprogress Evento que se dispara peridicamente
con informacin de estado.
Perspectiva Global con AJAX
JSON
JSON (JavaScript Object Notation).
Formato ligero para el intercambio de datos.
Es una manera de almacenar informacin.
Fue pensado en un primer momento como

una alternativa a XML.
JSON
XML tienen una gran cantidad de informacin

extra, asociada a su estructura.
JSON est constituido por dos estructuras:
o Una coleccin de pares de nombre/valor.

o Una lista ordenada de valores.
Object
El elemento base de la sintaxis es

el object.
Est conformado por un conjunto

desordenado de pares
nombre/valor.
Un objeto comienza con una llave

de apertura y finaliza con una llave
de cierre.
Cada nombre es seguido por dos

puntos, estando los pares
nombre/valor separados por una
coma.
Array
Un array es una
coleccin de elementos
values.
Comienza por un
corchete izquierdo y
termina con un
corchete derecho.
Los elementos value se

separan por una coma.
Value
A su vez un elemento value

puede ser una cadena de
caracteres o string con
comillas dobles, un number,
los valores booleanos true o
false, null, un object o un
array.
Estas estructuras pueden

anidarse.
Ejemplo JSON y XML
<ciudadano>
{ <nombre>pepe</nombre>
nombre:pepe, <edad>34</edad>
edad:34, <domicilio>
domiclio:calle calle alcal 1
alcal 1, </domicilio>
estudios:[primario, <estudios>
secundario, <estudio>primario</estudio>
universitario] <estudio>secundario</estudio>
} <estudio>universitario</estudio>
</estudios>
</ciudadano>
Ejemplo de AJAX
La pgina Web muestra un botn el cual, cuando hacemos click
sobre l, muestra un mensaje en un elemento div cambiando el
texto que se encontraba anteriormente.
<form>
<input type = button value = Buscar informacin
onclick = obtenerDatosServidor(http://web/datos.txt,
elemento_destino)>
</form>
<div id=elemento_destino>
<p>La informacin aparecer aqu</p>
</div>
Ejemplo de AJAX
<script language = javascript>
1. Funcin
var objetoXHR = new XMLHttpRequest();
obtenerDatosServidor
contiene dos parmetros. 1 function obtenerDatosServidor(origen, elemento)
{
2. Se elige el elemento 2 var objeto_destino = document.getElementById(elemento);
HTML a ser modificado. 3 objetoXHR.open(GET, origen);
objetoXHR.onreadystatechange = respuesta();
4
objetoXHR.send(null);
3. Se configura una conexin 5 }
asncrona con una URL. }
4. Se indica la funcin a ser function respuesta(){

if (objetoXHR.readyState == 4 &&
llamada una vez el estado objetoXHR.status == 200) {
del objeto cambie. objeto_destino.innerHTML = objetoXHR.responseText;
}
5. Se abre la conexin. }
</script>
Libreras de Actualizacin Dinmica
Junto con la tecnologa AJAX estn las libreras que
implementan una gran cantidad de funciones y controles a ser
utilizados por los desarrolladores:
o Independiente de la tecnologa del servidor (por ejemplo PHP, JSP, ASP,
etc.).
o Manejar de manera transparente las incompatibilidades de los diferentes
navegadores.
o Manejar la comunicacin asncrona, sin necesidad de realizar la gestin de
las operaciones de bajo nivel, como por ejemplo el manejo de estados y de
tipos de errores.
o Acceso sencillo al rbol DOM.
o Informacin de errores para facilitar su utilizacin al desarrollador.
o Proporcionar controles y objetos grficos configurables, como por ejemplo:
botones, calendarios, campos de texto.

MecanismosComunicaciónAsíncrona

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

MecanismosComunicaciónAsíncrona

Загружено:

Авторское право:

Доступные форматы

DESARROLLO WEB

Mecanismos de comunicacin asncrona en las

En un proceso habitual el cliente es el que

El cliente que enva una peticin no permanece

Esto ayuda a que las aplicaciones Web tengan una

Es en parte lo que hace algunos aos se denomina Web

Solucin = nuevo uso a tecnologas como XML, CSS o

En 2005 J.J. Garrett habla por primera vez sobre AJAX

Se suprimen los efectos secundarios de las recargas,

DOM para la interaccin y la visualizacin dinmica de

XML y XSLT para el intercambio y transformacin de

XMLHttpRequest para la recuperacin asncrona de los

y JavaScript como elemento de unin.

o Los nombres de elementos y atributos deben ir en minsculas:

o No est permitida la minimizacin de atributos (se usa el nombre

Es una API para representar

Todas las partes de la pgina

El lenguaje de scripting JavaScript es el ms

Es un lenguaje orientado a objetos, basado en

Permitiendo mejoras en la interfaz de usuario,

El cdigo JavaScript se ejecuta en el propio

El lenguaje XML es utilizado para describir y

Alrededor de XML encontramos otras

Los navegadores contienen funcionalidades

Con XSLT podras recibir un

XSLT utiliza otro lenguaje, el XPath,

En este caso, XPath busca

Se fueron transformando en un estndar de facto

Actualmente el objeto XMLHttpRequest se

JSON (JavaScript Object Notation).

Formato ligero para el intercambio de datos.

Es una manera de almacenar informacin.

Fue pensado en un primer momento como

XML tienen una gran cantidad de informacin

JSON est constituido por dos estructuras:

o Una coleccin de pares de nombre/valor.

El elemento base de la sintaxis es

Est conformado por un conjunto

Un objeto comienza con una llave

Cada nombre es seguido por dos

Los elementos value se

A su vez un elemento value

Estas estructuras pueden

4. Se indica la funcin a ser function respuesta(){

Вам также может понравиться