ajax - javalea.files.wordpress.com · los 4 principios de ajax}las interacciones del usuario con la...
Post on 24-Aug-2020
2 Views
Preview:
TRANSCRIPT
AJAX
Javier Luis Cánovas Izquierdo
Facultad de Informática
Univesidad de Murcia
20/01/2006 Sistemas Distribuidos 2
Tabla de contenidosDefiniciónModelo clásico de aplicación Web¿Qué introduce AJAX?Los 4 principios de AJAXVentajas e InconvenientesAlternativasAJAX en profundidadRizando el rizoResumen y aplicacionesEl futuro de la WebConclusiones y Bibliografía
20/01/2006 Sistemas Distribuidos 3
¿Qué es AJAX?
Acrónimo de Asynchronous JavaScript + XMLNo es una tecnología, es un conjunto de tecnologías, un proceso:
Cascade Style Sheets (CSS)Domain Object Model (DOM)Intercambio de datos XML y XSLTEnvío asíncrono de datos XMLHttpRequestJavaScript para todo lo demás
20/01/2006 Sistemas Distribuidos 4
¿Qué es AJAX?
20/01/2006 Sistemas Distribuidos 5
¿Qué es AJAX? CSS
Cascade Style SheetsDefinición de estilos visuales reutilizables para los elementos de una página webEn una aplicación AJAX el estilo de la interfaz de usuario puede ser modificado interactivamente
20/01/2006 Sistemas Distribuidos 6
¿Qué es AJAX? DOM
Document Object ModelPresenta la estructura de la página web como un conjunto de objetos que pueden ser manipulados en JavaScriptPermite a la aplicación AJAX modificar la interfaz de usuario al vuelo
20/01/2006 Sistemas Distribuidos 7
¿Qué es AJAX? JavaScript
Es un lenguaje de propósito general diseñado para el diseño de aplicaciones embebidasEl intérprete de JavaScript del navegador permite acceder a sus capacidades Las aplicaciones AJAX están escritas en JavaScript
20/01/2006 Sistemas Distribuidos 8
Modelo clásico de aplicación Web
El usuario realiza una peticiónEl servidor procesa la petición
ESPERA
El servidor devuelve una respuesta a la petición
20/01/2006 Sistemas Distribuidos 9
¿Qué introduce AJAX?Eliminar la navegación start-stop-start.Se añade una capa en la aplicación cliente para procesar las peticiones.Solamente se realiza la comunicación con el servidor cuando es necesario.La tecnología que usa no es nueva.
20/01/2006 Sistemas Distribuidos 10
Los 4 principios de AJAXEl navegador maneja una aplicación no un contenido
20/01/2006 Sistemas Distribuidos 11
Los 4 principios de AJAXEl servidor envía datos, no contenido
20/01/2006 Sistemas Distribuidos 12
Los 4 principios de AJAXLas interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas
Evitar la navegación start-stop-startEjemplo: Menú contextual que aparece cuando buscamos una palabra.
20/01/2006 Sistemas Distribuidos 13
Los 4 principios de AJAX
Se trata de programar, se requiere disciplinaEl código debe ser limpio, eficiente y robustoLa aplicación AJAX forma parte de una compleja estructura
20/01/2006 Sistemas Distribuidos 14
¿Realmente es bueno?
A favor:InteractividadSin coste“Portable”
En contra:UsabilidadConocimientos del programadorAumentan las pruebasTiempos de respuestaEl nombre
20/01/2006 Sistemas Distribuidos 15
Alternativas a AJAX
Macromedia FlashPelículas vectoriales interactivas comprimidasProgramación ActionScriptSoluciones
• Macromedia Flex• Laszlo
Ambas utilizan el framework J2EE
20/01/2006 Sistemas Distribuidos 16
Alternativas a AJAX
Java Web StartEs una especificación para la construcción de aplicaciones webDebe ser descargado en el clienteSuele estar incluida en las librerías de Java
20/01/2006 Sistemas Distribuidos 17
AJAX en profundidad
Bien, ¿pero como puedo utilizarlo?Básicamente, los pasos son simples.Debemos hacer uso principalmente del objeto XMLHttpRequest:
if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
20/01/2006 Sistemas Distribuidos 18
AJAX en profundidad
Debemos establecer el formato:http_request.overrideMimeType('text/xml');
Indicar la función callback que se encargará de procesar los datos recibidos del servidor:http_request.onreadystatechange = nombreDeLaFuncion;
Realizar el envío (Si se usa GET):http_request.open('GET', 'http://www.ejemplo.org/algun.arch', true); http_request.send(null);
20/01/2006 Sistemas Distribuidos 19
AJAX en profundidad
Realizar el envío (Si se usa POST):Debe establecerse la cabecera:http_request.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
Los parámetros deben codificarse con el formato name=value&… en el método send:http_request.send(name=value&anothername=othervalue&so=on);
20/01/2006 Sistemas Distribuidos 20
AJAX en profundidadLa función registrada como callback debe comprobar el estado de la petición:if (http_request.readyState == 4) {
// Todo correcto } else {
// Ocurrió un error
}
Los posibles valores son: 0 (uninitialized), 1 (loading), 2 (loaded), 3 (interactive), 4 (complete)
20/01/2006 Sistemas Distribuidos 21
AJAX en profundidadA continuación comprobar el código de la respuesta del servidor HTTP:if (http_request.status == 200) {
// Todo correcto } else {
// hubo un problema con la petición, // Por ejemplo la respuesta podría ser el error 404
}
Finalmente podemos analizar los datos:http_request.responseText: Toma la respuesta como una cadena de textohttp_request.responseXML: Toma la respuesta como un objeto XMLDocument
20/01/2006 Sistemas Distribuidos 22
AJAX en profundidadUn diagrama de secuencia explicativo del intercambio de información sería este:
20/01/2006 Sistemas Distribuidos 23
AJAX. Hola Mundo
Vamos a contruir una página web que pulsando un enlace se produzca una comunicación con el servidor y la información que nos devuelva la imprimimos en una ventana de alerta JavaScript.
20/01/2006 Sistemas Distribuidos 24
AJAX. Hola MundoEl archivo holamundo.html quedaría:
<html><head> <script type="text/javascript" language="javascript"> var http_request = false;
function saludar(url) {…}
function alertar() {…}
</script></head><body>
<span onclick="saludar(‘hola.html')"> Saludame
</span> </body></html>
20/01/2006 Sistemas Distribuidos 25
AJAX. Hola MundoEl archivo holamundo.html quedaría:
function saludar(url) { http_request = false; if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml');
} } else if (window.ActiveXObject) {
try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {…}
} } if (!http_request) {…} http_request.onreadystatechange = alertar; http_request.open('GET', url, true); http_request.send(null); }
20/01/2006 Sistemas Distribuidos 26
El archivo holamundo.html quedaría:function alertar() {
if (http_request.readyState == 4) { if (http_request.status == 200) {
alert(http_request.responseText); } else {
alert(Hubo un problema'); }
}
}
El archivo hola.html quedaría:Hola Mundo
20/01/2006 Sistemas Distribuidos 27
AJAX. Hola MundoResultado:
20/01/2006 Sistemas Distribuidos 28
AJAX. Rizando el rizo
Lo interesante es aprovechar la asincronía para impedir la espera en el navegador.Vamos a construir un lector de noticiasMientras el usuario navega por la web, la zona de noticias se actualiza automáticamenteUtilizaremos el método POST y analizaremos los datos del servidor en formato XML.
20/01/2006 Sistemas Distribuidos 29
AJAX. Rizando el rizo
El archivo index.html quedaría:<html><head><title>PRUEBA CON AJAX</title><script type="text/javascript" language="javascript">
function newXMLHttpRequest() {...}
function actualizar(noticiasXML) {...}
function getReadyStateHandler(req, responseXmlHandler) {...}
function noticias(usuario) {...}</script></head>
<body onload=noticias(1);><h1>Lector de Noticias</h1><ul id="noticias">
<!-- Listado de noticias --></ul></body></html>
20/01/2006 Sistemas Distribuidos 30
AJAX. Rizando el rizo
La función noticias() quedaría:function noticias(usuario) {var req = newXMLHttpRequest();// Establece la funcion que tratara la informacionvar handlerFunction = getReadyStateHandler(req, actualizar);req.onreadystatechange = handlerFunction;
// Abre una conexion POST con el servidorreq.open("POST", "news.do", true);
// Especifica el contenidoreq.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded");
// Envia el formularioreq.send("accion=listar&usuario=" + usuario);
setTimeout("noticias()", 5000); }
20/01/2006 Sistemas Distribuidos 31
AJAX. Rizando el rizo
Principal patrón para crear XMLHttpRequest:function newXMLHttpRequest() {
var xmlreq = false;if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();} else if (window.ActiveXObject) {
try {// Ultimas version de IExplorerxmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {try {
// Versiones mas antiguasxmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) { }}
}return xmlreq; }
20/01/2006 Sistemas Distribuidos 32
AJAX. Rizando el rizo
Principal patrón para funciones callback:function getReadyStateHandler(req, responseXmlHandler) {
return function () {// Vemos el statusif (req.readyState == 4) {
if (req.status == 200) {// Pass the XML payload of the response to the// handler functionresponseXmlHandler(req.responseXML);
} else {// Crear una alerta alert("HTTP error: "+req.status);
}}
}}
20/01/2006 Sistemas Distribuidos 33
AJAX. Rizando el rizo
Analizando la respuesta:function actualizar(noticiasXML) {
// Tomamos el listado del documento HTMLvar contents = document.getElementById("noticias");contents.innerHTML = "";// Tomamos la raiz del documento XMLvar noticias = noticiasXML.getElementsByTagName("listado")[0];// Recorremos las noticiasvar n = noticias.getElementsByTagName("noticia");for (var I = 0 ; I < n.length ; I++) {
var nActual = n[I];var titular = nActual.getElementsByTagName("titular")[0]
.firstChild.nodeValue; var texto = nActual.getElementsByTagName("texto")[0]
.firstChild.nodeValue;// Crea y añade una entrada con la noticiavar li = document.createElement("li");li.appendChild(document.createTextNode(titular + " : " + texto));contents.appendChild(li);
} }
20/01/2006 Sistemas Distribuidos 34
AJAX. Rizando el rizo
El Servlet encargado de atender la petición toma el archivo noticias.txt y lo devuelveEl archivo noticias.txt tiene la forma:<?xml version="1.0"?><listado><noticia><titular>La nueva facultad compra 100 ordenadores
para sus alumnos</titular><texto>Aqui podría ir todo el texto que quisieramos
que se muestre en la noticia </texto></noticia>
…</listado>
20/01/2006 Sistemas Distribuidos 35
AJAX. Rizando el rizo
Con el uso de CSS y XHTML se le puede dar un acabado más decorativo
20/01/2006 Sistemas Distribuidos 36
Resumen
Todo gira alrededor del uso del objeto XMLHttpRequestEl uso de CSS, XHTML y XSLT permite generar páginas web atractivas y dinámicasNo es un lenguaje de programación ni una tecnología, consiste en el uso de un conjunto de tecnologías.
20/01/2006 Sistemas Distribuidos 37
Aplicaciones
Actualización de la página webValidación de datos en tiempo realObtención de datos de un controlSimulación de entrada de datosInteracción y monitorización en tiempo realSugerencias en la entrada de datos
Gmail, google maps, calendar…
20/01/2006 Sistemas Distribuidos 38
El futuro de la Web.Web 1.0 hace referencia a las páginas webHTML estáticasWeb 1.5 hace uso de webs creadas dinámicamente actualizadas a partir de una base de datosWeb 2.0 hace uso de webs orientadas a la interacción y redes socialesWeb 3.0 es una especulación todavía. Se especula sobre un Sistema Operativo basado en red
20/01/2006 Sistemas Distribuidos 39
Web 2.0
Término acuñado por Dale Dougherty y CraigCline en una sesión de brainstroming.Se basa en los principios:
La web como plataformaArquitectura de participaciónDesarrolladores independientes Pequeños modelos de negocio con sindicaciónEstado beta perpetuo
20/01/2006 Sistemas Distribuidos 40
Web 2.0
¿Qué son las redes sociales?Es un grafo donde los nodos representan individuos y las aristas relaciones entre ellos. Conjunto de contactos de los que dispone una persona, compuesto por amigos, familiares, conocidos, … con los que se relaciona de manera habitual o esporádica.En Internet: Comunidades, lista de contactos.Ejemplo: Servicio de invitaciones de GMAIL
20/01/2006 Sistemas Distribuidos 41
Web 2.0
Infraestructura tecnológica:Uso CSS y XHTML validado semánticamenteUso de Flash/Flex/LaszloXULRSS/AtomAspectos de redes sociales…AJAX
20/01/2006 Sistemas Distribuidos 42
Conclusiones
AJAX es un conjunto de tecnologías que permiten transformar al navegador en una verdadera aplicaciónHay pocas novedades introducidas, lo importante es lo que se consigue con la unión de las tecnologíasLa evolución de los sitios y la aplicaciones Web tienden al uso de conexiones asíncronas
20/01/2006 Sistemas Distribuidos 43
Bibliografía“Ajax in Action”. Dave Crane, Eric Pascarello. Manning. 2005En Internet
Ajax: A New Approach to Web Applications. Jesse Jameshttp://www.adaptivepath.com/publications/essays/archives/000385.phpState of Ajax: Progress, Challenges, and Implications for SOAshttp://hinchcliffe.org/archive/2005/08/18/1675.aspxWhy Ajax Matters Now by Jesse James Garretthttp://www.ok-cancel.com/archives/article/2005/09/why-ajax-matters-now.htmlAjax gives software a fresh look Blurring the line between desktop and Web applications.http://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1007_3-5886709.html?Weighing the Alternatives How Ajax stacks up against competing RIA approaches.http://www.ajaxinfo.com/default~viewart~8.htmAJAX:Getting Started by Mozilla Developer Center.http://developer.mozilla.org/en/docs/AJAX:Getting_StartedDynamic HTML and XML: The XMLHTTPRequest Object by Applehttp://developer.apple.com/internet/webcontent/xmlhttpreq.htmlCross-browser Ajax Tutorial using the Sarissa libraryhttp://www.yourhtmlsource.com/javascript/ajax.html
top related