Resumen Mod 07

Módulo 7
AJAX JAVA
Introducción a AJAX
Conceptos Generales
El fenómeno AJAX ha generado la aparición de un gran número utilidades orientadas a facilitar
la utilización de esta nueva tecnología. Dichas utilidades han sido agrupadas en dos grandes
categorías: Librerías y Frameworks.
Dichas utilidades han sido estandarizadas en cierta medida con la aparición de los patrones de
Ajax. En la lista inicial de utilidades, aparecían unos 20 productos orientados a diferentes
tecnologías pero la mayoría orientada a un entorno lineal (línea de comando). La gran
evolución de AJAX ha permitido la aparición de alrededor de 160 productos actualmente
orientados a diversas tecnologías con JAVA o .NET.
Pero la pregunta es:

¿Por qué han salido tantas utilidades para tecnologías como Java?
Pues sencillamente porque Java y Ajax se complementan muy bien. Mientras AJAX realizar las
peticiones entre el Cliente y el Servidor, JAVA da funcionalidad a esas peticiones realizadas
por AJAX del lado cliente.
Para poder utilizar todas estas herramientas, necesitamos disponer de un servidor de

aplicaciones que nos dé soporte a J2EE, como por ejemplo WebSphere, Oracle Application
Server, WebLogic, EAServer, Jboss (free).
También podríamos utilizar Tomcat, pero sabiendo que no es un servidor de aplicaciones

completo J2EE sino solamente un contenedor de Servlets. Para realizar la instalación de
Tomcat o JBoss podríamos dirigirnos a cualquiera de las siguientes direcciones web y seguir
sus pasos:
Tomcat
http://www.osmosislatina.com/tomcat/instalacion.htm
http://www.desarrolloweb.com/articulos/1613.php
http://www.alu.ua.es/j/jhm/cocoon/install1.htm
Instalación de JBoss
http://javaejb.osmosislatina.com/jboss_windows.htm
http://www.osmosislatina.com/jboss/instalacion.htm
Tenemos que tener presente que estamos trabajando en un entorno como el que aparece en la
gráfica siguiente:
2
Librerías JavaScript
Desde hace bastante tiempo , la comunidad AJAX ha optado facilitar el acceso a esta nueva
tecnología y ha desarrollado una serie de librerías en Javascript y Frameworks para poder
realizar implementaciones de código de una forma mucho mas rápida y cómoda que su
implementación manual.
La posibilidad de mejorar el trabajo y rendimiento con estas Librerías es enorme aunque

también existen inconvenientes(escasa documentación, librerías demasiados grandes para su
incorporación a la página cliente, especificación de las librerías y Frameworks, Soporte
inexistente en algunos casos, etc…
Actualmente existen multitud de librerías y Frameworks para el diseño y mantenimiento de

aplicaciones realizadas en AJAX y cada vez van apareciendo nuevos productos que las
incorporan y las redefinen. Por eso, realizaremos un repaso a las librerías más habituales del
mercado actual, sin perder de vista donde vamos a estar trabajando, LADO CLIENTE:
Las librerías más extendidas actualmente son :
ProtoType
Es la librería Javascript más popular utilizada en AJAX, creada por Sam Stephenson. Librería
de bajo nivel, que resuelve muchos de los problemas de compatibilidad entre navegadores y
que da soporte a otras librerías de efectos.
Se destaca como una librería fácil de usar y muy agradable para el desarrollador. Los pasos de
configuración son bastante básicos, únicamente tendremos que declarar la inclusión de nuestro
fichero prototype.js en el <head></head> de nuestra aplicación.
EJEMPLO DE PROGRAMA con PROTOTYPE
3
<html>
<head>
<title>Mi Primer AJAX con Prototype</title>
<script src="prototype.js"
type="text/javascript"></script>
<script language = "javascript">

function obtenerDatos() {
var pagina='ejemplo1_datos.txt';
var Objetoajax = new Ajax.Request ( pagina,
{
method:"get",
onComplete: respuesta
}
);
}
function respuesta(Objetoajax)
{ $("destino").innerHTML =
Objetoajax.responseText; }
</script>
</head>
<body>
<H1>Mi Primer Programa en AJAX con prototype</H1>

<form>
<input type = "button" value = "Obtener Datos"
onclick = "obtenerDatos()">
</form>
<div id="destino" style="background-color:#aaddff;">
<p>Pulsa el boton y veras lo que sale aqui</p>
</div>
</body>
</html>
Script.aculo.us
Es una librería Javascript que permite el uso de controles AJAX, Arrastre y Suelte (drag and
drop) y otros efectos visuales en una página WEB. Creada por Thomas Fuchs.
Su ocupación está alrededor de 76k, comparada con otras librerías es “pesada” pero es muy
completa. Se utiliza normalmente para construir aplicaciones Web 2.0 compatibles con los
principales navegadores.
EJEMPLO DE PROGRAMA con Script.aculo.us
NOTA: En este ejemplo se muestra un uso muy sencillo de los efectos que se pueden obtener
con esta librería; necesitamos incorporar unas librerías y disponer de 4 imágenes para que
vayan siendo mostradas. También necesitamos disponer de una CSS creada dentro del
código.
4
<html>
<head>
<title>Ejemplo de efectos con script.aculo.us</title>
<script src="js/prototype.js"
<script src="js/scriptaculous.js"
<script src="js/simple-slide-show.js"
<style>
#slide-images{
position:relative;
display:block;
margin:0px;
padding:0px;
width:400px;
height:300px;
overflow:hidden;
}
#slide-images li{
position:absolute;
display:block;
list-style-type:none;
margin:0px;
padding:0px;
background-color:#FFFFFF;
}
#slide-images li img{
display:block;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div id="slide-show">
<ul id="slide-images">
<li><img src="images/one.jpg" alt="One" title="One" /></li>
<li><img src="images/two.jpg" alt="Two" title="Two" /></li>
<li><img src="images/three.jpg" alt="Three" title="Three"
/></li>
<li><img src="images/four.jpg" alt="Four" title="Four"
/></li>
</ul>
</div>
</body>
</html>
Dojo
Es un toolkit (Conjunto de herramienta) OPEN SOURCE escrito en javascript compuesto por un
conjunto de librerías creadas en imitación al estilo java cuyo principal objetivo es la abstracción
del desarrollador con el lenguaje de programación y sus inconvenientes en diversos
navegadores.
5
La característica principal de Dojo es que contiene un sistema de empaquetado inteligente,

