![Page 1: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/1.jpg)
AJAX
Javier Luis Cánovas Izquierdo
Facultad de Informática
Univesidad de Murcia
![Page 2: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/2.jpg)
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
![Page 3: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/3.jpg)
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
![Page 4: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/4.jpg)
20/01/2006 Sistemas Distribuidos 4
¿Qué es AJAX?
![Page 5: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/5.jpg)
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
![Page 6: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/6.jpg)
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
![Page 7: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/7.jpg)
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
![Page 8: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/8.jpg)
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
![Page 9: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/9.jpg)
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.
![Page 10: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/10.jpg)
20/01/2006 Sistemas Distribuidos 10
Los 4 principios de AJAXEl navegador maneja una aplicación no un contenido
![Page 11: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/11.jpg)
20/01/2006 Sistemas Distribuidos 11
Los 4 principios de AJAXEl servidor envía datos, no contenido
![Page 12: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/12.jpg)
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.
![Page 13: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/13.jpg)
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
![Page 14: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/14.jpg)
20/01/2006 Sistemas Distribuidos 14
¿Realmente es bueno?
A favor:InteractividadSin coste“Portable”
En contra:UsabilidadConocimientos del programadorAumentan las pruebasTiempos de respuestaEl nombre
![Page 15: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/15.jpg)
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
![Page 16: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/16.jpg)
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
![Page 17: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/17.jpg)
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");
}
![Page 18: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/18.jpg)
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);
![Page 19: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/19.jpg)
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);
![Page 20: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/20.jpg)
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)
![Page 21: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/21.jpg)
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
![Page 22: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/22.jpg)
20/01/2006 Sistemas Distribuidos 22
AJAX en profundidadUn diagrama de secuencia explicativo del intercambio de información sería este:
![Page 23: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/23.jpg)
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.
![Page 24: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/24.jpg)
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>
![Page 25: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/25.jpg)
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); }
![Page 26: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/26.jpg)
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
![Page 27: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/27.jpg)
20/01/2006 Sistemas Distribuidos 27
AJAX. Hola MundoResultado:
![Page 28: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/28.jpg)
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.
![Page 29: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/29.jpg)
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>
![Page 30: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/30.jpg)
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); }
![Page 31: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/31.jpg)
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; }
![Page 32: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/32.jpg)
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);
}}
}}
![Page 33: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/33.jpg)
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);
} }
![Page 34: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/34.jpg)
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>
![Page 35: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/35.jpg)
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
![Page 36: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/36.jpg)
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.
![Page 37: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/37.jpg)
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…
![Page 38: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/38.jpg)
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
![Page 39: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/39.jpg)
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
![Page 40: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/40.jpg)
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
![Page 41: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/41.jpg)
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
![Page 42: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/42.jpg)
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
![Page 43: AJAX - javalea.files.wordpress.com · Los 4 principios de AJAX}Las interacciones del usuario con la aplicación pueden (y deben) ser fluidas y continuas zEvitar la navegación start-stop-start](https://reader035.vdocuments.site/reader035/viewer/2022071021/5fd5814e82279b06e14f7da4/html5/thumbnails/43.jpg)
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