New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye...
Transcript of New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye...
![Page 1: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/1.jpg)
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-1
Formación en Tecnologías Java Enterprise
Componentes Web
Sesión 10: Comunicación con clientes ricos y AJAX
![Page 2: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/2.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-2
Puntos a tratar• Clientes ricos• AJAX
![Page 3: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/3.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-3
Conexión HTTP con servlets• Podemos utilizar un objeto URLConnection para
conectarnos desde nuestra aplicación Java a un servlet mediante HTTP
• Al crear la URL utilizamos la dirección a la que está mapeado el servlet
• Podremos hacer que el servlet genere contenido con cualquier codificación y formato
• La aplicación cliente deberá entender este formato de los datos, para poder leer la información que nos devuelve el servlet
![Page 4: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/4.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-4
Lectura de objetos• Como ejemplo vamos a ver un servlet que
devuelve como contenido un objeto JavaMiClase result = generaObjetoResultante();response.setContentType("application/x-java-serialized-object");OutputStream out = response.getOutputStream();ObjectOutputStream oos = new ObjectOutputStream(out);oos.writeObject(result);oos.flush();
• Desde la aplicación cliente podremos leer el objeto devueltoURL url = new URL(“http://localhost:8080/aplic/servlet/MiServlet”);URLConnection con = url.openConnection(); InputStream in = con.getInputStream(); ObjectInputStream ois = new ObjectInputStream(in);MiClase obj = (MiClase)ois.readObject();
![Page 5: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/5.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-5
Envío de objetos• También podemos enviar objetos u otros datos
desde la aplicación cliente al servlet• Mediante protocolo HTTP utilizando el bloque de
contenido
URLConnection con = url.openConnection();
con.setDoOutput(true); ByteArrayOutputStream baos = new ByteArrayOutputStream();
ObjectOutputStream oos = new ObjectOutputStream(baos);oos.writeObject(result);con.setRequestProperty("Content-Length",
String.valueOf(baos.size())); con.setRequestProperty("Content-Type",
"application/x-java-serialized-object");baos.writeTo(con.getOutputStream());
![Page 6: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/6.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-6
AJAX• AJAX (Asynchronous Javascript And Xml)
• Técnica de desarrollo que permite obtener información desde un navegador sin recargar la página
• Utiliza varias tecnologías:• HTML y CSS
Presentar la información
• XMLObtener la información
• DOM y JavascriptAnalizar la información
![Page 7: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/7.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-7
Pasos para utilizar AJAX• Realizar una petición HTTP al servidor desde
Javascript• Se utiliza el objeto XMLHttpRequest
• Obtener un documento XML como respuesta• Contendrá los datos solicitados al servidor
• Extraer la información del documento XML• Analizándolo mediante el DOM de Javascript
• Actualizar el documento HTML del navegador• Se puede utilizar el DOM para modificar este
documento e introducir en él los datos recibidos
![Page 8: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/8.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-8
Crear petición HTTP• Creamos el objeto para hacer la petición
• Depende del tipo de navegador (Firefox / IE)
function verMensajes() {//Preparar objeto para lanzar peticionif (window.XMLHttpRequest) { //Firefox,etc
peticion = new XMLHttpRequest();} else if (window.ActiveXObject) { //Explorer
peticion = new ActiveXObject("Microsoft.XMLHTTP");}
• Establecemos una función callback• Será llamada cuando se reciba la respuesta
//a quien llamar cuando el servidor respondapeticion.onreadystatechange = atenderPeticion;
![Page 9: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/9.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-9
Efectuar la petición• Efectuamos la petición con:
//lanzar la peticion propiamente dichapeticion.open("GET",
"http://localhost:7001/ChatXml/chat/listaMensajesXml.jsp", true);
peticion.send(null);
• El método open toma como parámetros:• Método (GET, POST, …)• URL a la que conectamos• Petición asíncrona (true/false)
Si no es asíncrona quedaría bloqueado hasta recibir la respuesta• El método send toma como parámetro la URL a la que conectamos
• Si ya se ha especificado esta URL en open, se puede poner null• NOTA: Por motivos de seguridad, sólo se podrá conectar al mismo
servidor del que se descargó la página que contiene el código Javascript
![Page 10: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/10.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-10
Recibir la respuesta• Cuando se reciba la respuesta, se llamará a la función
callback especificadafunction atenderPeticion() {
if (peticion.readyState == 4) {//analizar respuestaif (peticion.status!=200) {alert("ha habido un error");return;
}
• Nos interesará sólo el caso en que:• La petición esté completada
readyState será 4• No se hayan producido errores
status tendrá código 200 (200 OK)
Estados de la petición (readyState)
Completada4
Interactiva3
Cargada2
Cargando1
No inicializada0
![Page 11: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/11.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-11
Obtención de la respuesta• Podemos leer la respuesta de las siguientes
propiedades:• peticion.responseText
Respuesta como una cadena de texto• peticion.responseXML
Respuesta como un objeto XMLDocument, que podrá ser analizado mediante el DOM
• Utilizaremos:• responseText cuando queramos incluir el
contenido recibido directamente en el documento• responseXML cuando estemos intercambiando
datos estructurados
![Page 12: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/12.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-12
Análisis del documento XML• Analizaremos el documento XML recibido:
//mostrar mensajesvar areaMensajes = document.getElementById("mensajesChat");var textoHTML = "";docXml = peticion.responseXML;var raiz = docXml.getElementsByTagName('mensajes');mensajes = raiz[0].getElementsByTagName('mensaje');for(i=0;i<mensajes.length;i++) {var nick=mensajes[i].getElementsByTagName('nick').item(0).firstChild.data;var texto=mensajes[i].getElementsByTagName('texto').item(0).firstChild.data;textoHTML += "<strong><" + nick + "></strong> " + texto + "<br/>";}areaMensajes.innerHTML = textoHTML;
}}
• El documento sería de la siguiente forma: <mensajes>
<mensaje><nick>Ana</nick><texto>Hola</texto>
</mensaje></mensajes>
![Page 13: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/13.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-13
Frameworks AJAX• Facilitar el uso de AJAX• Librerías Javascript
• Aíslan de las diferencias de cada navegador• P.ej. Prototype
• Componentes AJAX• Librerías Scriptaculous, DOJO• Proporcionados por Google, Yahoo
• Cada uno ofrece su propia API
![Page 14: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/14.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-14
jMaki• Incluye widgets de diferentes proveedores
• Scriptaculous, DOJO, Yahoo, Google, …• Define un modelo único de acceso a widgets• Los widgets se incluyen como tags en JSP
• Generan en el servidor el HTML y Javascript• Soportado por los principales IDEs
• Eclipse, Netbeans• Instalable como plugin
P.ej. Plugin Eclipse https://ajax.dev.java.net/eclipse
![Page 15: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/15.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-15
Paleta de componentes
• Disponibles en la vista Snippets de Eclipse• Visible al editar los JSP de un
proyecto web• Debe activarse el facet jMaki
Ajax en el proyecto
• Pueden arrastrarse sobre el JSP
• Más información en:https://ajax.dev.java.net/
![Page 16: New Sesión 10: Comunicación con clientes ricos y AJAX · 2010. 7. 30. · jMaki • Incluye widgets de diferentes proveedores • Scriptaculous, DOJO, Yahoo, Google, … • Define](https://reader033.fdocuments.mx/reader033/viewer/2022051901/5fefa6a22aa97a767737a9d3/html5/thumbnails/16.jpg)
Formación en Tecnologías Java Enterprise
Componentes Web © 2008-2009 Depto. Ciencia de la Computación e IA Clientes ricos y AJAX-16
Ejemplo: Google Maps<a:widget name="google.map" args="{ centerLat : 37.4041960114344,
centerLon : -122.008194923401 }" />