efectos UI (interface de Usuario), API’s de Drag and Drop, API’s de Widgets, API’s de
interacción con AJAX.
Dojo es conocido como “el todo en uno” de las bibliotecas javascript.
EJEMPLO DE PROGRAMA con DOJO
<html>
<head><title>Hola Mundo Ajax con DOJO</title>
<script type="text/javascript" src="js/dojo.js"></script>

<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
dojo.require("dojo.event.*");
function saludo() {
alert('Hola Mundo Ajax Con DOJO!!!');
}
function init() {
var botonSaludo = dojo.widget.byId('botonSaludo');
dojo.event.connect(botonSaludo, 'onClick', 'saludo')
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<body>
<button dojoType="Button" widgetId="botonSaludo">Hola

Mundo!</button>
</body>
</html>
YUI ( yahoo User Interface Library )

Conjunto de controles y utilidades escritas en Javascript para construir aplicaciones web
usando tecnologías como DOM, DHTML y AJAX. Se caracteriza por introducir varios recursos
de utilización de CSS (Hojas de Estilo en Cascada).
Todos los componentes de YUI han sido liberados como OPEN SOURCE bajo licencia BSD y
son libres para todos los usos. Destaca entre otros sus widget: Rich Text Editor (beta), Base
CSS, ImageLoader Utility (experimental)
Uso de TableView con YUI
EJEMPLO DE PROGRAMA con YUI
<html>
<head>
6
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css"
href="yui/build/fonts/fonts-min.css?_yuiversion=2.4.0" />
<link rel="stylesheet" type="text/css"
href="yui/build/tabview/assets/skins/sam/tabview.css?_yuive
rsion=2.4.0" />
<script type="text/javascript" src="yui/build/yahoo-dom-

event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="yui/build/element/element-beta.js"></script>
<script type="text/javascript"
src="yui/build/tabview/tabview.js"></script>
</head>
<body class=" yui-skin-sam">
<h1>Probando las Pestañas Múltiples con YUI</h1>
<div class="ejemplo">
</div>
<div id="ejemplo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#pest1"><em>Pestaña
1</em></a></li>
<li><a href="#pest2"><em>Pestaña 2</em></a></li>
<li><a href="#pest3"><em>Pestaña 3</em></a></li>
</ul>
<div class="yui-content">
<div id="pest1"><p>Contenido de la Pestaña
1</p></div>
2</p></div>
3</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('ejemplo'); } )
();
</script>
</body> </html>
JQuery
Librería de Javascript de tamaño reducido pensada para interactuar con los elementos web de
una manera sencilla y práctica.
Sus puntos fundamentales son la sencillez y poca extensión de codificación en su empleo, de

