ajax - javalea.files.wordpress.com · los 4 principios de ajax}las interacciones del usuario con la...

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


¿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


¿Qué es AJAX?


¿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


¿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


¿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


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


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


Los 4 principios de AJAXEl navegador maneja una aplicación no un contenido


Los 4 principios de AJAXEl servidor envía datos, no contenido


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.


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


¿Realmente es bueno?

A favor:InteractividadSin coste“Portable”

En contra:UsabilidadConocimientos del programadorAumentan las pruebasTiempos de respuestaEl nombre


Alternativas a AJAX

Macromedia FlashPelículas vectoriales interactivas comprimidasProgramación ActionScriptSoluciones

• Macromedia Flex• Laszlo

Ambas utilizan el framework J2EE


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


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");

}


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);


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);


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)


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


AJAX en profundidadUn diagrama de secuencia explicativo del intercambio de información sería este:


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.


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>


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); }


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


AJAX. Hola MundoResultado:


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.

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">

</ul></body></html>



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); }



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; }



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);

}}

}}



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);

} }



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>



Con el uso de CSS y XHTML se le puede dar un acabado más decorativo


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.


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…


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


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


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


Web 2.0

Infraestructura tecnológica:Uso CSS y XHTML validado semánticamenteUso de Flash/Flex/LaszloXULRSS/AtomAspectos de redes sociales…AJAX


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


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

ajax - javalea.files.wordpress.com · los 4 principios de ajax}las interacciones del usuario con la...

Documents