ahí su gran aceptación actualmente. Su código está aproximadamente en unos 16k.
Existe una gran documentación de JQuery ( http://www.visualjquery.com)
7
Xajax
Librería desarrollada en Javascript orientado al trabajo en AJAX con PHP. Uno de sus puntos
fuertes es definir qué funciones de código PHP se convierten en funciones AJAX.
Dispone de abundante y muy buena documentación y ejemplos. El único inconveniente es
conocer el lenguaje PHP para incorporarla correctamente y utilizarla al 100%.
Rico (Rich Internet Aplications)

Es una librería de efectos Ajax disponible en OpenRico que permite simplificar el desarrollo de
aplicaciones que utilicen tecnología AJAX. Creada para Sabre Airline Solutions con el objetivo
de generar un entorno web más interactivo
Su sencillez de programación y ser gratuita y de código abierto, ha hecho que esta librería esté
en auge. Permite una serie de efectos como el “drag and Drop”, animaciones, efecto acordeón
con varios DIV anidados y algunos otros más.
Está basada en Prototype
Ajax y Java
Todas las librerías de javascript vistas anteriormente trabajan en el cliente, también llamado
“Lado Cliente”. Todas las peticiones que se realiza mediante AJAX deben de ser tratadas y
respondidas desde el Servidor “Lado Servidor”.
Los Frameworks son las herramientas usadas para dar respuesta a estas peticiones de una
manera clara, sencilla y “casi” transparente para el desarrollador. Los frameworks
referenciados trabajan con JAVA, por lo que el entorno de trabajo deberemos disponer de un
Servidor de Aplicaciones que sustente dicha tecnología como puede ser: WebSphere, Oracle
Application Server, WebLogic, EAServer, Jboss (free), comentados anteriormente.
Todos los entornos que trabajan con AJAX y JAVA comprenden dos partes principales:
- Un Servlet (es un programa que se ejecuta en un servidor web y aportan

funcionalidades determinadas) ejecutándose en el servidor, que procesa las peticiones
y envía las respuestas de vuelta al navegador.
- Una librería Javascript ejecutándose en el navegador que envía las peticiones y que
permite fácilmente actualizar la página web con la información recuperada.
8
Los Frameworks más habituales del mercado actualmente son:
JMaki
Es una framework que te permite crear aplicaciones web con AJAX utilizando Java, JSP (Java
Server Page, es la tecnología para generar páginas web de forma dinámica en el servidor),
PHP, JSF (Java Server Faces)
Desarrollado por SUN y su intención es la de aprovechar lo mejor de Java y lo mejor de

Javascript para crear unos estilos “ricos” en sus widgets.
JMaki dispone de muchos widgets propios y de otras librerías como Dojo, Yui, script.aculo, con
un interface de programación único para todos y para todas las librerías.
DRW (Direct Web Remoting)

DRW permite generar dinámicamente código JavaScript basado en clases Java. Esto permite
al desarrollador usar código Java desde JavaScript como si este fuese local al web-browser,
cuando en realidad el código Java se ejecuta en el servidor.
Su funcionamiento se basa en la característica de JAVA llamada RMI (Java Remote Method

Invocation) de ahí su nombre.
DRW está compuesto principalmente por 2 parte:
- Clases Java que permiten al código javascript poder recuperar datos usando AJAX.
- Biblioteca javascript que facilita al desarrollador actualizaciones o modificaciones

de la pagina con los datos obtenidos.
A pesar de tener una interface muy amigable y rica, el único inconveniente que presenta es la
no compatibilidad con todos los navegadores actuales.
GWT (Google Web Toolkit)

Es un framework creado por Google para realizar el desarrollo de aplicaciones Java usando
AJAX.
El funcionamiento de GWT es sencillo, el desarrollador crea su aplicación en JAVA y éste

framework lo traduce a Javascript, elementos AJAX y HTML.
La característica más importante de GWT es que es compatible con todos los navegadores por
lo que no dependemos del navegador donde hacemos las pruebas de desarrollo de la
aplicación.
Echo2
Es un framework basado en su antecesor Echo Web Framework. Permite el desarrollo de
aplicaciones Java usando AJAX en web 2.0
Framework OPEN SOURCE bajo licencia GNU LGPL. Permite la creación de forma automática
de HTML y Javascript, gestión de mensajes XML entre el cliente y el servidor.
9
Una de las principales diferencias con GWT, es que en Echo2 todo el

código es ejecutado en el servidor mientas que en GWT es ejecutado en el cliente
Implementaciones Remotas
¿Qué Son las implementaciones Remotas?
Esencialmente, las implementaciones remotas (Remote Scripting) son la forma de permitir que
el código JavaScript del lado del cliente solicite datos del servidor sin necesidad de recargar la
página web.
Ejemplo de ello tenemos,la creación de una lista de palabras para seleccionar ( Google
Suggest ), o podría implicar la creación de una aplicación o interfce mas compleja con
posibilidades de navegación y de obtención de imágenes (map.search )
Se dispone ya de un patrón de diseño para hacer este tipo de operaciones (Web Remoting).
Las prácticas de implementaciones remotas son normalmente utilizadas dentro de la creación

de aplicaciones web con AJAX como por ejemplo:
- Minimizar tiempo de espera en la validación de algún campo concreto.

- Automatizar la entrada de los datos recuperados en los formularios.
- Volver a escribir el contenido de la página una vez se haya utilizado o no se haya
completado correctamente.
Disponemos de diferentes formas de hacer estas implementaciones remotas; habitualmente

utilizamos el objeto XMLHttpRequest de forma automática (AJAX), pero también disponemos
de otras variantes como son:
- Javascript Remote Scripting (JSRS).

Es una técnica de desarrollo web para crear aplicaciones web interactivas
mediante el uso de una combinación de: HTML (o XHTML), DOM, JavaScript.
Se puede escoger entre diferentes tecnologías, aunque la mayor parte de
las ocasiones se usan una etiqueta SCRIPT.
- Estándar XML-RPC.
Es un protocolo de llamada remota que utiliza datos XML y utiliza el
protocolo HTTP para su transmisión.
Es el antecesor de SOAP (Simple Object Access Protocol. Es un protocolo
que define la comunicación entre dos objetos en diferentes procesos por medio de
intercambio de datos XML. )
Wrappers
Un Wrapper es un componente que es capaz de dar una funcionalidad determinada de una

forma muy cómoda y sencilla, ocultando toda su lógica al desarrollador y haciendo transparente
su uso.
La definición literal de Wrapper es “Envoltorio” y su utilización es bastante amplia; el término se

puede referir a:
- Wrapper Pattern: Patrón wrapper, donde algunos códigos de programación permite
que ciertos elementos trabajen juntos que de no tenerlos no sería posible.
- Primitive Wraper Class: es una clase de Java utilizada para poder tratar los datos
primitivos (int, boolean, etc.) como objetos (clases Int, Long, etc.)
10
En nuestro ámbito un wrapper se podría definir como un código encapsulado en Java que
ofrece funcionalidades para ser utilizadas en AJAX. Esto es usado en muchísimas utilidades y
la mayoría de los frameworks los utilizan y los integran.
No tenemos que caer en la tentación de confundir wrapper con gadget.
Wrapper: Es un código encapsulado en Java que ofrece múltiples funcionalidades.
Gadget: es un componente javascript definido para una funcionalidad concreta y determinada.
Por ejemplo, podríamos crear una clase java que envolviese (wrapper) las funcionalidades de
cada navegador para así ser totalmente transparente en su utilización posterior.
Software Libre Relacionado

¿Qué entendemos por software libre?
“es la denominación del software que, una vez obtenido, puede ser usado, copiado,
estudiado, modificado y redistribuido libremente”
http://es.wikipedia.org
El software libre suele estar disponible gratuitamente aunque también se puede cobrar por su
distribución, no así por su contenido. Hay veces que nos encontramos con aplicaciones
denominadas “Software Libre” y nos están cobrando por ello y no hay que asociar software
libre a "software gratuito" (denominado habitualmente freeware).
De forma similar, en el mercado hay productos catalogados como “Software Gratuito”, no

pagamos nada por ellos, pero pueden ser libres o no, podremos usarlos pero tendremos que
ver sus características o los derechos de modificación y redistribución de dichas versiones
modificadas del programa.
Actualmente existen muchas formas de indicar el tipo de características que tiene un producto
o aplicación en referencia a su modificación, distribución, utilización, etc…lo más habitual es la
utilización de Licencias de tipos específicos para ello, como por ejemplo:
GNU GPL (GNU Public License)
GNU (Gnu No es Unix). Desarrolla un sistema operativo tipo Unix completo, con la
principal propiedad de ser Software Libre).
Licencia Pública General de GNU pretende garantizarle la libertad de compartir y

modificar software libre, para asegurar que el software es libre para todos sus usuarios
LGPL (Lesser GNU Public License):

Es similar a la anterior la diferencia está en que la licencia Lesser permite su uso dentro
de aplicaciones propietarias con licencias comerciales
BSD License (Berkeley Software Distribution):

Es una licencia de software perteneciente al grupo de licencias de software libre.
Tiene menos restricciones que otras licencias GPL, estando mas cerca del software
libre real. Permite su uso en aplicaciones no libres.
MIT License (Massachusetts Institute of Technology):

El mensaje básico de esta licencia es "Eres libre para usar este código como quieras.".
11
Es muy similar a la licencia BSD, salvo que permite algunas

cosas especiales como por ejemplo:
- El texto de la licencia no tiene copyright, por lo que permite su modificación.
- Es totalmente compatible con otras licencias como GNU GPL
ASL (Apache Software License):

Esta licencia permite el uso y distribución del código fuente para software libre y
software propietario. Requiere la conservación del aviso de copyright.
Tipo de Licencia
MIT ProtoType, Script.aculo.us, JQuery
GPL y LGPL JQuery, Xajax, Echo2
BSD Dojo, YUI, JMaki
ASL Rico, DWR, GWT
12

Resumen Mod 07

Cargado por

Copyright:

Formatos disponibles

Resumen Mod 07

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Resumen Mod 07

Cargado por

Copyright:

Formatos disponibles

Módulo 7

Pero la pregunta es:

Para poder utilizar todas estas herramientas, necesitamos disponer de un servidor de

También podríamos utilizar Tomcat, pero sabiendo que no es un servidor de aplicaciones

La posibilidad de mejorar el trabajo y rendimiento con estas Librerías es enorme aunque

Actualmente existen multitud de librerías y Frameworks para el diseño y mantenimiento de

Las librerías más extendidas actualmente son :

EJEMPLO DE PROGRAMA con PROTOTYPE

<script language = "javascript">

<H1>Mi Primer Programa en AJAX con prototype</H1>

<div id="destino" style="background-color:#aaddff;">

<p>Pulsa el boton y veras lo que sale aqui</p>

EJEMPLO DE PROGRAMA con Script.aculo.us

La característica principal de Dojo es que contiene un sistema de empaquetado inteligente,

Dojo es conocido como “el todo en uno” de las bibliotecas javascript.

EJEMPLO DE PROGRAMA con DOJO

<script type="text/javascript" src="js/dojo.js"></script>

<button dojoType="Button" widgetId="botonSaludo">Hola

YUI ( yahoo User Interface Library )

Uso de TableView con YUI

EJEMPLO DE PROGRAMA con YUI

<script type="text/javascript" src="yui/build/yahoo-dom-

Sus puntos fundamentales son la sencillez y poca extensión de codificación en su empleo, de

Rico (Rich Internet Aplications)

Está basada en Prototype

- Un Servlet (es un programa que se ejecuta en un servidor web y aportan

Los Frameworks más habituales del mercado actualmente son:

Desarrollado por SUN y su intención es la de aprovechar lo mejor de Java y lo mejor de

DRW (Direct Web Remoting)

Su funcionamiento se basa en la característica de JAVA llamada RMI (Java Remote Method

DRW está compuesto principalmente por 2 parte:

- Biblioteca javascript que facilita al desarrollador actualizaciones o modificaciones

GWT (Google Web Toolkit)

El funcionamiento de GWT es sencillo, el desarrollador crea su aplicación en JAVA y éste

Una de las principales diferencias con GWT, es que en Echo2 todo el

Las prácticas de implementaciones remotas son normalmente utilizadas dentro de la creación

- Minimizar tiempo de espera en la validación de algún campo concreto.

Disponemos de diferentes formas de hacer estas implementaciones remotas; habitualmente

- Javascript Remote Scripting (JSRS).

Un Wrapper es un componente que es capaz de dar una funcionalidad determinada de una

La definición literal de Wrapper es “Envoltorio” y su utilización es bastante amplia; el término se

No tenemos que caer en la tentación de confundir wrapper con gadget.

Wrapper: Es un código encapsulado en Java que ofrece múltiples funcionalidades.

Gadget: es un componente javascript definido para una funcionalidad concreta y determinada.

Software Libre Relacionado

De forma similar, en el mercado hay productos catalogados como “Software Gratuito”, no

GNU GPL (GNU Public License)

Licencia Pública General de GNU pretende garantizarle la libertad de compartir y

LGPL (Lesser GNU Public License):

BSD License (Berkeley Software Distribution):

MIT License (Massachusetts Institute of Technology):

Es muy similar a la licencia BSD, salvo que permite algunas

ASL (Apache Software License):

También podría gustarte