UNNE

Universidad Nacional del Nordeste

Facultad de Ciencias Exactas, Naturales y Agrimensura

Trabajo Final de Aplicación

Tecnologías RIA (Rich Internet Applications)

AJAX

Lino Raul Capra - L.U.: 36.078

Prof. Coordinador: Agr. Castor Herrmann
Primer Prof. Orientador: Mgter. David Luis la Red
Martínez
Segundo Prof. Orientador: Lic. Valeria E. Uribe

Licenciatura en Sistemas de Información

Corrientes - Argentina
2009
A mi familia y amigos por el apoyo incondicional.
 Prefacio

En el contexto actual de la llamada Sociedad de la Información y del Co-

nocimiento resulta cada vez más necesario disponer de sistemas informáticos
distribuidos, multiplataforma, con acceso desde las Intranets y/o la Internet,
para mejorar la educación a distancia, la transparencia de las mismas, la par-
ticipación de los usuarios en la educación, la automatización de los exámenes
y la gestión de información a través de las redes de datos, especialmente las
Intranets de las organizaciones y la Internet, mejorando asimismo la toma de
decisiones y el uso eficiente de los recursos.
Todo lo señalado precedentemente sería ilusorio si no se dispusiera de las
metodologías y de los sistemas informáticos que facilitaran la información en-
tre las distintas organizaciones, utilizando diversos medios de comunicación y
diferentes plataformas de hardware y de software.
El presente trabajo se basa en la investigación de software base para el
estudio de un nuevo acercamiento a las aplicaciones Web. Es un proyecto
pensado para demostrar que AJAX no es solo técnicamente importante, sino
también práctico para aplicaciones en el mundo real.
Los mayores desafíos al crear aplicaciones AJAX no son técnicos. Las
tecnologías centrales son maduras, estables y bien conocidas. En cambio, los
desafíos son para los diseñadores de estas aplicaciones: olvidar las limitaciones
de la Web, y comenzar a imaginar un rango más amplio y rico de posibilidades.
Objetivos
Investigación y desarrollo de material de difusión de las tecnologías RIA
(Rich Internet Applications), incluyendo la prueba del mismo con el desarrollo
de un sistema dinámico que muestre los contenidos investigados.
El objetivo es realizar una aplicación AJAX que elimine la naturaleza
arrancar-frenar- arrancar-frenar de la interacción en la Web introduciendo un
intermediario -un motor AJAX - entre el usuario y el servidor. Esto suma una
capa a la aplicación, pero no la retorna menos reactiva.
La aplicación desarrollada es un sitio Web para la empresa “Baterías
RAC ”, la misma correrá sobre una plataforma Windows mediante la utili-
zación del servidor de aplicaciones Tomcat v5.0. y Java v6.
Estos objetivos planteados al inicio del trabajo, fueron totalmente cumpli-
 iv

dos.
Etapas de Desarrollo

• Se ha efectuado una amplia recopilación bibliográfica específica de los

temas pertinentes a la tarea planificada y a los productos de software
que se emplearon para la concreción del Trabajo Final.

• Se realizaron las traducciones de los manuales correspondientes a la he-

rramienta de desarrollo DB2 Express C9.

• Como consecuencia de las gestiones realizadas por el Profesor Orienta-

dor ante IBM Argentina se han recibido materiales tanto en CD’s como
en libros de dicha empresa, en el marco del Scholars Program de la mis-
ma, destinado a Universidades de todo el mundo; se destacan por ser
necesarios para la realización del presente Trabajo Final los referentes
a productos de software tales como el Rational Architect V6., como así
también el DB2 Express C9.

• Se ha realizado un detallado estudio del lenguaje Java, utilizándose la

versión JDK 1.6.

• Se ha realizado un detallado estudio del entorno de trabajo Scientific

WorkPlace 2.5.0 para la escritura del libro correspondiente al informe
final.

• Se ha realizado un detallado estudio del software para el desarrollo de la

aplicación, es decir el estudio de la plataforma integrada de desarrollo de
aplicaciones Web, WebSphere Studio Application Developer integrado a
Rational y la utilización del servidor de aplicaciones Tomcat V5.0.

• Se ha realizado el estudio del Manejador de Bases de Datos (DBMS)

multiplataforma DB2 Express C9.

• Se ha realizado el desarrollo de la aplicación utilizando páginas HTML,

JavaScript, páginas de estilos (.css) y Servlets de Java en el marco de la
herramienta WebSphere Studio Application Developer integrado a Ra-
tional en el entorno Windows.

• Se ha realizado el correspondiente testeo de la aplicación, utilizando una

máquina como servidor y otra como cliente ingresando a la base de datos
del servidor a través de la Intranet de la Facultad.
 v

• Una vez finalizada la aplicación se realizó la grabación en DVD de todo

el material correspondiente al trabajo final: una versión de la aplicación,
otra referente al libro en formato LaTex y el PDF generado. También
se icluyó los instaladores de los productos utilizados para el desarrollo,
es decir DB2 Express C9 y Rational Architect V6.

Objetivos Logrados
Se han alcanzado plenamente la totalidad de los objetivos planteados para
el presente trabajo.

Organización del Informe Final

El informe final comprende un libro impreso y un DVD, además de un
resumen y de un resumen extendido.
El libro impreso está organizado en capítulos, los que se indican a con-
tinuación:

• Capitulo 1 - Introducción: posee una breve descripción de las diferen-

tes tecnologías que componen las RIA.
• Capitulo 2 - Tecnologías Rich Internet Applications (RIA): Se
señalan los principales conceptos referidos a las tecnologías más impor-
tantes, como ser HTML. XHTML. etc.
• Capitulo 3 - El objeto XMLHttpRequest: Se indican los principales
aspectos y destacadas características del objeto XMLHttpRequest junto
a sus métodos y atributos.
• Capitulo 4 - Herramientas de Depuración: Se resumen los aspectos
y características más destacadas de las herramientas de depuración más
conocidas.
• Capitulo 5 - Técnicas básicas de petición de información: Se de-
tallan las más relevantes características de las librerías del objeto XML-
HttpRequest.
• Capitulo 6 - Ejemplos Reales de Uso para AJAX: Se presentan los
principales ejemplos reales de uso para AJAX.
• Capitulo 7 - Problemas de seguridad y desarrollo: Se señalan los
aspectos más relevantes de seguridad y desarrollo.
 vi

• Capitulo 8 - Un mundo de Toolkits y Frameworks: Se detallan los

aspectos más significativos de las Toolkits y Frameworks existentes.

• Capítulo 9 - Herramientas Utilizadas para la Aplicación:Se des-

criben las principales características de todas las herramientas utilizadas
para el desarrollo de la aplicación.

• Capítulo 10 - Aplicación Web: Se describe detalladamente el funciona-

miento de la aplicación Web desarrollada y algunos ejemplos del código
utilizado.

• Capitulo 11 - Conclusiones: Se presentan las conclusiones a las que se

ha llegado al finalizar el presente trabajo y las posibles líneas futuras.

El DVD, adjunto al libro impreso, contiene lo siguiente:

• Instaladores del software utilizado.

• Resúmenes del trabajo realizado.

• Libro del informe final.

• Presentación para la defensa final.

• Copia de seguridad de la base de datos de la aplicación.

• Aplicación desarrollada.

Capra Lino Raúl

Licenciatura en Sistemas de Información
Universidad Nacional del Nordeste
L.U.: 36078
Primer Prof. Orientador: Mgter. David Luis La Red Martínez
Segundo Prof. Orientador: Lic. Valeria Emilce Uribe
Corrientes; 11 de Marzo de 2009
Índice General

1 Introducción 1
1.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1.1 Las Tecnologías Web . . . . . . . . . . . . . . . . . . . . 1
1.1.2 Visión en Conjunto . . . . . . . . . . . . . . . . . . . . . 4
1.1.3 Forman Parte de las RIA . . . . . . . . . . . . . . . . . 5
1.2 Algunos Ejemplos Reales de AJAX . . . . . . . . . . . . . . . 8
1.2.1 Notas Finales . . . . . . . . . . . . . . . . . . . . . . . . 9

2 Las RIA 11
2.1 HTML y XHTML . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.1.1 Conceptos Básicos de HTML . . . . . . . . . . . . . . . 11
2.1.2 Estructura del Documento HTML, Ejemplo Básico . . . 11
2.1.3 Tags de Imagen y Tabla . . . . . . . . . . . . . . . . . . 13
2.1.4 Hiperenlaces . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2 XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.2.1 Diferencias Más Importantes Entre XHTML y HTML . 19
2.2.2 ¿Cómo Validar una Página Web? . . . . . . . . . . . . . 22
2.3 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.4 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.4.1 Crear un Nuevo Objeto . . . . . . . . . . . . . . . . . . 23
2.4.2 Crear un Nuevo Constructor . . . . . . . . . . . . . . . 24
2.4.3 Asignar un Método a un Objeto . . . . . . . . . . . . . 24
2.5 Applet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.6 Adobe Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.7 Java WebStart . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.7.1 Obtención del Software de Java Web Start . . . . . . . . 29
2.7.2 Ejecución de una Aplicación con el Software de Java
Web Start . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.8 DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

vii
ÍNDICE GENERAL viii

2.8.1 Usos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

3 El Objeto XMLHttpRequest 32
3.1 Descripción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.1.1 Implementación y Uso de la Interfaz . . . . . . . . . . . 33
3.2 Características Generales del Objeto . . . . . . . . . . . . . . . 33
3.2.1 Razones Para Utilizar una Librería en el Lado Cliente . 33
3.2.2 La Dependencia de los Navegadores . . . . . . . . . . . 35
3.3 Navegadores Compatibles . . . . . . . . . . . . . . . . . . . . . 39
3.4 Métodos y Propiedades del Objeto . . . . . . . . . . . . . . . . 40
3.4.1 Métodos . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.4.2 Propiedades . . . . . . . . . . . . . . . . . . . . . . . . . 41
3.5 Peticiones Síncronas y Asíncronas . . . . . . . . . . . . . . . . 42
3.6 Escribir Clases en JavaScript . . . . . . . . . . . . . . . . . . . 48
3.6.1 Clases VS Prototipos . . . . . . . . . . . . . . . . . . . . 48
3.6.2 Prototype vs Encerrar las Funciones . . . . . . . . . . . 51
3.6.3 Variables Públicas vs Variables Privadas . . . . . . . . 51

4 Herramientas de Depuración 52
4.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
4.2 Instalación de las Herramientas . . . . . . . . . . . . . . . . . 52
4.3 La Consola JavaScript . . . . . . . . . . . . . . . . . . . . . . . 54
4.4 Document Object Model Inspector (Inspector del DOM) . . . 56
4.4.1 ¿Cómo Funciona? . . . . . . . . . . . . . . . . . . . . . 59
4.5 Venkman(Depurador de Javascript) . . . . . . . . . . . . . . . 60
4.6 Firebug (Todo lo Anterior en Uno) . . . . . . . . . . . . . . . . 66
4.6.1 Funcionalidades de Firebug . . . . . . . . . . . . . . . . 69

5 Petición de Información 75
5.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
5.2 Insertar Código HTML . . . . . . . . . . . . . . . . . . . . . . 75
5.3 Insertar Imágenes Usando el DOM . . . . . . . . . . . . . . . 79
5.4 Insertar Código JavaScript . . . . . . . . . . . . . . . . . . . . 83
5.5 DOM API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
5.6 DOM API e innerHTML . . . . . . . . . . . . . . . . . . . . . 90
5.7 Encapsulación del Objeto XMLHttpRequest . . . . . . . . . . 95
5.8 Petición de Código Javascript y Lanzarlo . . . . . . . . . . . . 102
5.9 Manejo de Errores . . . . . . . . . . . . . . . . . . . . . . . . . 104
5.10 Dar Soporte al Usuario . . . . . . . . . . . . . . . . . . . . . . 107
ÍNDICE GENERAL ix

6 Ejemplos Reales de Uso Para AJAX 113

6.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
6.2 La Web Actual . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
6.3 Métodos GET, POST y Caracteres Especiales en Internet . . . 115
6.3.1 Introducción a los Métodos GET y POST . . . . . . . 115
6.3.2 Caracteres Especiales . . . . . . . . . . . . . . . . . . . 116
6.3.3 Cambios en la Librería Para Que Acepte los 2 Métodos 116
6.3.4 Ejemplo de Uso de los Métodos GET y POST . . . . . 119
6.4 Auto Verificación y Rendimiento en AJAX . . . . . . . . . . . . 122
6.5 Refrescar la Pantalla Automáticamente . . . . . . . . . . . . . 128
6.6 Una Base de Datos Creada con el DOM y Guardada con AJAX 133
6.7 Crear una Tabla Dinámicamente . . . . . . . . . . . . . . . . . 134
6.8 Auto-Completado Empleando AJAX . . . . . . . . . . . . . . . 139

7 Problemas de Seguridad y Desarrollo 150

7.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
7.2 Problemas de Desarrollo . . . . . . . . . . . . . . . . . . . . . 150
7.2.1 Internet Oscura . . . . . . . . . . . . . . . . . . . . . . . 151
7.2.2 Complejidad Aumentada . . . . . . . . . . . . . . . . . 151
7.2.3 Aplicaciones Difíciles de Mantener . . . . . . . . . . . . 151
7.2.4 Las Herramientas de Desarrollo que Usan AJAX son
Inmaduras . . . . . . . . . . . . . . . . . . . . . . . . . . 151
7.2.5 El Objeto XMLHttpRequest No Está Estandarizado . . 151
7.2.6 El Objeto XMLHttpRequest No Está en Navegadores
Antiguos . . . . . . . . . . . . . . . . . . . . . . . . . . 152
7.2.7 Dependencia de la Tecnología Javascript . . . . . . . . . 152
7.3 Problemas de Seguridad . . . . . . . . . . . . . . . . . . . . . . 152
7.3.1 Parte del Cliente . . . . . . . . . . . . . . . . . . . . . . 152
7.3.2 Problemas Antiguos AJAX . . . . . . . . . . . . . . . . 153
7.3.3 Parte del Servidor . . . . . . . . . . . . . . . . . . . . . 153
7.3.4 Problemas Agravados Por el Uso de AJAX . . . . . . . 154
7.4 Política de Mismo Origen . . . . . . . . . . . . . . . . . . . . . 156
7.5 Desarrollo de una Aplicación Web Segura . . . . . . . . . . . . 157
7.5.1 Cosas a Tener en Cuenta . . . . . . . . . . . . . . . . . 158

8 Un Mundo de Toolkits y Frameworks 160

8.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
8.2 Tipos de Toolkits y Frameworks Sobre Java . . . . . . . . . . . 160
8.2.1 Bibliotecas Javascript en el Lado Cliente . . . . . . . . . 161
8.2.2 Tecnologías Wrapper: jMaki . . . . . . . . . . . . . . . . 163
ÍNDICE GENERAL x

8.2.3 Componentes Java Server Faces que Utilizan AJAX . . 163

8.2.4 Traductor Java a HTML/Javascript: Google Web Toolkit164
8.3 Tipos de Toolkits y Frameworks Sobre Lenguajes No Java . . . 165
8.3.1 .NET Frameworks . . . . . . . . . . . . . . . . . . . . . 165
8.3.2 Flash Frameworks . . . . . . . . . . . . . . . . . . . . . 165
8.3.3 PHP Frameworks . . . . . . . . . . . . . . . . . . . . . . 166
8.3.4 Otros Frameworks . . . . . . . . . . . . . . . . . . . . . 166
8.4 Conclusiones Sobre el Uso de los Toolkits . . . . . . . . . . . . 166
8.5 Notas Finales del Capítulo . . . . . . . . . . . . . . . . . . . . 166

9 Herramientas Utilizadas para la Aplicación 168

9.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
9.2 DB2 Express-C9 . . . . . . . . . . . . . . . . . . . . . . . . . . 168
9.2.1 Servidores DB2 . . . . . . . . . . . . . . . . . . . . . . . 169
9.2.2 Clientes DB2 y Controladores . . . . . . . . . . . . . . . 170
9.2.3 Características y Productos Relacionados . . . . . . . . 172
9.2.4 Características incluídas en otras ediciones de DB2: . . 172
9.2.5 Características Incluidas con la Licencia de Suscripción
de DB2 Express-C . . . . . . . . . . . . . . . . . . . . . 174
9.2.6 Características No Disponibles con DB2 Express-C . . . 175
9.2.7 Productos Pagados Relacionados con DB2 . . . . . . . . 178
9.2.8 Guía de Instalación de DB2 Express C . . . . . . . . . . 180
9.2.9 Herramientas de DB2 . . . . . . . . . . . . . . . . . . . 184
9.3 WebSphere Studio . . . . . . . . . . . . . . . . . . . . . . . . . 191
9.3.1 ¿Que es WebSphere? . . . . . . . . . . . . . . . . . . . . 191
9.4 Apache Tomcat . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
9.4.1 Descripción . . . . . . . . . . . . . . . . . . . . . . . . . 208
9.4.2 Entorno . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

10 Aplicación Web 210

10.1 Descripción General . . . . . . . . . . . . . . . . . . . . . . . . 210
10.1.1 Módulo del Usuario . . . . . . . . . . . . . . . . . . . . 211
10.1.2 Módulo del Administrador . . . . . . . . . . . . . . . . . 215
10.2 Estructura de Datos Utilizada . . . . . . . . . . . . . . . . . . . 219
10.2.1 Estructura de Tablas . . . . . . . . . . . . . . . . . . . . 221
10.3 Ejemplos de Código Fuente Utilizados . . . . . . . . . . . . . . 226
10.3.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
10.3.2 JavaScript (.js) . . . . . . . . . . . . . . . . . . . . . . . 260
10.3.3 Página de Estilos (.css) . . . . . . . . . . . . . . . . . . 262
ÍNDICE GENERAL xi

11 Conclusiones 265
11.1 Respecto del Futuro de AJAX . . . . . . . . . . . . . . . . . . 265
11.2 Respecto del Motor de Base de Datos Utilizado . . . . . . . . . 266
11.3 Respecto del Entorno de Desarrollo Utilizado . . . . . . . . . . 266
11.4 Líneas Futuras de Acción . . . . . . . . . . . . . . . . . . . . . 266

Bibliografía 268

Índice de Materias 269

Índice de Figuras

1.1 Primer ejemplo con Ajax. . . . . . . . . . . . . . . . . . . . . . 8

1.2 Página Google 1. . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.3 Página Google 2. . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.1 Primer Ejemplo HTML. . . . . . . . . . . . . . . . . . . . . . . 12

2.2 Ejemplo HTML: Imágenes. . . . . . . . . . . . . . . . . . . . . 14
2.3 Ejemplo HTML: Etiquetas. . . . . . . . . . . . . . . . . . . . . 15
2.4 Ejemplo HTML: Tablas. . . . . . . . . . . . . . . . . . . . . . . 18

3.1 Página Inicial antes del Evento. . . . . . . . . . . . . . . . . . . 39

3.2 Resultado luego del Evento. . . . . . . . . . . . . . . . . . . . 40
3.3 Ejemplo de Petición Síncrona. . . . . . . . . . . . . . . . . . . . 46
3.4 Ejemplo de uso de Prototipos. . . . . . . . . . . . . . . . . . . . 50

4.1 Aspecto del Menú Herramientas luego de la Instalación. . . . . 53

4.2 Resultado en la Consola de JavaScript. . . . . . . . . . . . . . . 55
4.3 Código que produjo el Error. . . . . . . . . . . . . . . . . . . . 56
4.4 Resultado del Código depuracion2.html visto en Mozilla Firefox. 58
4.5 Ejemplo de Uso de la Utilidad DOM Inspector. . . . . . . . . . 59
4.6 Pantalla de Inicio de Venkman. . . . . . . . . . . . . . . . . . . 62
4.7 Venkman con el Fichero depurar.html Cargado. . . . . . . . . . 63
4.8 Venkman Detenido en el Punto de Ruptura. . . . . . . . . . . . 64
4.9 Vista Watches de Vankman. . . . . . . . . . . . . . . . . . . . . 65
4.10 Icono de Inicio de FireBug. . . . . . . . . . . . . . . . . . . . . 66
4.11 Pestañas o Solapas de FireBug. . . . . . . . . . . . . . . . . . . 67
4.12 Error Visualizado en la Consola de FireBug. . . . . . . . . . . . 68

5.1 Página que Realiza la Petición. . . . . . . . . . . . . . . . . . . 78

5.2 Resultado de la Petición. . . . . . . . . . . . . . . . . . . . . . . 79
5.3 Google Maps sin Terminar de Cargar Imágenes. . . . . . . . . . 80
5.4 JavaScript Devuelto y Evaluado por AJAX. . . . . . . . . . . . 85

xii
ÍNDICE DE FIGURAS xiii

5.5 Petición Indirecta con AJAX. . . . . . . . . . . . . . . . . . . . 88

5.6 Jerarquía de Objetos del Navegador. . . . . . . . . . . . . . . . 89
5.7 Ejemplo de Utilización del Objeto window. . . . . . . . . . . . 89
5.8 DOM de una página Web visto con Firebug. . . . . . . . . . . . 91
5.9 petición de información a una url inexistente . . . . . . . . . . 104
5.10 cuadroEstadoCarga . . . . . . . . . . . . . . . . . . . . . . . . . 108

6.1 Esquema de una página Web Actual. . . . . . . . . . . . . . . . 114

6.2 Guardar en Formato URF-8. . . . . . . . . . . . . . . . . . . . 117
6.3 Ejemplo de los Métodos GET y POST. . . . . . . . . . . . . . 119
6.4 Ejemplo de Verificación de Usuarios Usando AJAX. . . . . . . 124
6.5 Ejemplos de Verificación: Estados Posibles. . . . . . . . . . . . 127
6.6 Refresco automático de página . . . . . . . . . . . . . . . . . . 129
6.7 Tabla Generada Dinámicamente Haciendo uso del DOM. . . . . 134
6.8 Interfaz Simple Para Guardar y Cargar de un Archivo. . . . . . 135
6.9 Ejemplo de Auto-completado empleando AJAX . . . . . . . . . 140
6.10 Google Suggest. . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

7.1 Aplicación desarrollada con una Seguridad Ineficiente. . . . . . 155

7.2 Aplicación Desarrollada con una Seguridad Correcta. . . . . . . 155
7.3 Internet Explorer 6 pidiendo una confirmación debido a un po-
sible riesgo de seguridad. . . . . . . . . . . . . . . . . . . . . . . 158

9.1 Servidores DB2. . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

9.2 Clientes DB2 y Controladores Disponibles. . . . . . . . . . . . . 171
9.3 Réplica de SQL. . . . . . . . . . . . . . . . . . . . . . . . . . . 176
9.4 DB2 Connect. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
9.5 WebSphere Federation Server. . . . . . . . . . . . . . . . . . . . 181
9.6 Ventana de Progreso en DB2. . . . . . . . . . . . . . . . . . . . 184
9.7 Herramientas DB2. . . . . . . . . . . . . . . . . . . . . . . . . . 185
9.8 Herramientas DB2: Menú Inicio. . . . . . . . . . . . . . . . . . 186
9.9 Centro de Control de DB2. . . . . . . . . . . . . . . . . . . . . 187
9.10 Icono DB2 en Windows. . . . . . . . . . . . . . . . . . . . . . . 188
9.11 Editor de Comandos. . . . . . . . . . . . . . . . . . . . . . . . . 189
9.12 Botón Show SQL. . . . . . . . . . . . . . . . . . . . . . . . . . . 190
9.13 Salida de un Botón Show SQL. . . . . . . . . . . . . . . . . . . 191
9.14 Plataforma de WebSphere. . . . . . . . . . . . . . . . . . . . . . 192

10.1 Pagina inicial del sitio . . . . . . . . . . . . . . . . . . . . . . . 211

10.2 Sección Productos. . . . . . . . . . . . . . . . . . . . . . . . . . 212
10.3 Seccion catalogos . . . . . . . . . . . . . . . . . . . . . . . . . . 213
ÍNDICE DE FIGURAS xiv

10.4 Seccion videos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

10.5 Seccion cual es su bateria . . . . . . . . . . . . . . . . . . . . . 215
10.6 Sección Historia. . . . . . . . . . . . . . . . . . . . . . . . . . . 216
10.7 Sección Contacto. . . . . . . . . . . . . . . . . . . . . . . . . . . 217
10.8 Sección Ubicación. . . . . . . . . . . . . . . . . . . . . . . . . . 218
10.9 Módulo del Administrador. . . . . . . . . . . . . . . . . . . . . 219
10.10Estructura de la Base de Datos. . . . . . . . . . . . . . . . . . . 220
10.11Tabla ADMIN. . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
10.12Muestreo del Contenido de la tabla ANIO. . . . . . . . . . . . . 222
10.13Tabla COMBUSTIBLE. . . . . . . . . . . . . . . . . . . . . . . 223
10.14Tabla MARCA. . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
10.15Tabla MODELO. . . . . . . . . . . . . . . . . . . . . . . . . . . 225
10.16Estructura de datos de la tabla BATERIA. . . . . . . . . . . . 226
10.17Definición de Claves de la Tabla BATERIA. . . . . . . . . . . . 227
10.18Estructura de Campos de la Tabla VIDEO. . . . . . . . . . . . 228
Capítulo 1

Introducción

1.1 Introducción

Antes de emprender la lectura de este texto hay ciertas cosas que sería bueno
conocer para entender perfectamente qué es AJAX y en qué lugar se ubi-
ca dentro del desarrollo de aplicaciones Web. Por ello se aprovechará esta
introducción para hablar del entorno que rodea a AJAX [4, AJAX].

1.1.1 Las Tecnologías Web

Para comenzar, se va a hacer un recorrido por la evolución de la Web hasta

su estado actual para conocer en qué momento se está y con qué tecnologías
se va a trabajar.
En 1994 nació el Consorcio del World Wide Web de la mano de Berners-
Lee, como mecanismo de estandarización para evitar guerras como las desen-
cadenadas entre Internet Explorer y Netscape por las etiquetas HTML con las
que se crean las páginas Web (ya que cada navegador añadía sus propias a las
ya establecidas y muchas veces había que realizar la misma aplicación para
uno y otro, y detectar el navegador antes de lanzarla). Como muestra de su
esmero, este consorcio hoy en día sigue 7 pasos para la aprobación de cualquier
estándar Web.
A continuación, se hará una pasada rápida sobre los lenguajes básicos utili-
zados para desarrollar aplicaciones Web; estos lenguajes se explican brevemen-

1
CAPÍTULO 1. INTRODUCCIÓN 2

te y de forma práctica más adelante. Es importante entender que mantienen

mucha compatibilidad hacia atrás ya que en Internet conviven, hoy por hoy,
páginas hechas con todas las versiones y éstas a veces evolucionan a un ritmo
sorprendente, así pues, cada versión normalmente extiende la anterior y no
suele cambiar su sintaxis.

La base de la Web, el lenguaje HTML (HyperText Markup Langua-

ge)

HTML es el lenguaje básico con el que se pueden crear páginas Web, con el
paso del tiempo se han ido añadiendo etiquetas a las que ya tenía además de
dar soporte a otros lenguajes como CSS (Cascade Style Sheets).
Las versiones anteriores a la 3.2 del lenguaje están ya caducadas y no son
útiles hoy día; hoy en día un nuevo proyecto se debería emprender intentando
seguir el estándar XHTML que es la última versión, aprobada en enero 2000.

El lenguaje XHTML (eXtensible HTML)

Este lenguaje es el que ha supuesto el mayor cambio desde 1997 (HTML 3.2),
ya que busca proporcionar páginas Web ricas en contenido a un amplio abanico
de dispositivos PC, móviles y dispositivos con conexión inalámbrica.

XML (eXtensible Markup Language)

XML es un metalenguaje que fue ideado para “describir” un conjunto de datos

como pudiera ser los campos de una tabla para intercambiar información de
forma rápida y fácil. También permite especificar cómo tienen que ser los
datos, por lo que se decidió especificar el lenguaje HTML con XML y nació
XHTML.

CSS (Cascade Style Sheets), Hojas de estilo

En los primeros tiempos de las páginas Web, se tenía en un mismo documento

“.html” tanto los párrafos de texto e imágenes como su estilo, y se indicaba el
tipo de atributos del texto dentro de las etiquetas HTML.
CAPÍTULO 1. INTRODUCCIÓN 3

Ahora que se tiene las CSS [5], se asigna a las etiquetas una clase dentro del
documento “.html”, y a esa clase contenida en otro documento se le especifica
el formato, de esta forma se tienen dos documentos: uno con los datos y
otro que dice cómo deben representarse. Si se quisiera hacer un cambio en la
representación de una Web compuesta por 100 páginas y las 100 leen el mismo
CSS, con un solo cambio en el “.css” se habría cambiado toda la representación
automáticamente.

DOM (Document Object Model)

Cuando se carga una página Web en el navegador, éste crea asociado a la

página una serie de objetos en forma jerárquica, de manera que mediante
un lenguaje utilizable en la parte del navegador, como Javascript, pueden
modificarse las características de esos objetos y con ello la página en sí. Ya que
la página se actualiza inmediatamente si se realiza algún cambio con Javascript
mientras ésta está siendo visualizada, se habla de HTML dinámico: DHTML
(Dynamic HTML).

Lenguajes de Cliente, (Javascript Principalmente)

Cuando el usuario ve una página Web en su navegador, ésta puede tener,

aparte del código HTML o XHTML, código escrito en un lenguaje de script
que se utiliza normalmente para dotar de dinamismo a las páginas y obtener
DHTML. El principal lenguaje utilizado hoy día es Javascript; nació con Nets-
cape 2.0 y la versión actual es la 1.5 que implementan Netscape 6 y Mozilla
Firefox. Por su parte Microsoft también ha evolucionado hasta presentar su
versión 5.5 de Jscript (es una implementación abierta de Javascript) [10, JS].

Lenguajes de Servidor, (JSP, Java Server Pages)

A veces se necesita enviar información al servidor y que éste la procese y

responda (por ejemplo al conectarse a una cuenta de correo), o que guarde
información (por ejemplo en un foro). Para este procesamiento se utilizan
los lenguajes de servidor PHP, JSP (el que utiliza este texto), ASP, etc. Se
puede elegir el que más guste con sus pros y sus contras, y su dinámica de
funcionamiento es la siguiente:
CAPÍTULO 1. INTRODUCCIÓN 4

• Se tiene una página Web con código de alguno de estos lenguajes guar-
dada en el servidor; cuando un usuario (cliente) accede a ésta, el servidor
la ejecuta y le devuelve el resultado al cliente, que será solo HTML, no
contendrá lenguajes del lado del servidor ya que el navegador no los
comprende.

1.1.2 Visión en Conjunto

Se tiene un usuario que carga en su navegador una página compuesta por

XHTML y Javascript cuyo estilo está en un archivo CSS si se lo separa; el
navegador crea el DOM asociado a la página y el Javascript lo modifica para
conseguir dinamismo.
Se tiene en el servidor páginas hechas con JSP, cuando el usuario pide una
de estas páginas, el servidor la ejecuta y devuelve el resultado al usuario ya
sea una página XHTML u otro tipo de información.

Las RIA (Rich Internet Application Technologies)

Para que se entienda la necesidad del uso de AJAX, se va a ver una serie
de términos, problemas y posibles soluciones y ver cuál es el papel de AJAX
dentro de todo esto [4, AJAX].

Características de una Aplicación de Escritorio Si se le hecha un vista-

zo a una aplicación típica de escritorio se ve que tiene las siguientes cualidades:

• Responde de forma intuitiva y rápida.

• Da respuesta inmediata a los actos del usuario.

Características de una Aplicación Web Convencional

• Se Cliquea, se espera y la página se refresca.

• La página refresca todos los eventos, envíos y datos de la navegación.

• El usuario debe esperar la respuesta.

CAPÍTULO 1. INTRODUCCIÓN 5

• Modelo de petición/respuesta de comunicaciones síncronos.

• El estado del trabajo que se esta desarrollando se basa en qué página se

está.

Problemas de una Aplicación Web Convencional

• Respuesta lenta.

• Pérdida del contexto durante el refresco.

• Pérdida de información en la pantalla que se había rellenado.

• Pérdida de la posición del scroll de la pantalla.

• No se tiene respuesta inmediata a los actos.

• Se tiene que esperar que llegue la siguiente página.

Por estas razones nacieron las (RIA), Rich Internet Application Technolo-
gies.

1.1.3 Forman Parte de las RIA

Las siguientes ideas y tecnologías son, si no todas, las más importantes y

utilizadas en las páginas Web actualmente:

• Applet.

• Adobe Flash.

• Java WebStart.

• DHTML.

Hace un par de años se empezó a usar AJAX. A continuación se detallan

las ventajas y desventajas de la utilización de cada una de estas:

• APPLET.
CAPÍTULO 1. INTRODUCCIÓN 6

— Ventajas:
∗ Puede hacer uso de todas las APIS Java.
∗ Su desarrollo tiene un patrón de trabajo bien definido.
∗ Puede manipular gráficos y crear Interfaces de Usuario avan-
zadas.
— Desventajas:
∗ El navegador necesita un Plug-in.
∗ El tiempo de bajada del APPLET puede ser muy grande.

• ADOBE FLASH

Fue diseñado para ver Películas Interactivas, aunque ahora se utiliza mucho
para hacer juegos monousuario para Web ya que es programable con ActionS-
cript.

— Ventajas:
∗ Es capaz de dar un aspecto visual inigualable actualmente con
otras tecnologías para una página Web.
∗ Muy bueno para mostrar gráficos vectoriales 3D.
— Desventajas:
∗ El navegador necesita un plug-in.
∗ ActionScript es una tecnología propietaria.
∗ El tiempo de bajada del vídeo o programa suele ser muy grande
(lo bonito se paga).

• JAVA WEBSTART

Se puede decir que proporciona desde Internet una aplicación de escritorio.

— Ventajas:
∗ Una vez cargado, da una experiencia similar a una aplicación
de escritorio.
∗ Utiliza Tecnología muy extendida como Java.
∗ Las aplicaciones se pueden firmar digitalmente.
∗ Se pueden seguir utilizando una vez desconectado.
CAPÍTULO 1. INTRODUCCIÓN 7

— Desventajas:
∗ El navegador necesita un plug-in.
∗ Problema de compatibilidad con las aplicaciones viejas ya que
se han cambiado algunas cosas.
∗ El tiempo que puede tardar en descargar una aplicación de
escritorio es demasiado grande.

• DHTML = HTML + Javascript + DOM + CSS

— Ventajas:
∗ Se utiliza para crear aplicaciones interactivas y más rápidas.
— Desventajas:
∗ La comunicación es síncrona.
∗ Requiere el refresco completo de la página, perdiendo parte del
contexto.

• AJAX = DHTML + XMLHttpRequest

Es un refinamiento del DHTML, utiliza todas sus herramientas, sumán-

dole el objeto XMLHttpRequest para obtener información asíncronamente y
refrescar solo la parte necesaria de la página sin perder nada del contexto, se
terminaron los problemas del DHTML.

— Ventajas:
∗ La mejor tecnología RIA hasta el momento.
∗ Está en su mejor momento para la industria.
∗ No se necesita descargar plug-in.
— Desventaja:
∗ Todavía existen incompatibilidades entre navegadores (cada
vez menos).
∗ Desarrollo con Javascript, hoy día no suficientemente explora-
do.

Con todo lo anterior, se ve que hoy en día la mejor posibilidad y más

nueva para ofrecer una experiencia rica al usuario es la utilización de AJAX
y la verdad es que proporciona todo lo que promete, como se puede ver en los
ejemplos reales en los que se ha utilizado.
CAPÍTULO 1. INTRODUCCIÓN 8

Figura 1.1: Primer ejemplo con Ajax.

1.2 Algunos Ejemplos Reales de AJAX

Lo mejor es ver algunas posibilidades del uso de AJAX, se va a hacer mención

primero a la que fue la primera aplicación AJAX conocida, Microsoft inventó
el objeto XMLHttpRequest y lo usó en su versión Web del Outlook en 1998.
La figura 1.1 de la página 8 visualiza el ejemplo anterior.
¿Cómo, se preguntaran algunas personas, hasta el año 2005 no se empezó
a utilizar esta tecnología realmente?, la respuesta es sencilla, solo Internet
Explorer era capaz de generar el objeto XMLHttpRequest(llamado de otro
modo). Cuando Mozilla Firefox, el navegador más grande de la competencia,
implementó un objeto compatible, y más tarde el resto de navegadores de
código abierto, empezó el boom.
Otro gran ejemplo del uso de AJAX es Google Earth ( http://earth.google.es/
), que ha sido más conocido debido a que es más actual y la verdad llama mu-
chísimo más la atención por la cantidad de zoom que se puede hacer en los
mapas, convirtiéndose en una verdadera guía para no perderse por la ciudad.
CAPÍTULO 1. INTRODUCCIÓN 9

Figura 1.2: Página Google 1.

En la figura 1.2 de la página 9 se puede observar la página principal de Google

Earth.

La aplicación tiene una calidad en las imágenes envidiable y todavía se

puede acercar más y mover, todo como si fuera una aplicación de escritorio,
sin cambiar de página en ningún momento, todo el mapa se va generando
asíncronamente haciendo peticiones por debajo al servidor.

1.2.1 Notas Finales

Como muestra la evolución de las tecnologías Web y los ejemplos reales del uso
de AJAX llega el momento en que las compañías que se dedican al desarrollo
Web hagan los cursillos de reciclaje a sus empleados, la documentación que
sigue ha sido desarrollada basándose en muchas fuentes, se ha hecho intentan-
do que la curva de aprendizaje sea lo menos pronunciada posible por si hay
personas que se quieren iniciar en el desarrollo Web con AJAX.
CAPÍTULO 1. INTRODUCCIÓN 10

Figura 1.3: Página Google 2.

Capítulo 2

Las RIA

2.1 HTML y XHTML

2.1.1 Conceptos Básicos de HTML

El lenguaje HTML (HyperText Markup Language) está pensado para hacer

documentos; normalmente los documentos contienen texto, párrafos (texto),
imágenes (con el nombre de su archivo que es texto), tablas (que contienen
texto), etc., y mantienen una estructura sencilla, así de simple es el HTML,
actúa mediante tags sobre el texto [4].

• <tag> Texto sobre el que actúa la tag </tag>

“<tag>” indica el comienzo de la tag y “</tag>” el fin, éstas encierran

el texto sobre el que actúan, por ejemplo la tag <b>...</b> pone el texto en
negrita, las tags se pueden escribir tanto en mayúscula como en minúscula, es
indiferente, el lenguaje no es sensible a ello.

2.1.2 Estructura del Documento HTML, Ejemplo Básico

<HTML>

<HEAD>

11
CAPÍTULO 2. LAS RIA 12

Figura 2.1: Primer Ejemplo HTML.

<TITLE>.:Trabajo Final de Aplicación:.</TITLE>

</HEAD>

<BODY>

<B> ¡¡Bienvenidos!! </B>

</BODY>

</HTML>

Hay tres tags que describen las partes del documento y que son imprescin-
dibles:

• <html> y </html>: Indican el principio y fin del código html.

• <head> y </head>: Especifica el protocolo y tiene el tag <title> que

es utilizado como título de la página por el navegador.

• <body> y </body>:Contiene el resto del documento, el contenido.

Si se abre directamente la página con InternetExplorer desde nuestro disco

duro, se debería obtener el resultado como se muestra en la figura 2.1 de la
página 12.
Como se puede ver en la figura 2.1 de la página 12 del ejemplo anterior,
CAPÍTULO 2. LAS RIA 13

todo lo que se hace es encerrar texto entre tags para formatearlo, centrarlo,
etc., casi todo lo que permitiría hacer un procesador de textos actual.

2.1.3 Tags de Imagen y Tabla

Leer imágenes o crear tablas puede resultar un tanto más complejo debido a
la anidación de los campos.

Imágenes:

<HTML>

<HEAD>

<TITLE> Trabajo Final de Aplicación</TITLE>

</HEAD>

<BODY>

<B>Imagen de Prueba</B>

<IMG border=“0” src=“../imagenes/encabezado.png” width=“700” height=“125”

border=“0” alt=“logo”>

</BODY>

</HTML>

Como se puede observar, la tag de imagen <IMG> no tiene un final

</IMG>, esto no es necesario ya que simplemente se está actuando sobre
un objeto de la página que se asignó en la tag.
Dentro de la tag <IMG> existen 5 campos que se detallan a continuación:

• src: Es el único campo obligatorio, indica dónde se encuentra la imágen,

en el ejemplo indica un directorio llamado “imagenes” que contiene la
imágen “encabezado.png”.
• width y height: Indican el ancho y alto, no es necesario indicarlo,
permite manipular el tamaño de la imagen, si no se indica el navegador
utilizará el tamaño original de la imágen.
CAPÍTULO 2. LAS RIA 14

Figura 2.2: Ejemplo HTML: Imágenes.

• border: Permite colocar un marco a la imágen.

• alt: Es el texto que se muestra, si la imagen está cargando, no se carga

o cuando se posiciona el mouse encima de ella (esto último en Internet
Explorer ).

En la figura 2.2 de la página 14 se puede observar el resultado.

El ejemplo permite visualizar la imágen, pero además, se podría también
centrarla. Para que aparezcan líneas diferentes se podría se utiliza la tag
<BR>.
Para centrar tanto la frase “Imágen de Prueba” como la imágen se podría
poner el tag <center> antes de la frase y el final </center> detrás del tag
de la imagen, o ponerlo 2 veces, una para el texto y otra para la imágen, esto
último es lo recomendable, por si se quiere hacer un cambio solo a esa parte
del documento. El código sería el siguiente:
<HTML>

<HEAD>
CAPÍTULO 2. LAS RIA 15

Figura 2.3: Ejemplo HTML: Etiquetas.

<TITLE> Trabajo Final de Aplicación</TITLE>

</HEAD>

<BODY>

<CENTER>

<B>Imágen de Prueba</B>

<BR>

</CENTER>

<CENTER>

<IMG border=“0” src=“../imagenes/encabezado.png” width=“700” height=“125”

border=“0” alt=“logo”>

</CENTER>

</BODY>

</HTML>
CAPÍTULO 2. LAS RIA 16

Tablas

Una tabla HTML puede ser considerada de manera simple como un grupo
de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así
como toda estructura en documentos HTML, son definidas usando tags. A
continuación se agrega una tabla en el ejemplo anterior.
<HTML>

<HEAD>

<TITLE> Trabajo Final de Aplicación</TITLE>

</HEAD>

<BODY>

<CENTER>

<B>Imágen de Prueba</B>

<BR>

</CENTER>

<CENTER>

<IMG border=“0” src=“../imagenes/encabezado.png” width=“700” height=“125”

border=“0” alt=“logo”>

</CENTER>

<CENTER>

<TABLE border=“4”>

<TR>

<TH>Nombre Empresa</TH>

<TH>Dirección</TH>

<TH>Provincia</TH>

</TR>

<TR>
CAPÍTULO 2. LAS RIA 17

<TD>“Baterías Rac”</TD>

<TD>Rivadavia 60</TD>

<TD>Formosa</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

En la figura 2.3 de la página 15 se puede apreciar el resultado de la ejecución

del código de ejemplo. A continuación se detallan las tags utilizadas en el
mismo:

• <Tabla>...</Tabla>: Contiene toda la tabla y dentro es donde se

pueden usar los tags <TR> , <TH> y <TD>, entre otros.

• <TR>...<TR>:Contienen una fila, dentro de ellos se usan las etiquetas

<TH> y <TD>.

• <TH>...</TH>:Forman una columna de encabezado dentro de una

fila.

• <TD>...<TD>Forman una columna dentro de una fila.

2.1.4 Hiperenlaces

Los vínculos son una parte vital de HTML y del concepto mismo de la Web.
Internet es considerada una red debido a cómo los vínculos conectan partes o
documentos separados, basados en la idea de una simple referencia sumada a
la interactividad.
Un vínculo HTML puede ser básicamente considerado como una referen-
cia a otro recurso. Esta referencia establece una relación implícita entre el
documento y el recurso vinculado. Los vínculos pueden ser clasificados como
visuales (ubicados dentro del contenido del documento) u ocultos (definiendo
información relacional generalizada).
CAPÍTULO 2. LAS RIA 18

Figura 2.4: Ejemplo HTML: Tablas.

En el ejemplo anterior se agrega la siguiente línea de código para agregar

un vínculo o enlace con otra página, en este caso a la página de un buscador
de Internet:

• <A href=“http://www.google.com/”>Buscador</A>

Aparecerá la frase “Buscador” resaltada, al pulsar sobre ella, se abrirá la

ventana correspondiente.

2.2 XHTML

XHTML (eXtensible Hypertext Markup Language), es el lenguaje de marcado

pensado para sustituir a HTML como estándar para las páginas Web.
Como se ha visto, en HTML no existen restricciones muy significativas en
cuanto a su codificación, ya que la mayoría de los navegadores lo permiten,
esto ensucia mucho el código y en consecuencia se creó XHTML.
Como ocurre con la lengua oral, el HTML es un lenguaje sencillo que ha
terminando usándose muchísimo y debido a esto se ha ido degradando un poco
CAPÍTULO 2. LAS RIA 19

su uso ya que no todos forman parte de la real academia, XHTML es una forma
estricta de escribir HTML ya que esta definido en XML y tiene un documento
DTD de validación. Esta forma de escribir es totalmente compatible con
HTML 4.01 ya que se definió a partir de éste, con lo cual, cualquier navegador
puede leerlo [5].

2.2.1 Diferencias Más Importantes Entre XHTML y HTML

• Los elementos deben estar correctamente anidados.

• Los nombres de los tags deben estar en minúscula.

• Los tags deben tener su etiqueta de fin.

— Ejemplo:
∗ Forma incorrecta:

<b><i>Estas cosas funcionan con HTML </B></I>

∗ Forma correcta:

<b><i>Este es un texto XHTML válido </i></b>

• Los documentos deben estar bien formados: Esto significa respetar la

anidación de etiquetas.

— Ejemplo:

<html>

<head> <title> ... </title> ...</head>

<body> ... </body>

</html>

• Los tags que eran únicos y no tenían tag de cierre, ahora llevan el símbolo
de finalización, <br> ahora se escribiría como <br /> dejando un espacio
entre br y / para que sea compatible con los navegadores actuales.
CAPÍTULO 2. LAS RIA 20

— Ejemplo:
∗ En HTML:

<IMG border=“0” src=“../imagenes/encabezado.png” width=“700” height=“125”

alt=logo>
∗ En XHTML:

<IMG border=“0” src=“../imagenes/encabezado.png” width=“700” heig-

ht=“125” alt=logo />

• Los nombres de los atributos deben estar en minúscula y su contenido

entre comillas:

<img src=“img/perros.jpg” width=“396” height=“247” border=“12” alt=“Perritos

graciosos” />

• Los atributos ahora se tienen que escribir como se observa en la tabla

2.1 de la página 21.

• El atributo “id” sustituye al atributo “name”, su utilidad es la misma,

darle un nombre al objeto.
• Se pueden usar los atributos “Lang” y “xml:lang” para especificar el
lenguaje de un elemento, el atributo “xml:lang” tiene preferencia.
• El documento básico XHTML debe contener la declaración DOCTYPE,
de esta forma el documento quedaría de la siguiente manera:

<!DOCTYPE ...>

<html>

<head>

<title>... </title>

</head>

<body> ... </body>

</html>
CAPÍTULO 2. LAS RIA 21

HTML XHTML
compact compact=“compact”
checked checked=“checked”
declare declare=“declare”
readonly readonly=“readonly”
disabled disabled=“disabled”
selected selected=“selected”
defer defer=“defer”
nohref nohref=“nohref”
noshade noshade=“noshade”
nowrap nowrap=“nowrap”
multiple multiple=“multiple”
noresize noresize=“noresize”
ismap ismap=“ismap”

Tabla 2.1: Atributos en HTML y XHTML.

• Existen 3 tipos de documentos XHTML:

— XHTML 1.0 Estricto: se utiliza para lograr un código limpio.

Quedaría de la siguiente manera:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

— XHTML 1.0 Transicional:se utiliza para aprovechar las ventajas

de las capacidades de presentación de HTML y cuando es necesa-
rio soportar navegadores que no aceptan CSS [6]. Quedaría de la
siguiente manera:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//

EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

— XHTML 1.0 Frameset:Se utiliza cuando se desea usar frames.

El código es el siguiente:
CAPÍTULO 2. LAS RIA 22

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

2.2.2 ¿Cómo Validar una Página Web?

El Consorcio Word Wide Web posee una página Web que contiene una aplica-
ción para validar páginas XHTML, CSS, etc., el mismo verifica que las páginas
esten correctamente construidas, su dirección es http://validator.w3.org/.

2.3 XML

XML es un metalenguaje que se usa para definir otro lenguaje o estructura

de datos, básicamente es un lenguaje de etiquetado como HTML con sus eti-
quetas de principio y fin, solo que los nombres de las etiquetas son hechas por
el programador según convenga para crear formatos propios, luego se toma
el texto que contiene las etiquetas seleccionándolas por su nombre [10]. A
continuación se detalla un ejemplo del código:

• Nombre del archivo: biblioteca.xml.

• Código:

<?xml version=“1.0” encoding=“UTF-8”?>

<Biblioteca>

<Libro>

<ISBN>84-688-4704-6</ISBN>

<Titulo>J2ME (Java 2 Micro Edition)</Titulo>

<Autor>Sergio Galvez Rojas y Lucas Ortega Diaz</Autor>

</Libro>

<Libro>

<ISBN>84-689-1037-6</ISBN>
CAPÍTULO 2. LAS RIA 23

<Titulo>Traductores y Compiladores con Lex/Yacc</Titulo>

<Autor>Sergio Galvez Rojas y Miguel Angel Mora Mata</Autor>

</Libro>

</Biblioteca>

Como se muestra en el ejemplo, se tiene una biblioteca que contiene libros,

y esos libros contienen a su vez ciertos campos, esto es lo que se llama un
documento bien formado, es decir, cumple las especificaciones del lenguaje,
pero no esta sujeto a un DTD (Definición Tipo Documento).

Si además sigue una estructura sujeta a un DTD el documento es consi-

derado válido.

2.4 JavaScript

JavaScript es un lenguaje de programación interpretado, es decir, que no re-

quiere compilación, utilizado principalmente en páginas Web, con una sintaxis
semejante a la del lenguaje Java y el lenguaje C.
Al igual que Java, JavaScript es un lenguaje orientado a objetos propia-
mente dicho, ya que dispone de Herencia, si bien esta se realiza siguiendo el
paradigma de programación basada en prototipos, ya que las nuevas clases se
generan clonando las clases base (prototipos) y extendiendo su funcionalidad.

Todos los navegadores modernos interpretan el código JavaScript integrado

dentro de las páginas Web.

2.4.1 Crear un Nuevo Objeto

Como en cualquier otro lenguaje, no tiene ninguna particularidad especial

aparte de que JavaScript tiene su sintaxis.
var miObjetoPruebas = new constructorObjeto(param01,...,paramN);
CAPÍTULO 2. LAS RIA 24

2.4.2 Crear un Nuevo Constructor

Para crear una clase en JavaScript se debe escribir una función especial, que se
encargará de construir el objeto en memoria e inicializarlo. Esta función se le
llama constructor en la terminología de la programación orientada a objetos.
function constructorObjeto (param01,...,paramN)

this.variable01 = param01; //Las variables creadas con this son públicas.

var privada01 = “Soy privada”; //Las variables creadas con var son privadas.

...

this.variableN = paramN;

this.funcion01 = funcion01;

...

this.funcionN = funcionN;

var funcionprivada = funcionprivada() { alert(“Soy privada”);} //Función privada

Utiliza la palabra this para declarar las propiedades y métodos del objeto
que se está construyendo. A ese objeto que se está construyendo se le asignan
valores en sus propiedades y también nombres de funciones definidas para
sus métodos. Al construir un objeto técnicamente es lo mismo declarar una
propiedad o un método, solo difiere en que a una propiedad se le asigna un
valor y a un método se le asigna una función.

2.4.3 Asignar un Método a un Objeto

Al crear una función que esté ligada a un objeto desde su creación sin necesi-
dad de especificarlo durante su creación, lo mejor es emplear prototipos, pero
también es posible asignar una función en cualquier momento a una variable
como se observa a continuación, esto se usa a lo largo de todo el libro para
reasignar los manejadores de la clase AJAX.
CAPÍTULO 2. LAS RIA 25

function funcionX(argumento01,...,argumentoM)

Código de la función.

• Ejemplo:

<html>

<body>

Vamos a hacer un pastel.

<script Language=“JavaScript” type=“text/javascript”>

function constructorPastel(chocolate,nata,galletas)

this.chocolate = chocolate;

this.galletas = galletas;

this.nata = nata;

this.ingredienteSecreto;

this.montarPastel = montar;

function montar()

window.alert(“ Montado el pastel con ” + this.ingredienteSecreto + “ de ingre-

diente secreto”);

var pastelSoloChocolate= new constructorPastel(100,0,100);

pastelSoloChocolate.ingredienteSecreto = 20;
CAPÍTULO 2. LAS RIA 26

pastelSoloChocolate.montarPastel();

</script>

</body>

</html>

JavaScript permite emplear variables sin declarar, dentro o fuera de objetos

y reasignar funciones a objetos, entre otras cosas. Se está en presencia de un
lenguaje débilmente tipado. Además una variable que en principio se utilizó
como entero, podría ser utilizada mas tarde como una cadena, etc.

2.5 Applet

Un applet es un componente de una aplicación que se ejecuta en el contexto

de otro programa, por ejemplo un navegador Web. El applet debe ejecutarse
en un contenedor, que lo proporciona un programa anfitrión, mediante un
plugin, o en aplicaciones como teléfonos móviles que soportan el modelo de
programación por applets.
A diferencia de un programa, un applet no puede ejecutarse de manera
independiente, ofrece información gráfica y a veces interactúa con el usuario,
típicamente carece de sesión y tiene privilegios de seguridad restringidos.
Un applet normalmente lleva a cabo una función muy específica que carece
de uso independiente. El término fue introducido en AppleScript en 1993.
Un applet es un elemento más de una página Web, como una imágen o
una porción de texto. Cuando el navegador carga la página Web, el applet
insertado en dicha página se carga y se ejecuta.
Mientras que un applet puede transmitirse por la red Internet, una aplica-
ción reside en el disco duro local. Una aplicación Java es como cualquier otra
que está instalada en el ordenador. La otra diferencia es que un applet no está
autorizado a acceder a archivos o directorios del ordenador cliente si no es un
applet completamente fiable.
Ejemplos comunes de applets son las Java applets y las animaciones Flash.
Otro ejemplo es el Windows Media Player utilizado para desplegar archivos de
video incrustados en los navegadores como el Internet Explorer. Otros plugins
CAPÍTULO 2. LAS RIA 27

permiten mostrar modelos 3D que funcionan con una applet.

Un Java applet es un código Java que carece de un método main, por
eso se utiliza principalmente para el trabajo de páginas Web, ya que es un
pequeño programa que es utilizado en una página HTML y representado por
una pequeña pantalla gráfica dentro de ésta.
Por otra parte, la diferencia entre una aplicación Java y un applet radica
en cómo se ejecutan. Para cargar una aplicación Java se utiliza el intérprete
de Java (Visual J++ de Microsoft, Forte de Sun de Visual Café). En cambio,
un applet se puede cargar y ejecutar desde cualquier explorador que soporte
Java (Nescape, Internet Explorer de Windows, Mozilla Firefox...etc.).

2.6 Adobe Flash

Adobe Flash (Fl) es una aplicación en forma de estudio de animación que

trabaja sobre “Fotogramas” destinado a la producción y entrega de contenido
interactivo para diferentes audiencias alrededor del mundo sin importar la
plataforma. Es actualmente escrito y distribuido por Adobe Systems, y utiliza
gráficos vectoriales e imágenes ráster, sonido, código de programa, flujo de
video y audio bidireccional (el flujo de subida sólo está disponible si se usa
conjuntamente con Macromedia Flash Communication Server ).
En sentido estricto, Flash es el entorno y Flash Player es el programa de
máquina virtual utilizado para ejecutar los archivos generados con Flash.
Los archivos de Flash, que tienen generalmente la extensión de archivo
SWF, pueden aparecer en una página Web para ser vista en un navegador, o
pueden ser reproducidos independientemente por un reproductor Flash. Los
archivos de Flash aparecen muy a menudo como animaciones en páginas Web
y sitios Web multimedia, y más recientemente Aplicaciones de Internet Ricas
(RIA). Son también ampliamente utilizados en anuncios de la Web.
En versiones anteriores, Macromedia amplió a Flash más allá de las ani-
maciones simples, convirtiéndolo en una herramienta de desarrollo completa,
para crear principalmente elementos multimedia e interactivos para Internet.
Fue hasta 2005 perteneciente a la empresa Macromedia conocido hasta
entonces como Macromedia Flash R
y adquirido por Adobe Systems (desde
entonces conocido como Adobe Flash) ampliando con ello su portafolio de
CAPÍTULO 2. LAS RIA 28

productos dentro del mercado.

2.7 Java WebStart

Java Web Start es la implementación de referencia de la especificación JNLP

(Java Networking Launching Protocol) y está desarrollada por Sun Microsys-
tems, mediante la cual permite arrancar aplicaciones Java que están en un
servidor Web de aplicaciones comprobando previamente si el cliente tiene la
versión actualizada de dicha aplicación. Si no es así descargará la última
versión y se ejecutará en local.
El arranque de dichas aplicaciones puede ser efectuado mediante enlaces
en una página Web o bien a través de enlaces en el escritorio cliente. Mediante
esta tecnología se asegura que una aplicación es distribuida siempre en su últi-
ma versión. Los ficheros que contiene la información sobre donde se encuentra
la aplicación, versión, etc. tiene la extensión jnlp.
Un ejemplo de esta tecnología es la de un servidor Web donde se encuentra
una página Web HTML con enlaces a aplicaciones Java. Cada uno de estos
enlaces apuntará a ficheros .jnlp que indicarán la ruta de la aplicación en este
u otro servidor. En ese momento arrancará automáticamente Java Web Start
y comprobará la seguridad y si el usuario tiene la última versión instalada ya
en su equipo, si no es así, la descarga y la ejecuta.
Actualmente Java Web Start viene incluido en el JRE (Java Runtime
Environment).
Sun Microsystems y Java Web Start son marcas registradas por Sun Mi-
crosystems, Inc.
El software de Java Web Start permite descargar y ejecutar aplicaciones
Java desde la Web.
El software de Java Web Start:

• Permite activar las aplicaciones con un simple clic.

• Garantiza que se está ejecutando la última versión de la aplicación.

• Elimina complejos procedimientos de instalación o actualización.

CAPÍTULO 2. LAS RIA 29

2.7.1 Obtención del Software de Java Web Start

Java Web Start se incluye en el entorno de ejecución de Java (JRE ) como

parte de JRE 5.0. Esto significa que al instalar el JRE, Java Web Start se
instala automáticamente.
Cuando se descarga por primera vez una aplicación que utiliza la tecnología
Java Web Start, el software de Java Web Start se ejecuta automáticamente
y guarda la aplicación localmente, en la memoria caché del equipo. De este
modo, las subsiguientes ejecuciones son prácticamente instantáneas, ya que los
recursos necesarios están disponibles de forma local.
Cada vez que se inicia la aplicación, el componente de software de Java
Web Start comprueba si en la sede Web de la aplicación hay una versión nueva
disponible; si es así, la descarga y la ejecuta de forma automática.

2.7.2 Ejecución de una Aplicación con el Software de Java Web

Start

• Desde un navegador: solo es necesario hacer clic en un vínculo de una

página Web.

• Desde un icono del escritorio: si se utiliza una aplicación con fre-

cuencia, se puede crear un acceso directo en el menú Inicio. De ser así
todas las ejecuciones posteriores de la aplicación se podrán iniciar sin
necesidad de un navegador.

• Desde el Visualizador de la memoria caché de aplicaciones de

Java: Java Web Start también proporciona un Visualizador de la memo-
ria caché de aplicaciones, que puede ejecutar desde el Panel de control de
Java. Este visualizador le permite ejecutar directamente las aplicaciones
que se descarguen.

• Desde el símbolo del sistema: también se puede ejecutar una aplica-

ción desde el símbolo del sistema introduciendo javaws jnlp_url, donde
jnlp_url corresponde a la URL del archivo jnlp de la aplicación.
CAPÍTULO 2. LAS RIA 30

2.8 DHTML

El HTML Dinámico o DHTML (del inglés Dynamic HTML) designa el con-

junto de técnicas que permiten crear sitios Web interactivos utilizando una
combinación de lenguaje HTML estático, un lenguaje interpretado en el lado
del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS )
y la jerarquía de objetos de un DOM.
Una página de HTML Dinámico es cualquier página Web en la que los
scripts en el lado del cliente cambian el HTML del documento, después de
que éste se haya cargado completamente, lo cual afecta a la apariencia y las
funciones de los objetos de la página.
La característica dinámica del DHTML, por tanto, es la forma en que la
página interactúa con el usuario cuando la está viendo, siendo esta la misma
para todos los usuarios.
En contraste, el término más general “página web dinámica” se usa para
referir a alguna página específica que es generada de manera diferente para
cada usuario, en cada recarga de la página o por valores específicos de variables
de entorno. Este término no debe ser confundido con DHTML.
Estas páginas dinámicas son el resultado bien de la ejecución de un progra-
ma en algún tipo de lenguaje de programación en el servidor de la página Web
(como por ejemplo ASP.NET, PHP o Perl ), el cual genera la página antes
de enviarla al cliente, o bien de la ejecución en la parte cliente de un código
que crea la página completa antes de que el programa cliente (usualmente, un
navegador) la visualize.

En una página DHTML, una vez que ha sido cargada completamente por
el cliente, se ejecuta un código (como por ejemplo JavaScript) que tiene efectos
en los valores del lenguaje de definición de la presentación (por ejemplo CSS ),
logrando así una modificación en la información presentada o el aspecto visual
de la página mientras el usuario la está viendo.

2.8.1 Usos

Entre los usos más habituales del DHTML se pueden destacar los siguientes:

• Menús desplegables.
 • Imágenes que cambian al pasar el cursor sobre ellas.

• Objetos en movimiento.

• Botones que permiten desplazar el texto que se está mostrando.

• Textos explicativos que aparecen al situar el cursor sobre ciertas palabras

clave.

• Cronómetros, etc.

• Otro uso interesante de esta tecnología es la creación de juegos de acción

que utilizan el navegador Web para funcionar, aunque tradicionalmente
este tipo de desarrollos han sido complicados debido a las diferencias en
el lenguaje y las características soportadas por los distintos navegadores
existentes.

Recientemente los navegadores más populares han empezado a soportar

estándares comunes, como el DOM, lo cual ha facilitado mucho la creación de
este tipo de aplicaciones.

• En DHTML, el tag <noscript> puede ser usado para poner información

que se mostrará cuando el navegador no soporte Javascript o lo tenga
deshabilitado.
Capítulo 3

El Objeto XMLHttpRequest

3.1 Descripción

XMLHttpRequest (XHR), también referida como XMLHTTP (Extensible Mar-

kup Language / Hypertext Transfer Protocol), es una interfaz empleada para
realizar peticiones HTTP y HTTPS a servidores Web. Para los datos trans-
feridos se usa cualquier codificación basada en texto, incluyendo: texto plano,
XML, JSON, HTML y codificaciones particulares específicas. La interfaz se
presenta como una clase de la que una aplicación cliente puede generar tantas
instancias como necesite para manejar el diálogo con el servidor.
El uso más popular, si bien no el único, de esta interfaz es proporcionar
contenido dinámico y actualizaciones asíncronas en páginas Web mediante
tecnologías construidas sobre ella como por ejemplo AJAX.
En este capítulo se demuestra su uso mediante ejemplos utilizados en la
aplicación final.

Para comenzar es necesario construir una pequeña librería (archivo carga-

do por el navegador) programada haciendo uso de JavaScript, primero para
comprender cómo funciona el objeto XMLHttpRequest que se ha hecho muy
famoso ya que constituye las entrañas de AJAX y también porque es reco-
mendable utilizar una librería en el lado cliente para ahorrar problemas, como
se verá seguidamente y, también para reutilizar código [8].

32
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 33

3.1.1 Implementación y Uso de la Interfaz

La interfaz se presenta encapsulada en una clase. Para utilizarlo, la aplicación

cliente debe crear una nueva instancia mediante el constructor adecuado. Es
posible realizar peticiones síncronas y asíncronas al servidor; en una llamada
asíncrona el flujo de proceso no se detiene a esperar la respuesta como se haría
en una llamada síncrona, si no que se define una función que se ejecutará
cuando se complete la petición: un manejador de evento.
XMLHttpRequest es una interfaz para realizar llamadas mediante HTTP,
por lo que es recomendable un buen conocimiento de este protocolo. Es im-
portante el manejo correcto de la cache en el servidor HTTP, en los proxy
cache intermedios y en el navegador Web.
Otro elemento importante es el manejo de juegos de caracteres, la codifica-
ción y decodificación de texto y su identificación mediante cabeceras HTTP y
MIME. El estándar XMLHttpRequest recomienda UTF-8 para la codificación
de cadenas de texto.
La codificación particular de los datos transmitidos se determina según el
siguiente algoritmo, utilizando la primera opción que corresponda:

• Si los datos transmitidos son XML o HTML, así se identifica median-

te la correspondiente cabecera Content-Type de HTTP, la codificación
se detectará basándose en las reglas estándar de XML o HTML según
corresponda.
• Si la cabecera HTTP especifica un tipo MIME mediante Content-Type
e identifica un charset se utiliza dicho charset.
• Si los datos enviados especifican un BOM válido, se utilizará la variante
UTF determinada por dicho BOM.
• Utilizar UTF-8.

3.2 Características Generales del Objeto

3.2.1 Razones Para Utilizar una Librería en el Lado Cliente

Características básicas que debe cubrir una librería en el lado del cliente:
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 34

• La tecnología que use el servidor debe ser indiferente, es decir no debe

actuar directamente con tecnologías como PHP, JSP, ASP, etc...

• Debe ser accesible en cualquier momento, y en lo posible localmente.

• Debe manejar las incompatibilidades de los navegadores y hacer el código

compatible.

• Debe manejar la comunicación asíncrona ocultando las operaciones a

bajo nivel.

• Debe dar al desarrollador una forma fácil de acceder al DOM (Document

Object Model).

• Debe dar cierto manejo ante errores, primero para que el programa no
colapse y segundo para proporcionar cierta información al desarrollador.

• Debería de intentar seguir una programación orientada a objetos y que

éstos fueran reutilizables.

Las librerías ahorran una multitud de problemas, de otra manera intentar

hacer una aplicación Web medianamente vistosa se convertiría en un trabajo
tedioso, que además será casi imposible de mantener.
Características avanzadas que podría cubrir una librería en el lado del
cliente:

• Proporcionar diferentes objetos gráficamente agradables directamente,

como calendarios, botones, ventanas desplegables, etc...

• Proporcionar interfaces de usuario avanzadas, con animaciones y dife-

rentes efectos gráficos que hagan la experiencia más agradable.

Razones comerciales para utilizar una de las librerías avanzadas ya exis-

tentes en Internet

• Son mejores que las librerías propias, ya que están creadas normalmente
por multitud de desarrolladores, y por lo tanto pretesteadas.

• Establecen comunidades de forma que la comunidad le añade prestacio-

nes y es fácil conseguir ayuda en sus foros.
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 35

• Los entornos IDE no tardarán mucho tiempo en darle soporte, al menos

a las más importantes de código abierto.

La librería que se construirá cubrirá las características básicas; para cubrir

las características avanzadas existen multitud de librerías de código abierto
y comerciales, además no aportan demasiado a la comprensión del problema
que resuelve AJAX sino más bien, como se ha dicho anteriormente, mejoran
la experiencia visual.
Muchas de las librerías pueden ser difíciles de utilizar para el usuario no
experto y las que pueden ser mas fáciles esconden totalmente el problema.

En los siguientes ejemplos se utilizará AJAX a bajo nivel, en primer lugar

se debe crear el objeto en los diferentes navegadores [7].

3.2.2 La Dependencia de los Navegadores

El objeto XMLHttpRequest no es estándar,originariamente fue inventado por

Microsoft, usado desde Internet Explorer 5.0 como un objeto ActiveX, siendo
accesible mediante JavaScript. Mozilla en su versión 1.0 implementó un objeto
compatible.
Debido a que estos dos últimos son los navegadores más difundidos y que
además existen navegadores basados en el código de Mozilla, es recomendable
intentar la compatibilidad en ambos, y de esta manera conseguir que el código
funcione en forma óptima en más del 90% de las veces.
Ejemplo:
El siguiente ejemplo muestra cómo redireccionar una página HTML en
forma asíncrona. Básicamente el proceso consta de tres partes:

1. Página HTML que realiza la petición: en la misma se define el objeto

botón que responde al evento “onclick”. Cuando ocurre el evento se
llama a una función JavaScript.

2. Función JavaScript que hace de nexo entre el cliente y el servidor me-

diante el objeto XMLHttpRequest: cuando ocurre el evento se ejecuta
una función que realiza la comunicación asíncrona con el servidor lla-
mando a un servlet que reside en él.
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 36

3. Clase java que extiende a la clase HttpServlet y redefine el método Get

para el tratamiento de los requerimientos y las respuestas: resibe el
requerimiento y muestra la respuesta.

• Código JavaScript (lado del cliente.): el código que se muestra funcio-

nará tanto en Internet Explorer como en Mozilla, dado que se prevé la
creación del objeto XMLHttpRequest de tal forma que sea compatible
con ambos navegadores:

function objetoAjax(){

var xmlhttp=false;

//para Internet Explorer

try {

xmlhttp = new ActiveXObject(‘Msxml2.XMLHTTP’);

}catch (e) {

try {

xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP’);

}catch (E) {

xmlhttp = false;

//para Mozilla

if (!xmlhttp && typeof XMLHttpRequest!=‘undefined’) {

xmlhttp = new XMLHttpRequest();

return xmlhttp;

function VerImagen(){
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 37

divResultado = document.getElementById(‘resu’);

ajax=objetoAjax()

var url = ‘../VerImagenPrueba’;

ajax.open(‘GET’, url);

ajax.onreadystatechange=function() {

if (ajax.readyState==4) {

divResultado.innerHTML = ajax.responseText

ajax.send(null)

• Código HTML (lado del cliente): se crea una página que contiene un
botón que realizará el evento y llamará a la función JavaScript.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<HTML>

<HEAD>

<SCRIPT language=“JavaScript” src=“../js/ScriptGeneral.js”></SCRIPT>

<TITLE>.:Trabajo Final de Aplicación:.</TITLE>

</HEAD>

<BODY>

<CENTER>

<INPUT type=“button” name=“mostrar” value=“Mostrar Imágen”

onclick=VerImagen() ><BR>
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 38

<BR>

</CENTER>

<CENTER>

<div id=resu>Aquí aparecerá la imágen</div>

</CENTER>

</BODY>

</HTML>

• Código del Servlet (lado del servidor): se toma el requerimiento y arma

la respuesta que enviará en forma asíncrona al cliente.

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.Servlet;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class VerImagenPrueba extends HttpServlet implements Servlet {

protected void doGet(HttpServletRequest request, HttpServletResponse

response) throws ServletException, IOException {

//Muestra la imágen en el lado del cliente

PrintWriter out = response.getWriter();

out.println(“<CENTER>” );

out.println(“<IMG border=0 src=../imagenes/encabezado.png ” );

out.println(“width=700 height=125 alt=logo />” );

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 39

Figura 3.1: Página Inicial antes del Evento.

out.println(“</CENTER>” );

En la figura 5.7 de la página 89 se visualiza la página HTML antes de que

ocurra el evento.
La figura 5.8 de la página 5.8 muestra el resultado luego del evento. El
proceso se realiza en forma asíncrona y es transparente para el usuario, no
existe refresco de página.

3.3 Navegadores Compatibles

Como se vió en el ejemplo anterior, es necesario tratar de manera diferente la

creación del objeto XMLHttpRequest de acuerdo al navegador que se utilice,
en el mismo se tuvo en cuenta a Mozilla Firefox e Internet Explorer.
La lista completa de los navegadores que actualmente soportan el objeto
XMLHttpRequest es la siguiente:

• Mozilla Firefox 1.0 y superiores.

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 40

Figura 3.2: Resultado luego del Evento.

• Netscape version 7.1 y superiores.

• Apple Safari 1.2 y superiores.

• Microsoft Internet Exporer 5 y superiores.
• Konqueror.

• Opera 7.6 y superiores.

No todos los navegadores lo soportan, pero se puede decir que en orde-

nadores personales se supera el 95% de los posibles clientes, además de esto
se está trabajando actualmente en navegadores para llevar AJAX hasta los
dispositivos móviles.

3.4 Métodos y Propiedades del Objeto

3.4.1 Métodos

El objeto XMLHttpRequest tiene una serie de métodos (funciones) que se uti-

lizan para hacer la petición.
Los métodos open y send son los que se emplean para establecer e iniciar
la conexión, se puede decir que son los obligatorios:
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 41

• Método: open(metodo,URL,banderaAsync,nombreuser, password): pre-

para y abre la petición.

— Parámetros:
∗ metodo: depende del tipo de petición, puede ser GET o POST.
∗ URL: contiene la dirección url del programa que reside en el
servidor.
∗ banderaAsync: si su valor es true realiza una petición asíncrona
y si es false realiza una petición síncrona.
∗ Nombreuser y password: solo se usan para acceder a recursos
protegidos.

• Método: send(contenido): ejecuta la petición.

— Parámetro:
∗ contenido: variable que contiene datos que se envían al servi-
dor.

• Método:abort(): se puede ejecutar mientras se procesa la petición.

• Método: getAllResponseHeaders(): devuelve todas las cabeceras de la
llamada HTTP como un string.
• Método:getResponseHeader(cabecera): devuelve la cabecera identificada
por la etiqueta.
• Método:setRequestHeader(etiqueta,valor): establece el valor de una eti-
queta de las cabeceras de petición antes de que se ejecute la misma. [4]

3.4.2 Propiedades

Además de los métodos, el objeto XMLHttpRequest también tiene una serie

de propiedades que indican el estado de la petición durante su ejecución. Se
pueden utilizar de la siguiente manera:

• Código devuelto por el servidor, del tipo 404 (documento no encontrado)

o 200 (OK):

document.getElementById(‘estado’).innerHTML = peticion01.status;
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 42

• Mensaje de texto enviado por el servidor junto al código (status), para

el caso de código 200 contendrá “OK”:

document.getElementById(‘txtestado’).innerHTML = peticion01.statusText;

• Los datos devueltos por el servidor en forma de cadena:

document.getElementById(‘txtresultado’).innerHTML = peticion01.responseText;

• Datos devueltos por el servidor en forma de documento XML que puede

ser recorrido mediante las funciones del DOM (getEementsByTagName,
etc):

document.getElementById(‘xmlresultado’).innerHTML = peticion01.responseXML;

• Propiedades que se pueden consultar mientras dura la petición para co-

nocer su estado. Sus valores varían desde 0(no iniciada) hasta 4(com-
pletado), en cualquier caso se debe hacer un switch.

document.getElementById(‘estconex’).innerHTML = peticion01.readyState;

• Propiedad que contiene el nombre de la función ejecutada cada vez que

el estado conexión cambia, es decir, se asigna una función que cada vez
que el estado dado por readyState cambia se lanza, por ejemplo se podría
visualizar un gráfico cuando esté en el estado de carga, etc.:

document.getElementById(‘estcamb’).innerHTML=peticion01.onreadystatechange

En la tabla 3.1 de la página 43 de puede observar un cuadro resumen de

las propiedades del objeto.

3.5 Peticiones Síncronas y Asíncronas

El método open es el encargado de definir si la petición se realiza en síncrona

o asíncrona, el código es el siguiente:
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 43

Propiedad Descripción
status Código devuelto por el servidor.
statusText Texto que acompaña al código.
responseText Datos devueltos formato string.
responseXML Datos devueltos formato Objeto XML
readyState Estado actual de la petición:
0: Sin iniciar.
1: Cargando.
2: Cargado.
3: Interactivo (algunos datos devueltos).
4: Completado
onreadystatechange Puntero a la función del manejador
que se llama cuando cambia readyState.

Tabla 3.1: Propiedades del Objeto XMLHttpRequest.

peticion01.open(‘GET’, url, false); //Abrimos la url, false=forma síncrona

Cuando se realiza una petición síncrona, el navegador queda bloqueado

hasta que recibe la información, en los ejemplos anteriores no se ha notado
debido a que se trata de pruebas sencillas que no reciben gran cantidad de
información.
En cambio si se realiza una petición asíncrona el usuario puede moverse por
la página hasta que recibe la información, es decir, aumenta la interactividad.
Para logarlo solo es necesario cambiar el false por un true:
peticion01.open(‘GET’, url, true); //Abrimos la url, true=forma asíncrona

El bloque de código Javascript funciona de la misma manera, solo que que-

da bloqueado en segundo plano a la espera de recibir el resultado de la petición
pero sin bloquear al navegador; es recomendable utilizar peticiones asíncronas
para aumentar la interactividad.A continuación se muestra un ejemplo:

• Código JavaScript:

function MostrarUrl(){

divResultado = document.getElementById(‘resu’);
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 44

est = document.getElementById(‘estado’);

ajax=objetoAjax()

var url =‘esperar.jsp’;

ajax.open(‘GET’, url,false);

ajax.onreadystatechange=function() {

if (ajax.readyState==0) {

est.innerHTML = “sin iniciar”

if (ajax.readyState==1) {

est.innerHTML = “cargando....”

if (ajax.readyState==4) {

est.innerHTML = “Completado”

divResultado.innerHTML = ajax.responseText

ajax.send(null)

• Código HTML:

<HTML>

<HEAD>

<SCRIPT language=“JavaScript” src=“../js/ScriptGeneral.js”></SCRIPT>

<TITLE>.:Trabajo Final de Aplicación:.</TITLE>

</HEAD>
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 45

<BODY>

<CENTER>

<INPUT type=“button” name=“mostrar” value=“Mostrar Imágen”

onclick=MostrarUrl() ><BR>

<BR>

</CENTER>

<CENTER>

<font id=estado >estado de la peticion</font>

<div id=resu>Aquí aparecerá la imágen</div>

</CENTER>

</BODY>

</HTML>

• Código JSP:

<HTML>

<HEAD>

<%@ page language=“java” contentType=“text/html; charset=ISO-8859-1”

pageEncoding=“ISO-8859-1”%>

<META http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1”>

<META name=“GENERATOR” content=“IBM Software Development Platform”>

<LINK href=“../theme/Master.css” rel=“stylesheet” type=“text/css”>

<TITLE>esperar.jsp</TITLE>

</HEAD>

<BODY>

<% try{
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 46

Figura 3.3: Ejemplo de Petición Síncrona.

Thread.sleep(1000);

}catch(InterruptedException e){}

%>

<CENTER>

<IMG border=0 src=../imagenes/encabezado.png width=700 height=125

alt=logo />

</CENTER>

</BODY>

</HTML>

La figura 3.3 de la página 46 muestra el resultado del ejemplo.

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 47

Ahora surge un problema, ¿cómo sabe el usuario que está esperando la

información, si no tiene muestra alguna de ello?, él sólo sabe que ha pulsado
un botón (en el ejemplo anterior), lo ideal sería que recibiera alguna señal. la
forma de manejar este tiempo es mediante la utilización de una de las pro-
piedades del método denominada readyState, como se muestra en el siguiente
código:
function VerImagen(){

divResultado = document.getElementById(‘resu’);

divEstado=document.getElementById(‘estado’);

ajax=objetoAjax()

var url = ‘../VerImagenPrueba’;

ajax.open(‘GET’, url, true);

ajax.onreadystatechange=function() {

if(ajax.readyState==){

if(ajax.readyState==0){

divResultado.innerHTML = “Sin iniciar”

if(ajax.readyState==1){

divResultado.innerHTML = “Cargando”

if(ajax.readyState==2){

divResultado.innerHTML = “Cargado”

if(ajax.readyState==3){

divResultado.innerHTML = “Interactivo”
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 48

if (ajax.readyState==4) {

divResultado.innerHTML = “Completado”

divResultado.innerHTML = ajax.responseText

ajax.send(null)

El resultado que se obtiene es satisfactorio, es posible cargar imágenes que

perfectamente pueden ser GIFs animados y mostrar así los diferentes estados
de carga y error, aumentando la interactividad y enriqueciendo la esperiencia
del usuario.

3.6 Escribir Clases en JavaScript

En la era de la Web 2.0 existen componentes que juegan un papel esencial,

ellos son AJAX, DHTML y JavaScript. Las aplicaciones Web de hoy en día
tienden a hacer uso de los mismos para garantizar más interactividad y mejor
funcionalidad.

3.6.1 Clases VS Prototipos

Para comprender mejor los ejemplos anteriores es necesario hacer una compa-
ración entre Javascript y Java de tal forma que se puedan adoptar mediadas
para escribir correctamente el código.
Java es un lenguaje basado en clases, pero JavaScript es un lenguaje ba-
sado en prototipos. La tabla 3.2 de la página 49 resume dicha comparación.

En la figura se puede apreciar con mayor claridad las diferencias nombradas

anteriormente.
CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 49

Basado clases (Java) Basado prototipos (JavaScript)

Clases e instancias Todos los objetos son instancias.
son entidades diferentes.
Se crea una clase mediante Se definen y crean los objetos
la definición de clase con los constructores.
y se instancia con su constructor.
Se crea un nuevo objeto Igual
con el operador “new”.
Se construye una jerarquia de Se construye una jerarquia de objetos
objetos usando definiciones de asignando un objeto como el prototipo
clases para definir subclases. asociado a una función constructor.
Se heredan las propiedades Se heredan las propiedades usando
siguiendo una cadena de clases. una cadena de prototipos.
Una definición de clase describe La función constructora o
todas las propiedades de todas prototipo especifica el conjunto
las instancias de la clase, de propiedades inicial,
no se pueden añadir diná a unos pocos o
todos los objetos creados.

Tabla 3.2: Diferencias entre JavaScript y Java.

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 50

Jerarquía de Objetos Objetos Individuales

Empleado
function Empleado () {
Juan = new Empleado;
this.nombre = "";
this.departamento = "general";
Juan.especialidad es "ninguna"
}
Empleado.prototype.especialidad = " ninguna";

Trabajador
funct ion Trabajador () { Lucas = new Trabajador;
this.proyectos = [] ;
} Lucas.especialidad es "ninguna"
Trabajador.prototype = new Empleado;

Ingeniero
function Ingeniero () {
this.departamento = "ingenieria"; David = new Ingeniero;
this.ordenador = "";
} David.especialidad es "codigo"
Ingeniero.prototype = new Trabajador;
Ingeniero.prototype.especialidad = "codigo";

Figura 3.4: Ejemplo de uso de Prototipos.

3.6.2 Prototype vs Encerrar las Funciones

Es posible encerrar todo el código dentro del constructor, de forma que sólo se
haría referencia a una función declarada fuera que construye el objeto XML-
HttpRequest y que podría estar también dentro, de manera que el objeto se
auto-contendría.
Esta técnica parecería, desde el punto de vista de la proligidad en la cons-
trucción del código, ya que encerrar las funciones en el constructor es una
buena técnica para limpiar código, tiene un problema técnico. Encerrar las
funciones puede ser ineficiente desde el punto de vista del rendimiento y me-
moria, cada vez que haya una función encerrada en el constructor ésta se crea
para cada objeto, lo que no es un problema si se crean pocos objetos a la vez
en un computador.
El problema surgiría cuando terminales mas desfavorecidas como por ejem-
plo los diferentes terminales móviles que en un futuro podrían soportar el ob-
jeto XMLHttpRequest, por lo tanto conviene dejar la función contrutora como
está en el ejemplo antes mostrado.

3.6.3 Variables Públicas vs Variables Privadas

Los métodos utilizados en el ejemplo son todos públicos y la variable XMLHtt-

pRequest también, existe la posibilidad de declararlos como privados para que
el desarrollador final que utilice la clase no pueda tocarlos en el transcurso del
programa y por consiguiente estropear algo de manera que tuviera que crear
un nuevo objeto para cada petición (como en JavaScript no existe un public y
un private, se deberían poner esas variables y métodos en un lugar donde no
tuviera visibilidad el creador del objeto).
A cambio se pierde mucha funcionalidad ya que en ocasiones será necesario
reutilizarlo para facilitar la creación de algún programa o debido a que la me-
moria en terminales pequeños no es gratuita; por ello en principio las variables
y los métodos de los objetos creados serán públicos debido a las necesidades
de trabajo que pueden surgir con AJAX.
Capítulo 4

Herramientas de Depuración

4.1 Introducción

Ya que la esencia del presente trabajo es la utilización de JavaScript, el des-

arrollador debe adoptar técnicas que permitan realizar una buena codificación.
Dado que principalmente se trabajará con Javascript dentro de un entorno
Web, dicho entorno debe ser depurado, el presente capítulo describe las herra-
mientas necesarias para ello. Existen varias herramientas, pero no se tratarán
todas, las elegidas han sido escogidas por sus capacidades potenciales y su
condición de gratuitas, las mismas se integran al mismo programa, en este
caso al navegador Mozilla Firefox.

4.2 Instalación de las Herramientas

Para la instalación son necesarios los siguientes elementos:

• Paquete de instalación de Mozilla Firefox : se puede bajar de la página

principal de Mozilla Firefox cuya url es http://www.mozilla.com/firefox/
.
• Paquete xpi de Firefug : Firefox plugin (extensión que añade funcio-
nalidades), se puede bajar de la Web de plugins de Firefox que es
https://addons.mozilla.org/firefox .

52
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 53

Figura 4.1: Aspecto del Menú Herramientas luego de la Instalación.

Pasos de la Instalación:

• Ejecutar el instalador y seleccionar la opción de instalación personaliza-

da.

Una vez que instalado Mozilla Firefox se debe instalar el plugin:

• Descargar archivo del plugin.

• Ir a la barra de menus, archivo →Abrir archivo y seleccionar el archivo
descargado previamente, Firefox detectará que es una de sus extensiones
y permitirá su instalación.
• Reiniciar el navegador.
• Una vez instalado deberían aparecer las siguientes utilidades al iniciar
Mozilla Firefox en el menú Herramientas.

Las utilidades que deben aparecer como se puede observar en la figura 4.1
de la página 53 son las siguientes:
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 54

• Consola Javascript.

• DOM Inspector.

• Javascript Debugger (Venkman).

• FireBug.

4.3 La Consola JavaScript

Para mostrar el funcionamiento de la consola se usará el siguiente ejemplo:

• Archivo: depuracion1.html.

<html>

<head><title>depuración</title></head>

<script language=“JavaScript” type=“text/javascript”>

var nombre = “Juan” ;

function hagoAlgo()

longitud = nombre.length(); //Aquí hemos introducido un error.

alert(“La longitud del nombre es : ” + longitud);

</script>

<body>

PÁGINA PARA HACER PRUEBAS DE DEPURACIÓN SIMPLES

<br>

<a href=“javascript:hagoAlgo();”>Llamo Función hagoAlgo</a>

</body>
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 55

Figura 4.2: Resultado en la Consola de JavaScript.

</html>

Al cargar la página y hacer clic en el link que aparece en el ejemplo para

llamar a la función se obtendrá lo que se muestra en la figura 4.2 de la página
55.
La consola detecta el error en el código, provocado al intentar aplicar la
función length a un objeto del tipo String. Al hacer clic sobre el enlace que
aparece en la consola, la misma llevará a la línea dentro del código JavaScript
en donde se produjo el error, como se muestra en la figura 4.3 de la página 56.

Cuando la consola Javascript encuentra un error como el anterior, el pro-

grama no continúa.
Solución del error anterior: length no es una función sino una propiedad;
con quitar de la línea los paréntesis de la función “length()” y dejarlo en
“length” se solucionaría.
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 56

Figura 4.3: Código que produjo el Error.

4.4 Document Object Model Inspector (Inspector

del DOM)

Esta herramienta permite ver el árbol de objetos del documento con todos los
campos de cada etiqueta.
Cuando se realiza una inserción de código HTML en una página mediante el
objeto XMLHttpRequest, ese cambio no es apreciable y la consola no devuelve
ningún error. Esto se debe a que el código insertado puede ser correcto pero
no hace lo que debería, la solución es ver lo que realmente se ha insertado
mediante el Inspector del DOM . Esta utilidad busca el error dentro del código
insertado, esto se puede observar mediante el siguiente ejemplo:.

• Archivo: depuracion2.html

<html>

<head><title>depuración</title></head>

<script language=“JavaScript” type=“text/javascript”>

function insertoalgo()
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 57

zona = document.getElementById(‘zonaInsercion’) ;

//Aquí se ha introducido un error, en el alto y ancho.

zona.innerHTML = “<center><img src= \“hamsters.jpg\” idth=\“320\”

eight=\“240\” border=\“0\” alt=\“Hamsters\”/></center>” ;

</script>

<body>

PÁGINA PARA HACER PRUEBAS DE DEPURACIÓN SIMPLES

<br>

<span id=“zonaInsercion”>

<a href=“javascript:insertoalgo();”>Llamo Función insertoalgo</a>

</span>

</body>

</html>

A continuación se inserta directamente una imagen. Dado que se conoce

la ruta de su ubicación, no es necesario enviar información al servidor y por lo
tanto en este ejemplo no se utiliza AJAX, solo demuestra el funcionamiento
de la herramienta.
La imágen insertada posee una resolución de 1024x768 pixeles y se la in-
trodujo en un espacio de 320x240 pixeles, al abrir la página y hacer clic sobre
el enlace que aparece en la misma, la petición de lanza y se obtiene como
resultado lo que muestra la figura 4.4 de la página 58.
Como se puede apreciar, no existe ningún error en la consola Javascript y
la imagen se ha insertado con su tamaño original, sin respetar las medidas que
se pretendían, el error se encuentra en el código HTML. El DOM inspector
tiene la capacidad de detectar las propiedades insertadas en el código HTML
y, por lo tanto, verificar si se han insertado correctamente o no.
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 58

Figura 4.4: Resultado del Código depuracion2.html visto en Mozilla Firefox.

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 59

Figura 4.5: Ejemplo de Uso de la Utilidad DOM Inspector.

4.4.1 ¿Cómo Funciona?

Para depurar el código insertado es necesario abrir la ventana de la herramienta

DOM y luego desplegar las sucesivas ramas del árbol jerárquico que forman
las etiquetas HTML como muestra la figura 4.5 de la página 59 hasta llegar al
código correpondiente a la imagen.
Se insertado “border”, “alt”, “eight”, “idth” y “src”, como se observa en
la figura 4.5 los atributos “eight” y “idth” tienen los valores 240 y 320, pero
su sintáxis es incorrecta. Para solucionar este error solo es necesario corregir
la sintáxis.
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 60

4.5 Venkman(Depurador de Javascript)

Venkman es un depurador convencional, se utiliza para poner puntos de rup-

tura en el código, de forma que Mozilla Firefox detenga su ejecución y no
permita continuar hasta depurar el error. Al ubicar el cursor dentro de una
función, se puede apreciar cómo cambian los valores de las variables locales
sobre la marcha al ejecutar un “step by step”.
El ejemplo que se muestra a continuación, es una versión modificada de
depuracion1.html, algo más compleja y que parece no tener sentido.

• Archivo depurar.html

<html>

<head><title>depuracion</title></head>

<script language=“JavaScript” type=“text/javascript”>

function hagoAlgo()

var nombre = “Juan”;

hagoalgo2() ;

function hagoalgo2()

hagoalgoreal();

function hagoalgoreal()

longitud = nombre.length;

alert(“La longitud del nombre es : ”+ longitud);

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 61

</script>

<body>

PÁGINA PARA HACER PRUEBAS DE DEPURACIÓN SIMPLES

<br>

<a href=“javascript:hagoAlgo();”>Llamo Funcion hagoAlgo</a>

<a href=“javascript:hagoalgo2();”>Llamo Funcion hagoalgo2</a>

<a href=“javascript:hagoalgoreal();”>Llamo Funcion hagoalgoreal</a>

</body>

</html>

Luego de abrir la página de ejemplo se debe abrir la ventana de Venkman

(el depurador de Javascript), debería quedar como en la figura 4.6 de la página
62.

¿Cómo funciona?

Se deben seguir las siguientes instrucciones:

1. Desplegar el arbol de objetos ubicado a la izquierda hasta encontrar el

archivo depurar.html.

2. Una vez hallado el archivo, hacer doble clic para visualizar su código en
el editor a la derecha.

3. Introducir puntos de ruptura (breakpoint) donde aparecen lineas horizo-

nales en el código.

4. Debería quedar todo como muestra la figura 4.7 de la página 63.

1. Volver a la página ejemplo y pulsar sobre el primer enlace, el código se

ejecutará hasta llegar al primer punto de ruptura, en ese momento se
detendrá, como se muestra en la figura 4.8 de la página 64.
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 62

Figura 4.6: Pantalla de Inicio de Venkman.

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 63

Figura 4.7: Venkman con el Fichero depurar.html Cargado.

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 64

Figura 4.8: Venkman Detenido en el Punto de Ruptura.

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 65

Figura 4.9: Vista Watches de Vankman.

1. Luego pulsando el botón Continue de la barra de herramientas se puede

ir paso a paso de acuerdo a los puntos de ruptura indicados e ir solucio-
nando los problemas. Por ejemplo en la vista watches se podría añadir
una expresión como el valor de una variable local. La figuara 4.9 de la
página 65 visualiza la situación.

Lo demostrado mediante el ejemplo es básicamente lo que se puede hacer

con el depurador. Permite examinar el código paso por paso viendo el valor
de las variables.
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 66

Figura 4.10: Icono de Inicio de FireBug.

4.6 Firebug (Todo lo Anterior en Uno)

Este es tal vez el depurador más nuevo y potente que hay, proporciona toda
la información que ofrecen los otros programas pero de forma más rápida.
Firebug es una extensión de Firefox creada y diseñada especialmente para
desarrolladores y programadores Web. Es un paquete de utilidades con el
que se puede analizar (revisar velocidad de carga, estructura DOM ), editar,
monitorizar y depurar el código fuente, CSS, HTML y JavaScript de una
página Web de manera instantánea y on-line.
Para demostrar su funcionamiento básico se utilizará el archivo depu-
rar.html. Es necesario realizar los siguientes pasos:

• Abrir el archivo en el navegador Mozilla Firefox y pulsar sobre el icono

de la esquina inferior derecha como muestra la figura 4.10 de la página
66, de esta manera se inicia Firebug.
• Una vez abierto se pueden observar séis pestañas: Consola, HTML, CSS,
Script, DOM y Red como se visualiza en la figura de la página.
• Al pulsar en el primer enlace de la página del ejemplo FireBug empieza
a actuar mostrando el error en la consola como se puede observar en la
figura 4.12 de la página 68.

Firebug no es un simple inspector como DOM Inspector, además edita y

permite guardar los cambios, un paso por delante del conocido Web Developer.
Su atractiva e intuitiva interfaz, con solapas específicas para el análisis de
cada tipo de elemento (consola, HTML, CSS, Script, DOM y red), permite
al usuario un manejo fácil y rápido. Firebug está encapsulado en forma de
plug-in o complemento de Mozilla, es Open Source (aunque no Free Software)
y de distribución gratuita.
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 67

Figura 4.11: Pestañas o Solapas de FireBug.

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 68

Figura 4.12: Error Visualizado en la Consola de FireBug.

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 69

4.6.1 Funcionalidades de Firebug

FireBug permite editar y depurar código, además de monitorizar el sitio sobre

el que se trabaja. Sus funcionalidades son:

• Edición de HTML en tiempo real.

• Edición online de hojas de estilos.

• Monitorea el tiempo de carga de las páginas.

• Depurador de Javascript.

• Gestor de errores en Javascript, CSS y XML.

• Explorador del DOM.

Consola de Firebug

La consola de Firebug es la herramienta que necesita cualquier desarrollador

Web para hacer de su aplicación una aplicación de calidad, esto se debe a que
permite eliminar de la aplicación los molestos alert().
La consola de Firebug tiene 6 apartados:

• Console.

• HTML.

• CSS.

• Script.

• DOM.

• NET.
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 70

Console La consola es uno de sus puntos fuertes, muestra las peticiones

AJAX (GET o POST) que realiza la página, headers, variables enviadas y la
respuesta del servidor.
También muestra los errores Javascript que se producen en la página junto
a un enlace dónde se puede ver la línea de código errónea.
Por último dispone de una API muy interesante, Firebug añade una varia-
ble global llamada “console” a todas las Webs cargadas en Firefox, este objeto
contiene muchos métodos que permiten mostrar información en la consola de
un modo transparente y sin necesidad de recurrir a los “alert()”.

HTML

Mediante esta funcionalidad Firebug permite editar el html en tiempo real

y además ofrece muchas facilidades para ello, especialmente interesante es el
“Inspector de HTML” que permite detectar los elementos deseados únicamente
pasando el ratón por encima, una vez localizado el elemento se puede editar
en tiempo real.
Permite:

• Ver código fuente generado.

• Resaltar cambios.
• Editar HTML en tiempo real.
• Encontrar elementos con el ratón.
• Inspeccionar un elemento y recargarlo sin perderlo.
• Copiar el HTML.
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 71

CSS

En esta pestaña puede acceder fácilmente a la edición de estilos de la

página, es muy intuitivo y tremendamente útil ya que todos los cambios se
realizan en tiempo real.
A menudo los pequeños retoques de hojas de estilo se convierten en una
tarea nada agradable para el desarrollador ya que su comportamiento en cada
navegador es en numerosas ocasiones diferente, esta herramienta es ideal para
principiantes que necesitan de muchas pruebas para encontrar los errores en
su hoja de estilos, el famoso método de “Try & Error”. [6]
Permite:

• Previsualizar colores e imágenes.

• Inspeccionar la hoja de estilos.

• Editar estilos y ver los cambios en tiempo real.

• Ayuda en línea y corrector de errores tipográficos.

Script
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 72

Es un potente debugger de Javascript que permite manejar la ejecución

de los códigos javascript, y conseguir un buen aumento del rendimiento del
código.
Permite:

• Encuentrar cualquier Script fácilmente.

• Ejecutar paso a paso.

• Detectar errores y puntos de ruptura.

• Ver el valor de las variables en tiempo real.

• Saltar fácilmente a cualquier línea del código.

• Modo “Profile” que muestra un completo análisis de los tiempo de carga

y ejecución que ha provocado la navegación por la página.

DOM
CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 73

Firebug también ayuda a encontrar los objetos DOM de una manera rela-
tivamente sencilla y los edita al vuelo. El DOM es el “Modelo en Objetos para
la representación de Documentos” y por lo tanto se trata de la interfaz a través
de la cual los programas y scripts pueden acceder y modificar dinámicamente
el contenido, estructura y estilo de los documentos HTML.
Entre sus características y funciones se pueden nombrar:

• Resumen de objetos.

• Muestra el árbol DOM de la página.

• Edición en tiempo real.

• Navegación por el código Javascrip.

NET o Red

Esta herramienta permite comprobar dónde se pierde el tiempo de la carga

de la Web gracias a su línea de tiempo, entre sus características más destaca-
das está la diferenciación entre la carga de caché del servidor y la que no se
encuentra cacheada.
Entre sus características y funciones se pueden nombrar:

• Línea de tiempo.

• Filtros por tipos de archivos.

• Ver que datos se sirven en caché.

• Examinar las cabeceras.

• Monitorizar el XMLHttpRequest.
Capítulo 5

Técnicas Básicas de Petición

de Información

5.1 Introducción

Lo realmente interesante del objeto XMLHttpRequest es utilizarlo para traer a

la página los componentes que se utilizan en las páginas Web actuales, HTML,
Javascript, imágenes, entre otros, pero esto no es lo básico. La finalidad es
mejorar la librería para utilizar el objeto y tener una sencilla función que lo
haga todo.
Mientras que se trabaja con Javascript es muy fácil cometer algún error,
por lo que se han visto primero las herramientas de depuración.

5.2 Insertar Código HTML

Esto es lo más fácil, además ayudará a comprender algunas cosas de forma

muy sencilla. El siguiente ejemplo demuestra cómo insertar código HTML:

• Archivo: insertarHTML.html

<HTML>

75
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 76

<HEAD>

<META http-equiv=“Content-Style-Type” content=“text/css”>

<LINK href=“../theme/Master.css” rel=“stylesheet” type=“text/css”>

<SCRIPT language=“JavaScript” src=“../js/ScriptGeneral.js”></SCRIPT>

<TITLE>insertarHTML.html</TITLE>

</HEAD>

<BODY>

<CENTER>

<SPAN id=parteHTML>Aquí se insertará el código HTML<BR>

<INPUT type=“button” name=“tomar” value=“Tomar Página”

onclick=tomarHTML() >

<BR>

</SPAN>

</CENTER>

</BODY>

</HTML>

• Archivo pagina01.html: esta es la parte HTML que se insertará en la

página insertarHTML.html.

<P align=“center”><B>Imágen Insertada</B></P>

<P align=“center”><IMG border=“0” src=“../imagenes/encabezado.png”

width=“700” height=“125”></P>

• Archivo ScriptGeneral.js: posee el código JavaScript con todas las fun-

ciones vistas en los capítulos anteriores, es decir, las funciones que crean
el objeto XMLHttpRequest, etc., a continuación solo se transcribe el códi-
go correspondiente a la función tomarHTML().
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 77

...

function tomarHTML(){

resultado = document.getElementById(‘parteHTML’);

ajax=objetoAjax()

var url = ‘pagina01.html’;

ajax.open(‘GET’, url);

ajax.onreadystatechange=function() {

if (ajax.readyState==4) {

resultado.innerHTML = ajax.responseText

ajax.send(null)

...

En la figura 5.7 de la página 89 se puede apreciar la ventana correspon-

diente a la página que realiza el llamado a la función tomarHTML().
Luego de hacer clic en el botón “Tomar Página”, el evento se lanza y
se ejecuta la función tomarHTML(), esta crea el objeto XMLHttpRequest e
inserta el código html que se encuentra en el archivo pagina01.html en formato
de texto mediante “innerHTML”. El resultado muestra la inserción de una
imágen en la página principal, como se puede observar en la figura 5.8 de la
página 91.
Hasta ahora no se había mencionado a la etiqueta <span>, ésta define
una sección dentro del documento, en este caso la sección comienza antes del
botón y termina después de éste, además esa es la sección de código que se va
a sustituir, con lo que el botón desaparecerá de la página. Esto es muy útil,
ya que se puede definir la página como una tabla y esta en secciones.
También se puede observar que la página pagina01.html no posee cabe-
ceras, <html> ,<head>,<body>, etc.; esto se debe a que es insertada en la
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 78

Figura 5.1: Página que Realiza la Petición.

CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 79

Figura 5.2: Resultado de la Petición.

página principal, isertarHTML.html, y esta ya posee las mismas.

El navegador actúa de manera que el código nuevo formaba parte de “la
página original”, es decir que, si se inserta algo que contenga una dirección
(como una imagen), la misma debe ser relativa a la página original, no a la
que se ha cargado.

AJAX es una técnica que permite cargar en una misma página diferentes
elementos, bajo demanda. [4]

5.3 Insertar Imágenes Usando el DOM

Aunque se pueda insertar imágenes como HTML, también se puede crear la

etiqueta utilizando el API del DOM, pero algo mas curioso es lo siguiente,
debido a las necesidades de la aplicación se puede querer que, aunque no esté
la imagen o las imágenes cargadas, aparezca el hueco donde estarán en un
futuro, como en principio parece que no tiene utilidad se mostrará un ejemplo
práctico real de una aplicación Web AJAX.
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 80

Figura 5.3: Google Maps sin Terminar de Cargar Imágenes.

CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 81

La figura 5.3 de la página 5.3 muestra la ventana de Google Maps, mientras

se cargan las imágenes.

Como se puede observar en la barra de estado del navegador, dice “transfi-

riendo datos....”, mientras que estos datos que son las imágenes se transfieren,
tienen su espacio ya guardado, de esta forma no se desfigura la representación
del mapa. Por supuesto que la complejidad de google Maps no se halla en la
inserción de las imágenes.
En el siguiente ejemplo se mostrará cómo realizar esto..

• insertarImag.html

<HTML>

<HEAD>

<META http-equiv=“Content-Style-Type” content=“text/css”>

<LINK href=“../theme/Master.css” rel=“stylesheet” type=“text/css”>

<SCRIPT language=“JavaScript” src=“../js/ScriptGeneral.js”></SCRIPT>

<TITLE>insertarImag.html</TITLE>

</HEAD>

<BODY>

<CENTER>

<SPAN id=parteHTML>Caragar Imágen<BR>

<INPUT type=“button” name=“cargar” value=“Tomar Página”

onclick=“tomarIMG(‘direccionImag.txt’)” >

<br>

<img id=“Imagen01” width=“559” height=“193” /></center>

</SPAN>

</CENTER>

</BODY>
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 82

</HTML>

• Archivo direccionImag.txt

../imagenes/encabezado.png

• Función JavaScript

function tomarIMG(ubicacion){

resultado = document.getElementById(‘Imagen01’);

ajax=objetoAjax()

ajax.open(‘GET’, ubicacion);

ajax.onreadystatechange=function() {

if (ajax.readyState==4) {

resultado.src = ajax.responseText

ajax.send(null)

De este ejemplo se pueden destacar tres cosas:

1. La tag img del código html posee un id, es decir que no se ha utilizado
una etiqueta <spam> para sustituir un campo del código, y además se
le ha puesto a la imagen el tamaño que tendrá, pero no el campo src
donde se encuentra, de forma que en el cuadro que aparecerá vacío para
una imagen se puede insertar la imagen que se desee.

2. La dirección de la imagen se encuentra en un archivo txt, que también

podría estar en un fichero html, pero el contenido sería el mismo, las
extensiones dan igual, solo se está eligiendo un fichero de donde cargar
texto, se ha puesto así para que quede más claro.
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 83

3. ¿Cómo se le dice que se quiere cargar el campo src de una imagen?.

resultado.src

En los ejemplos anteriores en vez de “.src”, aparecía “.innerHTML”.

En conclusión, se accede mediante JavaScript, primero a document que es
la página original, se elige un elemento de la página con getElementById que
es la imagen a la que se le ha dado un id, y por ultimo se accede al campo .src
de la imagen01, que aunque no se ha escrito, existe, es nulo, pero existe, y se
le está diciendo que es “=” a la respuesta en formato texto, con lo cual se le
indica dónde se encuentra la imagen.

En los ejemplos anteriores se accedía al código HTML delimitado por la

etiqueta <spam>, es decir, se estaba sustituyendo dentro de la propiedad que
contiene el código HTML, por eso el texto se interpretaba como código.
Esta es la forma de cambiar campos del DOM dinámicamente cargando
su contenido mediante AJAX, en este caso, se ha utilizado para cargar el src
de una imagen contenida en un txt, si se hubiera insertado directamente sin
hacer una petición al servidor no sería AJAX. [4]
El uso del DOM tiene más posibilidades aunque su uso es muy tedioso para
programadores inexpertos, sin sumarle las incompatibilidades entre navegado-
res, una vez aprendido y con práctica será una herramienta muy potente.

5.4 Insertar Código JavaScript

Una cosa interesante, ya que puede ser necesaria a la hora de realizar ciertos
programas, es la posibilidad de evaluar código Javascript con la función eval();
lo bueno ahora, es que gracias a la técnica de programación AJAX, es posible
tomar ese código de un archivo preparado anteriormente o generado por el
servidor dinámicamente y devuelto.
Un ejemplo sencillo de llamar ejecutar código Javascript con AJAX sería:

• Archivo insertarJavascript.html

<HTML>
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 84

<HEAD>

<META http-equiv=“Content-Style-Type” content=“text/css”>

<LINK href=“../theme/Master.css” rel=“stylesheet” type=“text/css”>

<SCRIPT language=“JavaScript” src=“../js/ScriptGeneral.js”></SCRIPT>

<TITLE>insertarJavaScript.html</TITLE>

</HEAD>

<BODY>

<CENTER>

<INPUT type=“button” name=“llamar” value=“Llama a una Función”

onclick=“tomarJavaScript(‘direccionJavaScript.txt’)” >

</CENTER>

</BODY>

</HTML>

• Archivo direccionJavaScript.txt

alert(“Se ha llamado a una funcion JavaScript usando AJAX”);

• Función tomarJavaScript()

...

function tomarJavaScript(ubicacion){

ajax=objetoAjax()

ajax.open(‘GET’, ubicacion);

ajax.onreadystatechange=function() {

if (ajax.readyState==4) {

eval(ajax.responseText)
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 85

Figura 5.4: JavaScript Devuelto y Evaluado por AJAX.

ajax.send(null)

...

El resultado se ve en la figura 5.4 de la página 85.

Como se puede observar no es difícil y dado que se puede cargar y evaluar
código Javascript, también se pueden cargar más peticiones AJAX, desde una
petición AJAX, es decir, peticiones indirectas.

Un ejemplo de petición indirecta sería el siguiente:

• Archivo insercionesIndirectas.html

<HTML>
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 86

<HEAD>

<META http-equiv=“Content-Style-Type” content=“text/css”>

<LINK href=“../theme/Master.css” rel=“stylesheet” type=“text/css”>

<SCRIPT language=“JavaScript” src=“../js/ScriptGeneral.js”></SCRIPT>

<TITLE>inserciones Indirectas</TITLE>

</HEAD>

<BODY>

<CENTER>

<SPAN id=parteHTML>

<INPUT type=“button” name=“tomar” value=“Llama a una Función”

onclick=“tomarJavaScript(‘direccionJavaScript.txt’)” >

<br>

</SPAN>

</CENTER>

</BODY>

</HTML>

• Archivo CodigoJavascriptCargaInd01.txt

resultado = document.getElementById(‘parteHTML’);

ajax=objetoAjax()

var url = ‘pagina01.html’;

ajax.open(‘GET’, url);

ajax.onreadystatechange=function() {

if (ajax.readyState==4) {

resultado.innerHTML = ajax.responseText
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 87

ajax.send(null)

• Archivo pag01.html

<P align=“center”><B>HTML Insertado</B></P>

<P align=“center”><IMG border=“0” src=“../imagenes/encabezado.png”

width=“700” height=“125”></P>

Se ha llamado a la primera petición AJAX, que ha ejecutado un código

Javascript contenido dentro de un fichero de texto, este contenía una llamada
AJAX que cargaba un pedazo de código HTML dentro de un pedazo contenido
por una etiqueta <span>.
Se han analizado las posibilidades de utilización; por supuesto a la hora
de utilizarlo realmente se debe elegir la situación mas adecuada, las peticiones
indirectas son buenas para que una petición haga generar al servidor la segunda
petición de forma dinámica si se está buscando una información de la cual solo
el servidor conoce su ubicación.

El resultado se puede visualizar en la figura 5.5 de la página 5.5.

5.5 DOM API

El DOM esta íntimamente relacionado con JavaScript que aun por su nom-
bre, no es un lenguaje Orientado a Objetos como Java. Además carece de
características importantes como la herencia y se basa en prototipos.
Ya que el lenguaje interactúa con los objetos del navegador, cuando se
descarga una página HTML que contiene JavaScript, este código sigue estando
dentro de la página ya que el lenguaje actúa en la parte del cliente, en cambio
lenguajes como ASP, PHP o JSP generan lenguaje HTML desde el servidor
y el usuario no puede ver su código en la página que descargue.
En el DOM el objeto principal es el objeto window como se puede observar
en la figura 5.6 de la página 89:
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 88

Figura 5.5: Petición Indirecta con AJAX.

No es necesario implicar el objeto window en la llamada ya que está de

forma implícita, como se ve en el siguiente ejemplo.

<html>

<body>

El dominio de esta página web es:

<script type=“text/javascript”>

document.write(document.domain)

</script>

</body>

</html>

Se han remarcado las etiquetas HTML que nos dejan insertar código Ja-
vaScript dentro de una página HTML convencional, el código JavaScript debe
estar delimitado por estos tags de principio y fin, el resultado es el que se
muestra en la figura 5.7 de la página 89.
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 89

Figura 5.6: Jerarquía de Objetos del Navegador.

Figura 5.7: Ejemplo de Utilización del Objeto window.

CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 90

Internet Explorer extiende los objetos de navegador con algunos propios,

el usarlos significaría la pérdida de compatibilidad con otros navegadores y
obligaría a los usuarios a utilizar éste, además algunos estándares se tratan de
manera diferente dependiendo del navegador lo que obliga a crear código con
bifurcaciones que primero detecte el navegador y dependiendo de éste ejecute
un pedazo de programa u otro sin dar errores.

Es normal que los diferentes toolkits que hay para programar aplicaciones
Web orientadas a AJAX resuelvan estas incompatibilidades por el programa-
dor cuando no queda mas remedio en cambio en la mayoría de las ocasiones
es posible encontrar un camino estándar que exista en todos los navegadores.
El árbol de objetos del navegador es un árbol general que contiene tanto
métodos y propiedades del navegador como las creadas por el usuario, como
se puede observar con Firebug visualizado en la figura 5.8 de la página 91.
Dentro del DOM cada etiqueta tiene una propiedad llamada innerHTML,
en los ejemplos anteriores se ha visto cómo al cambiar el texto HTML cambia
la página, en cambio también se puede modificar el documento cambiando las
diferentes propiedades de cada nodo, esto es más complejo y laborioso pero
permite crear entornos realmente atractivos,es posible crear etiquetas, insertar
texto y modificar propiedades mediante JavaScript.

5.6 DOM API e innerHTML

La causa que hace que modificar el documento haciendo uso de innerHTML

sea más fácil que modificar el DOM es que mientras que innerHTML modifica
la estructura textual del documento, el DOM modifica la estructura lógica
que se encuentra a un nivel más bajo.

Para comprender el siguiente código se debe entender que el DOM de una

página Web es un árbol General, así pues un nodo puede tener muchos hijos,
si el nodo es sustituido directamente y no sus hijos, se habrá destrozado la
página, se debe tener cierto cuidado.
dom api.html
<html>

<head>
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 91

Figura 5.8: DOM de una página Web visto con Firebug.

CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 92

<title>Insertar con DOMAPI</title>

<script language=“JavaScript” src=“lib/ConstructorXMLHttpRequest.js”>

</script>

<script language=“JavaScript” src=“lib/ClasePeticionAjax.js”>

</script>

<script language=“JavaScript” type=“text/javascript”>

var PeticionAjax01 = new objetoAjax(); //Se define un nuevo objetoAjax.

PeticionAjax01.completado = objetoRequestCompletado01;

//Función completado del objetoAjax redefinida.

function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, res-

puestaXML)

var viejaParte = document.getElementById(‘ParteHTML’);

/*Se recoge el elemento que se va a cambiar como

normalmente./*

var nuevaParte = document.createTextNode(respuestaTexto);

/*Creamos un nuevo nodo de texto, con el texto de

respuesta.*/

if (viejaParte.childNodes[0]) //Vemos si el nodo tenía hijos.

viejaParte.replaceChild(nuevaParte, viejaParte.childNodes[0]);

/*Se cambia el nodo hijo del padre por lo nuevo */

else

{
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 93

viejaParte.appendChild(nuevaParte); //Se le añade un hijo nuevo sino tiene

</script>

</head>

<body>

<button onclick=“PeticionAjax01.coger(‘Texto.txt’)”>Toma el documento 01

</button>

<span id=“ParteHTML”>

—Aquí voy a insetar Texto—

</span>

</body>

</html>

Se ha señalado en azul claro el código necesario para utilizar el DOM

directamente, como se ve, es trabajar con las funciones de un árbol y se debe
recordar que no se está dando formato al texto, aunque ahora se podría usar
hojas de estilo CSS [5] como piden los documentos XHTML estrictos, la verdad
es que debido a lo estrictos que son se termina poniendo la extensión html
normal para que algún navegador no salte por cualquier error.
Ahora con InnerHTML:
innerhtml.html
<html>

<head>

<title>Insertar con DOMAPI</title>

<script language=“JavaScript” src=“lib/ConstructorXMLHttpRequest.js”>

</script>
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 94

<script language=“JavaScript” src=“lib/ClasePeticionAjax.js”></script>

<script language=”JavaScript” type=”text/javascript”>

var PeticionAjax01 = new objetoAjax(); //Se define un nuevo objetoAjax.

PeticionAjax01.completado = objetoRequestCompletado01;

//Función completado del objetoAjax redefinida.

function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, res-

puestaXML)

document.getElementById(‘ParteHTML’).innerHTML = respuestaTexto;

//inserción innerHTML típica

</script>

</head>

<body>

<button onclick=“PeticionAjax01.tomar(‘Texto.txt’)”>Toma el documento 01

</button>

<span id=“ParteHTML”>

—Aquí voy a insetar Texto—

</span>

</body>

</html>

texto.txt

Una línea de texto.

Como se ve después de esto y todos los ejemplos anteriores, mientras se
inserte algo como código html, la complejidad es la misma.
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 95

5.7 Encapsulación del Objeto XMLHttpRequest

Ya se ha visto algunas cosas que se pueden hacer con el objeto XMLHttpRe-

quest que no son pocas, si se le añade un programa en el lado del servidor que
dé la información, las posibilidades son muchísimas debido a que ya se sabe
cómo pedir código en formato de texto, imágenes y Javascript. Lo siguiente
será poder hacerlo con una línea de código y olvidarse de la programación a
bajo nivel. Es lo que se hará, se puede imaginar que se está a punto de leer un
montón de código;hay que tomarlo con calma, ejecutarlo y mirar como actúa,
ésta es la parte más fea de este tema.
Petición de código HTML o texto:
Como siempre, es mejor verlo con un ejemplo, se va a reutilizar archivos de
los ejemplos anteriores ya que se esta familiarizado con ellos y se comprenderá
más fácilmente.
insertarhtml.html

<html>

<head>

<title>Insertar HTML</title>

<script language=“JavaScript” src=“lib/ConstructorXMLHttpRequest.js”>

</script>

<script language=“JavaScript” src=“lib/ClasePeticionAjax.js”></script>

<script language=“JavaScript” src=“lib/ClasePeticionAjaxHtml.js”></script>

<script language=“JavaScript” type=“text/javascript”>

var PeticionAjaxHtml01 = new objetoAjaxHtml(“pag01.html”,“ParteHTML”);

/*Se pide una página y se informa en que campo colocarla. */

</script>

</head>

<body>
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 96

<center>—Aquí voy a insetar código html—</center>

<span id=“ParteHTML”>

<center>

<button onclick=“PeticionAjaxHtml01.cogerHtml()”>Toma una pag html

</button>

</center>

</span>

</body>

</html>

Y la clase que permite hacerlo es la siguiente.

ClasePeticionAjaxHtml.js

/* Objeto que crea el automáticamente el XMLHttpRequest, pide la información

que recoge como texto y la inserta en el sitio pedido. */

function objetoAjaxHtml(ruta,idDondeInsertar)

this.ruta = ruta; //Ruta que llega asta el archivo con su nombre y extensión

this.id = idDondeInsertar; //El campo donde insertar

function tomarHtml()

var idActual = this.id ; /*Dentro de las funciones el this. no funcionara, así que
se crea una variable con su contenido, como anteriormente.*/

this.completado = function(estado, estadoTexto, respuestaTexto, respuestaXML)

document.getElementById(idActual).innerHTML = respuestaTexto;
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 97

this.coger(this.ruta); /*Si alguien ha llamado a la función tomarHtml es porque

quiere lanzar la petición y despues se lanza la petición xmlhttprequest. */

//Esta nueva clase hereda como prototipo la ClasePeticionAjax

objetoAjaxHtml.prototype = new objetoAjax;

//Se definen las funciones nuevas pertenecientes al objeto Html en particular.

objetoAjaxHtml.prototype.tomarHtml = tomarHtml; //Se le añade la función

tomarHtml.

Con todo esto se tomaria la misma página del ejemplo del ratón y el re-
sultado sería el mismo que anteriormente, cabe destacar el uso de prototipos,
ésta clase es un objetoAjax especializado para el manejo de HTML.
Petición de la dirección de una imagen:

Anteriormente se há visto dos tipos de inserción con el innerHTML(tipo1)

y con el DOM (tipo2), la clase que haga esta tarea dejará hacer los dos tipos
de inserciones.
insertarImagen1.html
<html>

<head>

<title>Insertar Imagen</title>

<script language=“JavaScript” src=“lib/ConstructorXMLHttpRequest.js”>

</script>

<script language=“JavaScript” src=“lib/ClasePeticionAjax.js”></script>

<script language=“JavaScript” src=“lib/ClasePeticionAjaxImagen.js”></script>

<script language=“JavaScript” type=“text/javascript”>

//Se define un nuevo objetoAjaxImag de tipo 1 y las propiedades de la imagen

//De izquierda a derecha las propiedades son las siguientes

CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 98

//El archivo que devuelve la dirección de la imagen.

//Donde insertar la imagen una vez obtenida

//Tipo de inserción 1=InnerHtml 2=DOM

//Alto, Ancho, borde y alt

var PeticionAjaxImag01 = new objetoAjaxImagen(“direccion.txt”,“ParteHTML”,1,

“391”,“350”,“0”,“guerrero”);

</script>

</head>

<body>

<center>—Aquí voy a insetar código html—</center>

<span id=“ParteHTML”>

<center>

<button onclick=“PeticionAjaxImag01.tomarImagen()”>toma una imagen tipo

1</button>

</center>

</span>

</body>

</html>

En cambio si se vá a insertar directamente en el DOM, se supone que

las características de la imagen ya están en la página y solo se nesecita que
devuelva su dirección.
insertarImagen2.html
<html>

<head>

<title>Insertar Imagen</title>

<script language=“JavaScript” src=“lib/ConstructorXMLHttpRequest.js”>

CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 99

</script>

<script language=“JavaScript” src=“lib/ClasePeticionAjax.js”></script>

<script language=“JavaScript” src=“lib/ClasePeticionAjaxImagen.js”></script>

<script language=“JavaScript” type=“text/javascript”>

//Definimos un nuevo objetoAjaxImag de tipo 1 y las propiedades de la imagen

//De izquierda a derecha las propiedades son las siguientes

//El archivo que devuelve la dirección de la imagen.

//Donde insertar la imagen una vez obtenida

//Tipo de inserción 1=InnerHtml 2=DOM

var PeticionAjaxImag01 = new objetoAjaxImagen(“direccion.txt”,“ParteImag”,2);

</script>

</head>

<body>

<center>—Aquí voy a insetar código html—</center>

<span id=“ParteHTML”>

<center>

<button onclick=“PeticionAjaxImag01.tomarImagen()”>Toma una imagen tipo

2</button>

</center>

<center>

<img id=“ParteImag” height=“391” width=“350” />

<center>

</span>

</body>

</html>
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 100

direccion.txt

guerrero.jpg

La clase que permite operar de la forma anterior sería la siguiente.

ClasePeticionAjaxImagen.js

function objetoAjaxImagen(ruta,idDondeInsertar,tipoInsercion,alto,ancho,

borde,alter){

this.ruta = ruta; //Ruta que llega asta el archivo que contiene la dirección del a
imagen.

this.id = idDondeInsertar; //El campo donde insertar

this.tipoInsercion = tipoInsercion; //Tipo insección 1=InnerHtml 2=DOM

//Propiedades de la imagen

this.alto = alto;

this.ancho = ancho;

this.borde = borde;

this.alternativa = alter;

function tomarImagen()

/*Dentro de las funciones el this. no funcionara, así que se crea una variable
nueva con su contenido, como anteriormente.*/

var idActual = this.id ;

var tipoInsercionActual = this.tipoInsercion ;

var anchoActual = this.ancho ;

var altoActual = this.alto ;

var bordeActual = this.borde ;

CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 101

var alterActual = this.alter ;

this.completado =

function(estado, estadoTexto, respuestaTexto, respuestaXML)

var rutaImagen = respuestaTexto;

switch(tipoInsercionActual) //Se realiza la insección

case 1: /* Inserción Tipo 1, Se inserta código XHTML según sus especificaciones,

es decir, con las comillas para los atributos y el cierre al final.*/

document.getElementById(idActual).innerHTML = “<center><img src= \”“ +

rutaImagen + ”\“ width=\”“ + anchoActual + ”\“ height=\”“ + altoActual + ”\“
border=\”“ + bordeActual + ”\“ alt=\”“+ alterActual + ”\“ /></center>” ;

break;

case 2: //Insercion Tipo 2, Se inserta directamente en el DOM

document.getElementById(idActual).src = rutaImagen;

break;

this.tomar(this.ruta); /* se trae la ruta que contiene la dirección de la ima-

gen, ¡¡NO ES LA IMAGEN, SI SE SUPIERA DÓNDE ESTÁ PARA QUÉ SE
QUIERE AJAX!! (Para los que no se hayan enterado todavía, si se sabe dónde
está la imagen, se puede cambiar su src document.getElementById(idActual).src
= rutaImagen;

directamente en Javascript sin necesidad de invocar al servidor mediante

el objeto XMLHttpRequest) */
}

//Esta nueva clase hereda como prototipo la ClasePeticionAjax y la ex-

tiende.
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 102

objetoAjaxImagen.prototype = new objetoAjax;

//Funciones propias solo de esta clase.

objetoAjaxImagen.prototype.tomarImagen = tomarImagen; //La función

de tomar propia de las imágenes.

El resultado de lo anterior sería mostrar la imagen del ratón, no añade

nada nuevo, así que se la omite también.

5.8 Petición de Código Javascript y Lanzarlo

Esta es con diferencia la clase más sencilla, se ha dejado para el final para las
mentes cansadas.
LanzarJavascript.html

<html>

<head>

<title>Insertar Javascript</title>

<script language=“JavaScript” src=“lib/ConstructorXMLHttpRequest.js”>

</script>

<script language=“JavaScript” src=“lib/ClasePeticionAjax.js”></script>

<script language=“JavaScript” src=“lib/ClasePeticionAjaxJavascript.js”>

</script>

<script language=“JavaScript” type=“text/javascript”>

var PeticionAjaxjavascriptl01 = new objetoAjaxJavascript(“alertaejemplo.js”); /*

Se define un nuevo objetoAjaxJavascript */

</script>

</head>

<body>

<center>
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 103

<button onclick=“PeticionAjaxjavascriptl01.tomarJavascript()”>

Lanza código Javascript</button>

</center>

</body>

</html>

ClasePeticionAjaxJavascript.js

function objetoAjaxJavascript(ruta) //Solo se necesitá la ruta.

this.Ruta = ruta; //Ruta, que además se puede redefinir durante el programa.

function tomarJavascript()

this.completado = function(estado, estadoTexto, respuestaTexto, respuestaXML)

eval(respuestaTexto); //Se Lanza el código javascript.

this.tomar(this.Ruta); //Si alguien lanza la petición se hace lo mismo.

//Esta nueva clase hereda como prototipo la ClasePeticionAjax

objetoAjaxJavascript.prototype = new objetoAjax;

//Prototipos propios de la clase objetoAjaxJavascript

objetoAjaxJavascript.prototype.tomarJavascript = tomarJavascript; /*Se añade

la función de tomar al objeto. */

alertaejemplo.js

alert(”Has llamado a un codigo javascript usando AJAX.”);

CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 104

Figura 5.9: petición de información a una url inexistente

Con todo lo anterior ahora se puede aprovechar AJAX abstrayéndose de

tener que pensar en el objeto XMLHttpRequest lo que es un gran avance.

5.9 Manejo de Errores

Se puede preguntar un momento qué ocurre si se hace una petición de in-

formación a una url inexistente dentro de un servidor que sí existe, puedes
introducir una en tu navegador, el servidor te devolverá el código de error 404,
página no encontrada.
Tal y como está hecha ClasePeticionAjax.js ahora mismo, aunque la url
no existiese se entraría en estado 4 y ocurriría lo siguiente, figura5.9 de la
pagina104
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 105

Aunque una página no se encuentre la clase AJAX actual la trataría igual.

Como se vé en la pequeña ventana de la derecha se ha recibido un código
404 y el servidor ha devuelto la típica página de error, ¡se va a insertar la
página de error!, parece que no es muy grave, en verdad se va a enterar del
error perfectamente, pero quedaría más bonito que saliera una alarma dándo la
misma información y no ocurriera nada, además existen más códigos de error
menos típicos. Hasta ahora todo lo que se há hecho si funciona correctamente
devuelve el código 200, por lo que cualquier cosa que no sea 200 ahora mismo
se la toma como extraño.
Una pequeña detección de errores sería la siguiente (como el código es largo
se han puesto puntos suspensivos en las partes innecesarias):
function peticionAsíncrona(url) //Función asignada al método tomar del obje-
toAjax.

...

this.objetoRequest.onreadystatechange =

function()

switch(objetoActual.objetoRequest.readyState)

case 1: //Función que se llama cuando se está cargando.

objetoActual.cargando();

break;

case 2: //Función que se llama cuando se a cargado.

objetoActual.cargado();

break;

case 3: //Función que se llama cuando se está en interactivo.

objetoActual.interactivo();
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 106

break;

case 4:

/*Detección de errores, solo se fija en el codigo que llega

normalmente como bueno, como por ahora no es necesario elevar la

complejidad de la detección se la deja así. */

if(objetoActual.objetoRequest.status != 200)

alert(“Posible Error: ” + objetoActual.objetoRequest.status + “, Descripción: ”

+ objetoActual.objetoRequest.statusText);

//Por si se quiere hacer algo con el error

manejadorError(objetoActual.objetoRequest.status);

else //Si no hubo error, se deja al programa seguir su flujo normal.

/*Función que se llama cuando se completo la transmisión, se le envían 4

parámetros.*/

objetoActual.completado(objetoActual.objetoRequest.status,

objetoActual.objetoRequest.statusText,

objetoActual.objetoRequest.responseText,

objetoActual.objetoRequest.responseXML);

break;

}
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 107

this.objetoRequest.send(null); //Se inicia la transmisión de datos.

//Se declara los manejadores

function objetoRequestCargando() {}

...

La detección de errores está enmarcada en amarillo para que se vea más

claro, es un pequeño cambio pero uno que dará información sin necesidad de
estar utilizando un depurador, sin contar que es bastante más elegante detectar
un posible error que dejar ver lo que pasa y si encima se quiere tratarlo de
alguna manera, se puede hacer con un manejador que está por defecto en
blanco y se puede redefinir.

5.10 Dar Soporte al Usuario

Una de las cosas que se debe tener claro es que el usuario final, navegante,
cliente, etc. que se encuentre con la página Web o programa que use tecnología
AJAX pulsará sus botones y esperara que ocurra “algo”, y desesperará, por
ello estaría bien que viera algo mientras espera, un barra de carga, un mono
saltando, etc. depende de la naturaleza de la aplicación.
Se va a añadir a la librería, exactamente al objeto de pedir código HTML
una función que se llamará cuadroEstadoCarga, que no será obligatorio usarla
y que se podrá redefinir en el código de la página, por si no gusta el que se
hace por defecto, pero que si se quisiéra usar, funcionará sin que se tenga que
hacer nada más que decírselo, con los siguientes resultados: figura5.10de la
página108.
Se ha utilizado un texto un poco raro del que hay que dar crédito al creador
de la librería isiAJAX en unos foros, usó este texto para uno de sus ejemplos
de carga largos y se puede encontrar su trabajo en sourceforge, es un archivo
de texto de unos 20 Megas, si se está haciendo las pruebas en un servidor
instalado en una PC de casa es mejor que sea un archivo grande, si además es
un archivo de texto y el navegador se ve obligado a procesarlo puede ayudar a
que se vea el cuadrito de carga, si no, pasará como un flash y no se apreciará.
La página principal del ejemplo anterior es la misma que en los ejemplos
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 108

Figura 5.10: cuadroEstadoCarga

CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 109

anteriores con los siguientes cambios:

insertarHtml.html
<html>

<head>

<title>Insertar HTML</title>

<script language=“JavaScript” src=“lib/ConstructorXMLHttpRequest.js”>

</script>

<script language=“JavaScript” src=“lib/ClasePeticionAjax.js”></script>

<script language=“JavaScript” src=“lib/ClasePeticionAjaxHtml.js”></script>

<script language=“JavaScript” type=“text/javascript”>

var PeticionAjaxHtml01 = new objetoAjaxHtml(“largo.txt”,“ParteHTML”,

“PeticionAjaxHtml01”);

</script>

</head>

<body>

<center>—Aquí voy a insetar código html—</center>

<span id=“ParteHTML”>

<center>

<button onclick=“PeticionAjaxHtml01.tomarHtml()”>Toma una pag html>

</button>

</center>

</span>

</body>

</html>
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 110

Como se ve, se ha añadido un tercer componente a la llamada de la función,

es optativo y debe ser nombre de la variable para que, cuando se genera el
código HTML del cuadro cancelar que se ha visto en la imagen, se pueda
poner que la imagen del cuadro cancelar es un link al método abort del objeto
XMLHttpRequest de la variable.
Para mostrar el cuadro lo único que se hace es colocarlo en el lugar donde
irá el texto ya que se tiene su “id” y cuando llegue el texto la función de com-
pletado volverá a sustituir automáticamente el código que hay en InnerHtml.
Explicado lo anterior, el código de la clase AJAX tendría la siguiente
modificación:
ClasePeticionAjaxHtml.js
/* NombreVariable es el nombre de la variable que controla la cancelación,
no necesita ser la variable del objeto, de forma que un objetoAjax podría
cancelar a otro diferente. */
function objetoAjaxHtml(ruta,idDondeInsertar,nombreVariable)

this.ruta = ruta; //Ruta que llega hasta el archivo con su nombre y extensión.

this.id = idDondeInsertar; //El campo donde insertar.

this.nombreVariable = nombreVariable; //Nombre de esta variable para poner el

cuadro de carga.

function tomarHtml()

var idActual = this.id ; //Dentro de las funciones el this. no funcionara.

this.completado = function(estado, estadoTexto, respuestaTexto, respuestaXML)

document.getElementById(idActual).innerHTML = respuestaTexto;

}
CAPÍTULO 5. PETICIÓN DE INFORMACIÓN 111

if (this.nombreVariable) //Sin nombre no hay cuadro, lo muestra antes de empezar

la petición.

this.cuadroEstadoCarga(); /*Se saca un icono de carga que hipnotiza al usuario,

así tardará mas en desesperar. */

this.tomar(this.ruta); /* Si alguien ha llamado a la función tomarHtml se lanza

la petición xmlhttprequest. */

function cuadroEstadoCarga()

//Se muestra un cuadrito de carga en el lugar donde irá lo que se está

cargando.
document.getElementById(this.id).innerHTML =
“<center>” +

“<img src=\“lib/img/cargando.gif\” alt=\“load\” width=\“40\” height=\“40\”

/>” +

“<a href=\“javascript:” + this.nombreVariable +” .objetoRequest.abort();\“>”

+

“<img border=\“0\” src=\“lib/img/cancelar.jpg\” alt=\“cancel\” width=\“86\”

height=\“40\”>” +

“</a>” +

“</center>”

//Esta nueva clase hereda como prototipo la ClasePeticionAjax

objetoAjaxHtml.prototype = new objetoAjax;
//Se definen las funciones nuevas pertenecientes al objeto Html en par-
ticular.
 objetoAjaxHtml.prototype.tomarHtml = tomarHtml; //Se le añade la fun-
ción tomarHtml.

objetoAjaxHtml.prototype.cuadroEstadoCarga = cuadroEstadoCarga; /*
El cuadro que indica el estado de la carga. */
Se ha señalado el código nuevo referente al cuadro de carga, el cuadro
aparece por defecto centrado para dar un mejor aspecto como se ve en el
código HTML generado, no es más que un par de imágenes y un link con
muchas barras invertidas para quitarle a las comillas su sentido de carácter
especial.
Igualmente que se haya hecho esto aquí se podría añadir a la petición de
las imágenes de Tipo 1 pero, como no añade nada nuevo, no se explicará ya
que se hará exactamente lo mismo; se lo añadiría antes de que apareciera la
imagen y luego ésta lo sustituiría.
Capítulo 6

Ejemplos Reales de Uso Para

AJAX

6.1 Introducción

En este capítulo se tratará un par de funciones del objeto XmlHttpRequest,

y la solución del problema de los caracteres especiales en Internet, como los
acentos, para que a la hora de transferir información se pueda hacer respetando
la lengua de origen, luego se verán una serie de ejemplos típicos del uso que
se le da normalmente a AJAX [4] en la Web.
Otro aspecto interesante que se tratará en este capítulo es el estándar xhtml
estricto marcado por consorcio World Wide Web, creado con una extensión
para Mozilla Firefox llamada tidy, pero usado luego como documentos html
normales para evitar ciertos problemas.

6.2 La Web Actual

Antes de empezar a describir las últimas características del objeto XMLHtt-

pRequest y ver los ejemplos de uso útiles se verá un primer ejemplo que se
podría hacer haciendo uso de lo visto hasta el momento. La figura 6.1 de la
página 114 muestra el esquema típico de una página Web actual.
Las páginas Web actuales, en su mayoría siguen un modelo, en la figura

113
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 114

Figura 6.1: Esquema de una página Web Actual.

6.1 se han delimitado ciertas zonas, esta página tiene todas las zonas típicas
que se pueden encontrar en un portal Web; aunque puede variar su posición
y su aspecto gráfico, el funcionamiento es igual, generalmente poseen un títu-
lo(zona 5 de la figura 6.1) y un menú(zona 4 de la figura 6.1), estos rara vez
desaparecerán de la página, en cambio el cuerpo de la página(zona 1 del a
figura 6.1), cambiará dependiendo de la sección. Lo ideal sería que cuando
cambie de sección solo varíe la zona 1, esto se puede lograr usando AJAX, an-
teriormente se utilizaban Frames, ahora la solución con AJAX es más elegante
y más dinámico.
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 115

6.3 Métodos GET, POST y Caracteres Especiales

en Internet

Se verán primero los métodos de forma teórica, seguido se solventará el pro-

blema de los caracteres especiales y se juntará todo en un ejemplo.

6.3.1 Introducción a los Métodos GET y POST

Existen dos métodos de envío de información mediante formularios que se

tratarán a continuación.

Método GET

El método get envía información al servidor como parte de la URL. El servidor

analizará la URL pedida por el agente de usuario y separará la información
relevante para su posterior procesamiento.
Ejemplo:http://localhost:8080/RAC/VerBateria?
codigo=15&usuario=lino&clave=lino
El inconveniente que posee es que este método guarda junto con la direc-
ción, las variables y su valor.
Por esto, lo primero que se debe hacer es cambiar el uso del método GET
al POST que se verá seguidamente. [8]

Método POST

• Cadena de petición:

http://localhost:8080/RAC/VerBateria

• Cadena de valores de la petición:

codigo=15&usuario=lino&clave=lino
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 116

Todo queda mucho más separado y limpio, además se evita que quede en
los historiales.

6.3.2 Caracteres Especiales

Este problema surge debido a las diferentes codificaciones que hay para los
caracteres en texto plano, si la página corre de forma local no hay problema
pero si es un servidor quien está generando información y utiliza otra co-
dificación es casi seguro que los acentos se van a estropear por el camino y
cuando se muestren al final serán unos signos de interrogación algo pintorescos
y extraños.
Para resolver este problema se deben hacer dos cosas, la primera es guardar
las páginas Web que se escriban en formato de texto UTF-8 que contiene todos
los símbolos, una vez terminada la página Web se debe guardar en formato
UTF-8 de la siguiente manera:

• Abrir el archivo html como si de un texto normal se tratase con el bloc

de notas “en Windows” e ir al menú archivo->Guardar como, como se
muestra en la figura 6.2 de la página 117.

Como guardar en formato UTF-8 con el bloc de notas de Windows

La segunda parte importante es añadir al archivo jsp o al servlet las si-
guientes líneas:

• <%@ page contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-

8” %>

• request.setCharacterEncoding(“UTF-8”);

6.3.3 Cambios en la Librería Para Que Acepte los 2 Métodos

Anteriormente se utilizaba siempre el método GET , ahora con especificar cuál

usar al crear el objeto y seleccionar más tarde el método con una estructura
de selección simple será suficiente, se remarcará lo interesante en el código y
se omitirá lo que no sea necesario.
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 117

Figura 6.2: Guardar en Formato URF-8.

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 118

function objetoAjax(metodo)

this.metodo = metodo;

function peticionAsincrona(url,valores) //Función asignada al método tomar del

objetoAjax.

// El parámetro valores sólo se usa en el caso POST

/*Se copia el objeto actual, si se usa this dentro de la función que se asígna

a onreadystatechange, no funcionara.*/

var objetoActual = this;

this.objetoRequest.open(this.metodo, url, true); //Se prepara la conexión.

if (this.metodo == ”GET”)

this.objetoRequest.send(null); //Se inicia la transmisión de datos.

else if(this.metodo == “POST”)

this.objetoRequest.setRequestHeader(‘Content-Type’,

‘application/x-www-form-urlencoded’);

this.objetoRequest.send(valores);

Cuando se lance la petición si se utiliza el método POST se deben dar los

valores en una cadena aparte, esto será suficiente para su buen comportamien-
to. La figura 6.3 de la página 119 muestra un ejemplo del uso de los métodos
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 119

Figura 6.3: Ejemplo de los Métodos GET y POST.

GET y POST.

6.3.4 Ejemplo de Uso de los Métodos GET y POST

A la hora de escribir código en el lado del servidor no cambia nada el utilizar

los métodos GET o POST como se ve en el código siguiente que no tiene nada
especial para tratar la petición dependiendo del método usado:
Ejemplo: servidorRespuestas.jsp
<!— Para resolver los problemas con los acentos y las ñ se debe añadir la siguiente
directiva y guardar el archivo con codificación UTF-8 utilizando el bloc de notas
mediante la opción Guardar Como.->

<%@ page contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”

%>

<%
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 120

request.setCharacterEncoding(“UTF-8”); //Para resolver problemas con los acen-

tos

String TimeStamp;

TimeStamp = request.getParameter( “TimeStamp” );

String Nombre;

Nombre=request.getParameter( “Nombre” );

String Apellidos;

Apellidos=request.getParameter( “Apellidos” );

String Cumple;

Cumple=request.getParameter( “Cumple” );

//Se devuelve una respuesta al usuario

out.print(“Hola ” + Nombre + + Apellidos + “ tu cumpleaños es el :” + Cumple);

%>

Sobre la parte HTML del ejemplo, lo más interesante es la diferencia a la

hora de usar un método u otro ya que el método POST envía los valores en
una cadena aparte de la url.
Ejemplo: Peticion.html(solo parte del archivo)

function datosCuestionarioEnCadena() //Esta función construye una cadena con

los 3 datos

//Se toman los datos de cada campo y se los introduce en una variable cada uno

var Nombre = document.getElementById( “Nombre” ).value;

var Apellidos = document.getElementById( “Apellidos” ).value;

var Cumple = document.getElementById( “Cumple” ).value;

//Se construye una cadena con ellos con el formato estándar de enviar información

var cadenaPeticionCuestionario = “Nombre=” + Nombre + “&Apellidos=” +

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 121

Apellidos + “&Cumple=” + Cumple;

return cadenaPeticionCuestionario; // Se devuelve la cadena que se usará en otras

funciones

function peticionUsandoGET()

darInfo01= new objetoAjax(“GET”); //Se construye un objetoAjax que utilizará

el método GET

/*Cuando se usa el método GET la página a la que se envían los datos y los datos
van unidos en

la misma cadena */

var cadenaPeticionGET = “servidorRespuestas.jsp?”; //La página.

cadenaPeticionGET = cadenaPeticionGET + datosCuestionarioEnCadena() +

“&TimeStamp=” + new Date().getTime();

//Se une la página con el resto de los datos.

darInfo01.completado = objetoRequestCompletado01;

darInfo01.tomar(cadenaPeticionGET); //Se envía tanto la página como los datos

en la misma cadena.

function peticionUsandoPOST()

darInfo01= new objetoAjax( “POST” ); //Se construye un objetoAjax que utili-

zará el método POST

//Cuando se utiliza el método POST la página a la que se envían los datos y los
datos van en cadenas diferentes.

//Cadena de los datos

var datosPOST = datosCuestionarioEnCadena() + “&TimeStamp=” + new Da-

te().getTime();
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 122

darInfo01.completado = objetoRequestCompletado01;

//Se envían la página y los datos en cadenas diferentes.

darInfo01.tomar( “servidorRespuestas.jsp” , datosPOST);

6.4 Auto Verificación y Rendimiento en AJAX

Consiste básicamente en que ciertas acciones, como por ejemplo verificar si

una página Web existe o un usuario existe, se realicen sin necesidad de que el
usuario tenga que pulsar ningún botón. Estas acciones se realizan automáti-
camente cuando fueran útiles, evitando muchas veces cargar una página de
error, el ejemplo que se muestra a continuación trata una hipotética creación
de usuario. Este ejemplo intenta resolver de forma más elegante la sobrecarga
al servidor, evitando la necesidad de generar una página nueva de error, con
la consecuente pérdida de tiempo.
El ejemplo siguiente consta de 3 archivos, uno .html que tiene tanto código
Javascript como HTML y dos archivos .jsp, el único archivo que no es pequeño
es el html que se dividirá en dos partes para mostrarlo en este texto.

• Código 1: autoVerificar.html (Parte HTML)

<body onload=“desconectaBoton(1)”>

<h1>EJEMPLO DE VERIFICACION DE USUARIOS USANDO AJAX</h1>

<br />

Se tiene una hipotética base de datos (simulada) solo con dos usuarios, JuanMa
y Sergio.

<br />

Se quiere crear un nuevo usuario.

<br />

El sistema comprobará mientras que escribes si tu nombre de usuario esta ya en

la base de datos o no.
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 123

El nombre debe ser de al menos 4 caracteres de largo.

<br />

<form action=“insertar.jsp” method=“get”>

<table border=“0”>

<tr>

<!—Si se usa el atributo id, la variable idUsuario no se enviara a la pagina inser-

tar.jps y si se usa name no se hará referencia al objeto dentro de esta página, solución,
usar los 2 —>

<td>

<input type=“text” id=“idUsuario” name=“idUsuario” size=“20”>

onkeyup=“validarUsuario()” />

</td>

<td>

<span id=“mensajeValidacion”>

</span>

</td>

</tr>

</table>

<input type=“Submit” id=“botonAceptacion” value=“Crear Cuenta” />

</form>

</body>

Como se puede observar es un formulario muy sencillo, al terminar de

cargar la página se lanza una función, esta función desconectará el botón ya
que éste se activará y desactivará dependiendo de si el usuario introducido es
válido o no, el aspecto del ejemplo es el mostrado en la figura 6.4 de la página
124.
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 124

Figura 6.4: Ejemplo de Verificación de Usuarios Usando AJAX.

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 125

• Código 2: autoVerificar.html (Parte Javascript)

<script language=“JavaScript” type=“text/javascript”>

var PeticionAjax01 = new objetoAjax(“GET”); //Se define un nuevo objetoAjax.

PeticionAjax01.completado = objetoRequestCompletado01; //Función completa-

do del objetoAjax redefinida.

function validarUsuario()

if (!posibleUsuario) //Crea una variable con el nombre del Posible nuevo usuario

var posibleUsuario = document.getElementById(“idUsuario”);

// Envía el nombre a la url de verificación si este es de al menos 4 caracteres de

largo.

if (escape(posibleUsuario.value.length) > 3)

var url = “validarUsuario.jsp?id=” + escape(posibleUsuario.value);

PeticionAjax01.tomar(url);

else

desconectaBoton(1); //Se desactiva el botón si el nombre es muy corto.

document.getElementById(‘mensajeValidacion’).innerHTML = “Nombre muy cor-

to.”; //Si había texto se lo borra

}
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 126

function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, res-

puestaXML)

//La pagina jsp devolverá true si el nombre se puede usar y false si ya está usando
por otro usuario.

if(respuestaTexto == “true”)

document.getElementById(‘mensajeValidacion’).innerHTML

= “<div style=\“color:green\”>Nombre usuario libre.</ div>”;

desconectaBoton(0); //Si se puede usar se mantendrá el botón activado

else

document.getElementById(‘mensajeValidacion’).innerHTML

= “<div style=\“color:red\”>Nombre de usuario ya utilizado.</ div>”;

desconectaBoton(1); //Si no se puede usar se desactivará el botón.

function desconectaBoton(opcion)

var boton = document.getElementById(“botonAceptacion”);

boton.disabled = opcion;

</script>

La función validarUsuario() envía el nombre al archivo validarUsuario.jsp

que reside en el servidor, si éste es de al menos de cuatro caracteres, el servidor
sólo puede contestar true (el nombre se puede usar) o false (nombre ocupado).
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 127

Figura 6.5: Ejemplos de Verificación: Estados Posibles.

Dependiendo de la respuesta que se recibe en la función objetoRequestComple-

tado01() se deja el botón activo o se desactivo, de esta manera al usuario no le
llegará la típica página diciendo que su nick de registro está ya utilizado, cada
vez que intenta registrarse y se evita con ello perder el contexto y los datos de
la página.
Con lo anterior explicado los estados posibles en los que puede estar la
página son los mostrados en la figura 6.5 de la página 127:
Aunque no añade mucho al ejemplo se muestran a continuación los archivos
jsp ya que pueden aclarar de dónde se saca el valor de respuesta y cómo se ha
simulado el mirar en una base de datos.

• Código 3: validarUsuario.jsp

<% String usuario;

usuario=request.getParameter(“id”);
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 128

//Se tiene una hipotetica base de datos solo con JuanMa y Sergio, se la simula
de esta manera.

if ( (usuario.equals(“JuanMa”)) || (usuario.equals(“Sergio”)))

out.print(“false”);

else

out.print(“true”);

%>

insertar.jsp

<html>

<head><title></title></head>

<body>

<!—Se simula la inserción del usuario en la base datos, pero no es real, no se inserta
nada. —>

Usuario insertado: <%= request.getParameter(“idUsuario”) %> <br />

<a href=“index.html”>Vuelve a la página principal</a>.

</body>

</html>

6.5 Refrescar la Pantalla Automáticamente

Este ejemplo mostrará una función de Javascript que puede tener una impor-
tancia crítica en el desarrollo de ciertos programas con necesidades de tiempo
y muchas veces concurrentes.
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 129

Figura 6.6: Refresco automático de página

El ejemplo del uso de la función setTimeout es bastante sencillo pero siem-

pre es mejor ver el resultado antes para comprender mejor qué hace el código;
básicamente se va a refrescar la pantalla automáticamente mostrando un men-
saje que irá cambiando a otro dinámicamente, éstos están almacenados en el
servidor.
Figura6.6 de la pagina129 Ejemplo de refresco automático haciendo uso
función setTimeout y AJAX.
El ejemplo tiene dos elementos que se deben destacar ya, el primero y más
notable es que los cambios en la página se hacen sin permiso del usuario, él
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 130

no dispara la acción.
El segundo es que los mensajes son enviados por el servidor en el ejemplo,
son algo que genera el servidor y que podría crearse de forma dinámica si
hiciera falta cualquier tipo de información que necesita refresco.

El ejemplo consta solo de 2 archivos, bastante pequeños, se sigue haciendo

uso de la misma librería AJAX creada anteriormente.

• Código 1: autoRefrescar.html

<html>

<head>

<title>Refrescar automaticamente la página</title>

<script language=“JavaScript” type=“text/javascript”

src=“lib/ConstructorXMLHttpRequest.js”></script>

<script language=“JavaScript” type=“text/javascript”

src=“lib/ClasePeticionAjax.js”></script>

<script language=“JavaScript” type=“text/javascript”>

var tiempo = 0;

function refrescarAuto()

tiempo++;

document.getElementById(“tiempo”).innerHTML =“El contador de tiempo es :”

+ tiempo;

if((tiempo%2) == 0) //En los números pares (cada 2 segundos), se hace la peti-

ción.

peticionFrase();

}
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 131

setTimeout(“refrescarAuto()”, 1000); //Se incrementá la cuenta cada segundo

function peticionFrase()

peticion01= new objetoAjax(“GET”); //se construye un objetoAjax que utilizará

el método GET

peticion01.completado = function objetoRequestCompletado01(estado, estado-

Texto, respuestaTexto, respuestaXML)

document.getElementById(“respuesta”).innerHTML = respuestaTexto;

url = “cuentameAlgo.jsp?tiempo=” + tiempo;

peticion01.tomar(url);

</script>

</head>

<body>

<h1>Refrescar automáticamente la página.</h1>

<table border=“1”>

<tr>

<td><span id=“tiempo”></span></td>

<td><span id=“respuesta”></span></td>

</tr>

</table>

<script language=“JavaScript” type=“text/javascript”>

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 132

refrescarAuto();

</script>

</body>

</html>

• Código 2: cuentameAlgo.jsp

<%@ page contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>

<%

//Para resolver problemas con los acentos a la hora de tomar la información.

request.setCharacterEncoding(“UTF-8”);

int tiempo = 0;

tiempo = Integer.parseInt( request.getParameter(“tiempo”));

switch(tiempo)

case 2: out.print(“Este pequeño ejemplo”);

break;

case 4: out.print(“te puede ser útil”);

break;

case 6: out.print(“.”);

break;

case 8: out.print(“...”);

break;

case 10: out.print(“....................”);

break;

default: out.print(“¿Todavía sigues esperando? Ya terminó por si no te has dado

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 133

cuenta.”);

%>

Como se puede apreciar el código es bastante sencillo, se hace una petición

cada 2 segundos y se inserta el texto enviado por el servidor en el cuadro del
cliente, las peticiones al servidor se hacen solo en los números pares con lo cual
un número impar nunca llegará al default de la estructura caso del servidor.
Por último comentar que antes de AJAX se podía simular algo parecido
teniendo una página .jsp que recibe la información de su construcción di-
námicamente cada vez que se llama con lo que puede cambiar, como existe la
posibilidad de hacer que la página completa se recargue cada cierto tiempo és-
ta se actualizaba, pero recargando la página entera haciendo que el servidor la
genere de nuevo, ahora gracias a AJAX se obtiene mayor potencia utilizando
menos recursos. [4]

6.6 Una Base de Datos Creada con el DOM y Guar-

dada con AJAX

El siguiente ejemplo muestra como generar dinámicamente una tabla con in-
formación dada por el usuario con la siguiente interfaz, vista en la figura 6.7
de la página 134.
Esto no tiene nada que ver con AJAX, es solo una muestra de que se
puede ir generando los elementos necesarios dinámicamente, esto es un gran
avance ya que gracias a ello se pueden realizar programas con un aspecto
visual agradable rápidamente si se programan en una Web. Pero es necesario
guardar la información que se genera para que tenga sentido. Llegado este
momento se puede elegir archivo o base de datos, en este caso se elige archivo,
se envían los datos a una página jsp que creará el archivo, de forma que la
cosa gráficamente quedaría como se ve en la figura 6.8 de la página 135.

El ejemplo muestra cómo generar la tabla haciendo uso del DOM por lo
cual se complica un poco, pero en cambio al guardar en un archivo y rescatar
la información haciendo uso de la propiedad “innerHTML” lo que simplifica el
problema. En otras palabras, el archivo almacena la información directamente
en HTML.
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 134

Figura 6.7: Tabla Generada Dinámicamente Haciendo uso del DOM.

6.7 Crear una Tabla Dinámicamente

Se mostrará cómo alcanzar el resultado de la figura 6.8 que es generar la tabla

utilizando el DOM, el ejemplo consta de un archivo que contiene tanto el
código HTML como Javascript.
El archivo está comentado y es suficientemente auto-explicativo pero algo
largo por lo cual se ha decidido partir en tres partes: dos partes Javascript
cada una con una función y una parte html.

• Primera parte: baseDatosB.html (Javascript)

var identificadorUnico = 0;

function nuevoDisco() //Añadimos un disco a la tabla.

//1.Se recoge los valores de entrada.

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 135

Figura 6.8: Interfaz Simple Para Guardar y Cargar de un Archivo.

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 136

var autor = document.getElementById(“autor”).value;

var titulo = document.getElementById(“titulo”).value;

var estilo = document.getElementById(“estilo”).value;

//2.Se cerciora de que tengan sentido.

if(autor == “” || titulo == “” || estilo == “”)

return;

else

//3.Se limpian las entradas.

document.getElementById(“autor”).value = “”;

document.getElementById(“titulo”).value = “”;

document.getElementById(“estilo”).value = “”;

//4.Se crea una nueva fila para la tabla, usando el DOM y se le añade las celdas

var fila = document.createElement(“tr”);

fila.setAttribute(“id”,identificadorUnico); //Se le dá un identificador único para

poder reconocerla.

var celda1 = document.createElement(“td”);

celda1.appendChild(document.createTextNode(identificadorUnico));

fila.appendChild(celda1);

var celda2 = document.createElement(“td”);

celda2.appendChild(document.createTextNode(autor));

fila.appendChild(celda2);

var celda3 = document.createElement(“td”);

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 137

celda3.appendChild(document.createTextNode(titulo));

fila.appendChild(celda3);

var celda4 = document.createElement(“td”);

celda4.appendChild(document.createTextNode(estilo));

fila.appendChild(celda4);

//5.Se crea un botón para asignárselo a la fila

var botonborrar = document.createElement(“input”);

botonborrar.setAttribute(“type”, “button”);

botonborrar.setAttribute(“value”, “Borrar Elemento”);

/*Hay al menos 3 maneras de hacer lo siguiente, yo lo voy a guardar como formato

texto, así se puede guardar el código html después en formato texto y que la referencia
al id se guarde, sino se perderá */

botonborrar.setAttribute(“onclick”, “borrarDisco(“ + identificadorUnico + ”)”);

//6.Se introduce el botón dentro de una celda y se lo añade a la fila

var celda5 = document.createElement(“td”);

celda5.appendChild(botonborrar);

fila.appendChild(celda5);

//7.Se aumenta el valor del contador de los identificadores únicos.

identificadorUnico++;

//8.Se actualiza la tabla

document.getElementById(“tablaDiscos”).appendChild(fila);

baseDatosB.html(Parte 2 Javascript)

function borrarDisco(BorrarIdentificadorUnico) //Se borra un disco de la tabla

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 138

var borrarFila = document.getElementById(BorrarIdentificadorUnico);

var tablaDiscos = document.getElementById(“tablaDiscos”);

tablaDiscos.removeChild(borrarFila);

baseDatosB.html(Parte 3 HTML)

<body>

<h1>Base de datos de Discos</h1>

<h2>Añadir datos:</h2>

<form action=“#”>

<table width=“80%” border=“0”>

<tr>

<td>Autor: <input type=“text” id=“autor”/></td>

<td>Título: <input type=“text” id=“titulo”/></td>

<td>Estilo: <input type=“text” id=“estilo”/></td>

<td colspan=“3” align=“center”>

<input type=“button” value=“Añadir” onclick=“nuevoDisco()” />

</td>

</tr>

</table>

</form>

<h2>Tabla de Discos:</h2>

<table border=“1” width=“80%”>

<tbody id=“tablaDiscos”>
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 139

<tr>

<th>Id</th>

<th>Autor</th>

<th>Título</th>

<th>Estilo</th>

<th>Operaciones</th>

</tr>

</tbody>

</table>

</body>

El funcionamiento es simple, se tiene una función que añade filas y otra

que las borra, éstas se llaman debido a los eventos disparados por los botones
de añadir y borrar, lo siguiente sería no perder la información al salir del
navegador.

6.8 Auto-Completado Empleando AJAX

Para explicarlo rápidamente lo mejor es ver el resultado primero, mostrado en

la figura 6.9 de la página 140.

Como se puede observar en la figura 6.9, no existe un botón de aceptar

la selección, se debe elegir entre las opciones disponibles y entonces se lanza-
ría la petición, aunque en una hipotética búsqueda en una base de datos se
está ahorrando tiempo, en cambio cada vez que es pulsada una tecla se está
lanzando una petición al servidor con toda la sobrecarga que ello supone.

Esto mismo se puede ver en la aplicación de Google; el Google Suggest

mostrado en la figura 6.10 de la página 141.
El ejemplo siguiente posee dos archivos sin contar las librerías AJAX, “au-
toCompletar.html” y “pedirInfo.jsp”, el archivo html contiene tres partes:

• Una pequeña hoja de estilo.

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 140

Figura 6.9: Ejemplo de Auto-completado empleando AJAX

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 141

Figura 6.10: Google Suggest.

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 142

• El código Javascript y,
• El código HTML.

Mientras que a la página jsp simplemente le llega la cadena de texto que hay
en el cuadro y devuelve un documento XML con las referencias encontradas.

• Código 1: autoCompletar.html

<html >

<head>

<title>Auto Completar</title>

<style type=“text/css”>

.ratonFuera

background: #A9A9A9;

color: #000000;

.ratonEncima

background: #5F9EA0;

color: #000000;

</style>

<script language=“JavaScript” type=“text/javascript”

src=“lib/ConstructorXMLHttpRequest.js”></script>

<script language=“JavaScript” type=“text/javascript”

src=“lib/ClasePeticionAjax.js”></script>
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 143

<script language=“JavaScript” type=“text/javascript”>

function buscarNombres(elemento)

if(elemento.value == “”) //Si no hay nada escrito es que el usuario ha borrado,

así que se borra la lista.

borrarInfo();

return;

var elementoActual = elemento; //Se necesitará la variable en una función inte-

rior, así que se la redeclara.

borrarInfo(); //Se borra la información de la ventana, por si quedaba algo, no se

añada al final lo nuevo y se repita.

pedirInfo01= new objetoAjax(“GET”); /Se construye un objetoAjax que utilizará

el método GET

//Cuando se usa el método GET la página a la que se envía los datos y los datos
van unidos en la misma cadena.

var cadenaPeticionGET = “pedirInfo.jsp?”; //La página.

var datos =“&cadenaTexto=” + elemento.value; //Los datos

cadenaPeticionGET =cadenaPeticionGET + datos; //Se une la página con el

resto de los datos.

/*Se asigna la función de completado, que llevara la carga de generar las nuevas
celdas con la información recibida, en esta ocasión, aunque lo mas correcto sería que
se tuviéra una función propia que lo haga, esto es solo un ejemplo sencillo */

pedirInfo01.completado =

function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, res-

puestaXML)

{
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 144

//Se toma lo que nos interesa de XML.

var documentoCompleto = respuestaXML.getElementsByTagName(“nombre”);

if(documentoCompleto.length != 0) //Si se tiene alguna respuesta se añade infor-

mación, sino no.

posicionVentanaInformacion(elementoActual);

for(var i = 0; i < documentoCompleto.length; i++)

//1.Se crea la fila de la tabla y se le dá la información.

var fila = document.createElement(“tr”);

var celda = document.createElement(“td”);

.innerHTML = documentoCompleto[i].childNodes[0].nodeValue;

//2.Se le aplica el estilo para que sea interactivo dependiendo de los eventos.

celda.onmouseout = function() {this.className=‘ratonFuera’;}; // Referencia a

la hoja CSS

celda.onmouseover = function() {this.className=‘ratonEncima’;}; // Referencia

a la hoja CSS

celda.setAttribute(“bgcolor”, ”#A9A9A9”);

//3.Si se pulsa sobre uno de los sugeridos se sustituirá el valor de búsqueda por
este.

celda.onclick = function() { ponerNombre(this);};

//4.Se une la nueva fila a la tabla.

fila.appendChild(celda);

document.getElementById(“cuerpoTablaSugerancias”).appendChild(fila);

}
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 145

pedirInfo01.tomar(cadenaPeticionGET); //Se envia tanto la página como los da-

tos en la misma cadena.

function borrarInfo()

var ventanaborrar = document.getElementById(“cuerpoTablaSugerancias”);

var indice = ventanaborrar.childNodes.length;

for (var i = indice - 1; i >= 0 ; i—)

ventanaborrar.removeChild(ventanaborrar.childNodes[i]);

document.getElementById(“tablaSugerancias”).style.border = “none”;

function posicionVentanaInformacion(elemento)

//1.Se vá a reposicionar la ventana de información respecto al elemento que ha

pedido información.

var reposicionar = document.getElementById(“tablaSugerancias”);

//2.Calcular la posición absoluta que ocupara la ventana.

var anchoCelda = elemento.offsetWidth; //El mismo ancho que lel input.

var izquierdaDesplazado = calcularEsquina(elemento, “offsetLeft”); //El despla-

zamiento a la izquierda total del input

//Desplazamiento del alto del input + el alto del input.

var altoDesplazado = calcularEsquina(elemento, “offsetTop”) + elemento.offsetHeight;

//3.Se le aplica las propiedades a la ventana.

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 146

reposicionar.style.border = “black 1px solid”;

reposicionar.style.width = anchoCelda + “px”;

reposicionar.style.left = izquierdaDesplazado + “px”;

reposicionar.style.top = altoDesplazado + “px”;

function calcularEsquina(elemento, atributoEsquina) //ej: campo = objetoDeLa-

Pagina , atributoEsquina = “offsetTop”

var desplazamiento = 0;

while(elemento) //Mientras exista el elemento

desplazamiento += elemento[atributoEsquina]; //Se le suma al desplazamiento,

el desplazamiento del elemento.

/*Normalmente cada elemento solo contiene su desplazamiento respecto al padre,

no de manera absoluta, así que se pasa al elemento padre, si existe en la siguiente
iteración se sumara su desplazamiento también, sino terminara. */

elemento = elemento.offsetParent;

return desplazamiento;

function ponerNombre(celda)

document.getElementById(“nombres”).value = celda.firstChild.nodeValue;

borrarInfo();

</script>
CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 147

</head>

<body>

<h1>Auto Completar</h1>

<h3>Los nombres que hay en el fichero jsp del servidor empiezan por A y por
N.</h3>

<form action=“null”>

Nombres: <input type=“text” size=“20” id=“nombres” >

onkeyup=“buscarNombres(this);” style=“height:20;”/>

</form>

<table id=“tablaSugerancias” bgcolor=“#A9A9A9” border=“0” cellspacing=“0”

cellpadding=“0” style=“position:absolute;”>

<tbody id=“cuerpoTablaSugerancias”></tbody>

</table>

</body>

</html>

Se han resaltado dos funciones para remarcar algo interesante:

— La función buscarNombres hace una petición bastante sencilla y

comprensible: hace una petición en base a lo que el usuario ha
escrito en el cuadro de texto. Cuando llega el resultado, éste va
a la función objetoRequestCompletado01 que recoge el documento
XML, lo analiza sacando los nombres y crea la tabla dinámicamente.

Para concluir se muestra el archivo .jsp que realiza la búsqueda y genera

el documento XML.

• Código 2: pedirInfo.jsp

<%@ page import=“java.io.*,java.util.*,java.lang.*”

contentType=“text/xml; charset=UTF-8” pageEncoding=“UTF-8”%>

CAPÍTULO 6. EJEMPLOS REALES DE USO PARA AJAX 148

<%response.setHeader(“Cache-Control”, “no-cache”);

//1.Se recupera la cadena de la petición

request.setCharacterEncoding(“UTF-8”);

String prefijo = request.getParameter(“cadenaTexto”);

//2.Se créa las sugerencias

ArrayList listanombres = new ArrayList();

listanombres.add(“Ana”);

listanombres.add(“Anamaria”);

listanombres.add(“Anastasia”);

listanombres.add(“Adolfo”);

listanombres.add(“Alex”);

listanombres.add(“Naomi”);

listanombres.add(“Noelia”);

listanombres.add(“Nora”);

listanombres.add(“Nox”);

//3.Se observa las que coinciden y se construye un documento XML.

//3.1 Variables necesarias

Iterator i = listanombres.iterator();

boolean valido = true;

//3.2 Iteracion para construir el código (Es lineal y pesado).

out.println(“<listaNombres>”);

while( i.hasNext() ) {

String nombre=(String)i.next();

//Comprobación de igualdad de la vieja escuela.

if (prefijo.length() <= nombre.length()) {

char[] nombre2 = nombre.toCharArray();

char[] prefijo2= prefijo.toCharArray();

int j=0;

while (j < prefijo.length() && (prefijo2[j] == nombre2[j]) ) {

j++;

valido = (j == prefijo.length());

else {

valido = false;

if(valido) {

out.println(“<nombre>” + nombre + “</nombre>”);

valido = false;

out.println(“</listaNombres>”);

out.close();

%>
Capítulo 7

Problemas de Seguridad y
Desarrollo

7.1 Introducción

Como cualquier otra técnica o tecnología que se emplee en un entorno Web, el

uso de AJAX está sujeto a inconvenientes. La experiencia enseña que con el
tiempo estos inconvenientes se suplen cuando el mercado apoya una tecnología
y ésta se estandariza lo suficiente como para que los distintos navegadores no
den problemas con ella, ya sean estos de compatibilidad o de seguridad.
AJAX permite realizar ahora cosas que antes no se podían o necesitaban
uso de plugins, además de aumentar la interactividad al poder mantener la
conexión con el servidor de forma sencilla. Por este motivo la industria se
ha volcado mucho últimamente en desarrollar software con AJAX, pero éste
es todavía un poco inmaduro. En este capítulo se mencionará los principales
problemas de los entornos Web que utilicen AJAX así como los problemas de
desarrollo que supone.

7.2 Problemas de Desarrollo

Se enumerarán los problemas debajo de un título que marque su naturaleza

para que se vea claro que los problemas de desarrollo no solo son muchos sino

150
CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 151

que no son pequeños.

7.2.1 Internet Oscura

Como las páginas generadas por AJAX generan información dinámicamente

los robots de Google no encuentran muchas veces nada en la página, obtenien-
do un ranking deficiente, para evitarlo, deben crearse páginas especiales de
recorrido completo.

7.2.2 Complejidad Aumentada

Los desarrolladores de la parte cliente de la aplicación deben entender la parte

lógica del programa suficientemente como para que se combine satisfactoria-
mente con la parte servidor. Por tanto, es fácil mezclar lógica de presentación
y lógica de negocio.
Los desarrolladores de páginas Web deben tener habilidad para trabajar
con Javascript.

7.2.3 Aplicaciones Difíciles de Mantener

• Javascript es difícil de testear.

• No hay unos patrones de diseño con Javascript claros ya que no se ha
utilizado apenas.
• La modularidad de Javascript es muy limitada.

7.2.4 Las Herramientas de Desarrollo que Usan AJAX son

Inmaduras

Como es ahora cuando se está empezando a emplear el objeto XMLHttpRequest

las herramientas de desarrollo todavía están en fase beta.

7.2.5 El Objeto XMLHttpRequest No Está Estandarizado

Una futura versión de Internet Explorer podría solucionar esto.

CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 152

7.2.6 El Objeto XMLHttpRequest No Está en Navegadores

Antiguos

Obliga a las personas que quieran utilizar aplicaciones AJAX a actualizarse,

cosa que no es demasiado grave para cualquier usuario medio.

7.2.7 Dependencia de la Tecnología Javascript

Javascript debe estar activado para que las aplicaciones funcionen.

Hay pequeñas incompatibilidades entre navegadores lo que obliga a testear

el código para asegurar su correcto funcionamiento.
Cualquier persona con algo de experiencia en el uso de AJAX se da cuenta
de todo lo que esto supone, el uso de AJAX para poder crear una aplicación
exitosa obliga a tener conocimientos de Javascript y del DOM y, durante
su desarrollo y una vez terminada, a testarla en los diferentes navegadores
donde se quiera utilizar y a corregir los problemas. Si no se es disciplinado el
desarrollo con AJAX sale realmente muy caro a una empresa, tanto en tiempo
como en la necesidad de profesionales calificados.

7.3 Problemas de Seguridad

Cuando se quiere analizar la seguridad de un programa en red se deben te-

ner dos partes claramente diferenciadas: servidor y cliente/s. El análisis de
seguridad se debe hacer pensando que el atacante conoce perfectamente to-
do el funcionamiento del sistema ya que no se puede confiar en que ayude
mantenerlo en secreto; sus mismos desarrolladores pueden atacarlo.

7.3.1 Parte del Cliente

En principio todas las aplicaciones Web están sujetas a los mismos problemas
de seguridad ya que todas se suelen correr sobre el mismo software del servidor
al que le llegan las peticiones de los usuarios “no identificados” ya que nunca se
puede asegurar realmente de quien hay al otro lado de la línea, si la aplicación
necesita de seguridad deberá ser el servidor el que la proporcione. A nadie se
CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 153

le ocurriría poner la seguridad en el lado cliente ya que equivale a servir en

bandeja al cracker todo el control de seguridad.

7.3.2 Problemas Antiguos AJAX

El código Javascript es visible al usuario, que perfectamente puede ser un

potencial Hacker, puede buscar la forma de utilizar el código, como está o con
las modificaciones oportunas para explotar las debilidades de la aplicación.

• Solución errónea: Encriptarlo, si se ejecuta es porque nuestra máquina

es capaz de desencriptarlo con lo cual seguro que es posible la ingeniería
inversa.

• Solución correcta: No existe, el código debe ser visible para que se eje-
cute.

El código Javascript puede ser bajado y evaluado (eval) en el cliente, como

se ha visto en los ejemplos, si fuera código con malas intenciones el cliente
podría hacer poco ante ello.

• Solución 1: Utilizar algún tipo de área de pruebas para el código antes

de lanzarlo directamente que lo analice, existen ya algunos filtros que
evitan la ejecución de ciertas funciones o envío de ciertas etiquetas.

• Solución 2: El código Javascript podría estar Firmado digitalmente,

sería una buena solución futura, pero hoy es solo una idea.

Si se desea que la información de las peticiones no sea visible es necesario

utilizar un canal HTTPS.

7.3.3 Parte del Servidor

Formas de proporcionar seguridad en el lado servidor:

• Solo dejar utilizar la aplicación a los clientes que puedan validarse real-
mente con su firma digital.
CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 154

• Utilizar los mecanismos de identificación de sesión que pueda proporcio-

narnos el servidor de forma que podamos validar y autorizar al usuario
comprobando sus privilegios.

7.3.4 Problemas Agravados Por el Uso de AJAX

El principal problema del uso de AJAX respecto al de una aplicación Web

normal es que, debido a su naturaleza (hacer peticiones para luego refrescar
partes de una página), el desarrollador puede perfectamente desglosar las di-
ferentes partes de la página JSP, incluidas las que necesitan autenticación y
autorización, o incluir otros servicios que necesiten por ejemplo de una base
de datos. Al terminar la aplicación a un desarrollador no demasiado experto
puede quedarle el esquema de la figura 7.1 de la página 155, que si bien pue-
de funcionar correctamente es fácilmente atacable ya que tiene una “GRAN
SUPERFICIE DE IMPACTO” (este problema surge al dividir un programa
en módulos accesibles individualmente ya que también se pueden intentar ata-
car individualmente buscando un comportamiento incorrecto que genere algún
agujero de seguridad), este es el gran problema de AJAX, pero puede solven-
tarse.
En la figura 7.1 el cliente tiene acceso directo a todas las partes de la
aplicación, lo que resulta abominable ya que la validación no sirve de nada si
no se hace antes de cualquier servicio que lo necesite lo que requiere mucha
repetición de código, además al equipo de desarrollo se le puede escapar alguna
validación y como los servicios se pueden acceder individualmente (en este
caso) puede haber algún agujero de seguridad en alguno.
Lo ideal para proporcionar seguridad sería el caso de la figura 7.2 de la
página 155.
Como se puede observar en la figura, el hecho de que el lado servidor de la
aplicación esté diseñado de forma segura es la verdadera clave de la seguridad
en las aplicaciones Web ya que todo el código de la parte cliente es visible
a ataques y modificaciones en la memoria del cliente para atacar a la parte
servidor.
CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 155

PARTE SERVIDOR
PARTE CLIENTE (Accesibles directamente ó por una dirección)

Necesitan validación

PARTE 2

CLIENTE VALIDADOR

No necesitan validación BASE DE DATOS

PARTE 1

Figura 7.1: Aplicación desarrollada con una Seguridad Ineficiente.

Servidor accedible por una dirección Servidor

(No acc es ible direc tam ent e o por una direcc ión)
No necesitan validación Necesitan validación

SERVICIO 1 CONTROLADOR
B.D
Cliente BASE DE DATOS

VISTA

VALIDADOR SERVICIO 2

Figura 7.2: Aplicación Desarrollada con una Seguridad Correcta.

CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 156

7.4 Política de Mismo Origen

La política de mismo origen data de Netscape Navigator 2.0, fue una impor-
tante medida de seguridad introducida para proporcionar seguridad en el lado
cliente cuando se esta ejecutando código sobre el navegador (en mayor parte
de los casos Javascript).
Esta política evita que un documento o script cargado desde un determina-
do sitio Web pueda realizar peticiones a otro sitio Web diferente; es interesante
que a la hora de desarrollar las aplicaciones utilizando AJAX se sepa esto ya
que es un límite impuesto para garantizar la seguridad, esto se puede observar
mediante el siguiente ejemplo.

• CargarOtroDominio.html

<html>

<head>

<title>Insertar HTML</title>

<script language=“JavaScript” src=“lib/ConstructorXMLHttpRequest.js”>

</script>

<script language=“JavaScript” src=“lib/ClasePeticionAjax.js”></script>

<script language=“JavaScript” type=“text/javascript”>

var PeticionAjax01 = new objetoAjax(); //Se define un nuevo objetoAjax.

PeticionAjax01.completado = objetoRequestCompletado01; //Función completa-

do del objetoAjax redefinida.

function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, res-

puestaXML)

document.getElementById(‘ParteHTML’).innerHTML = respuestaTexto; //Solo

interesa la respuesta como texto

}
CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 157

</script>

</head>

<body>

<span id=“ParteHTML”> //Principio del código que se va a sustituir

<center>

<button onclick=“PeticionAjax01.tomar(‘http://www.google.es/’)”>

Toma http://www.google.es/</button>

</center>

</span> //Final del código que se va a sustituir

</body>

</html>

En el ejemplo, la página CargarOtroDominio.html está cargada desde el

dominio localhost con el puerto 8080, y si alguno de estos parámetros cambia
en una petición AJAX, la política de mismo origen entrará en juego.
En Internet Explorer, se mostrará una alarma y preguntará si se desea
permitir, recordando que es un riesgo de seguridad, se puede ver en la figura
7.3 de la página 158.

Si se quiere permitir la carga de dominios diferentes sin problemas se deben

modificar ciertos parámetros del navegador. En cualquier caso, a nivel de utili-
dad real, no se espera que ningún usuario se ponga a modificar los parámetros
de su navegador para poder ver nuestra super página Web, porque no lo hará,
es más, hay navegadores que ni siquiera proporcionan esta posibilidad: no se
pueden configurar y simplemente negarán el acceso ya que esto atenta contra
la seguridad.

7.5 Desarrollo de una Aplicación Web Segura

Se enumerará una serie de cosas que se deberían tener en cuenta en el plantea-

miento inicial del proyecto si se está desarrollando una aplicación Web crítica.
CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 158

Figura 7.3: Internet Explorer 6 pidiendo una confirmación debido a un posible

riesgo de seguridad.

7.5.1 Cosas a Tener en Cuenta

• Conexión cifrada

La conexión debería estar cifrada desde la página principal para que cuando
el usuario mande sus datos personales éstos estén codificados, aunque esto haga
gastar más recursos. Hay que configurarlo en el servidor, por ejemplo Tomcat.

• Sin cookies

Entre otras cosas, gracias a AJAX, al no necesitar cambiar de Web e ir

modificando dinámicamente la actual, se puede dar al usuario un identificador
al comenzar la sesión, apuntarlo en la base de datos y no necesitar usar ningún
cookie sino una variable que contenga el identificador y que se borrará al cerrar
el navegador, de esta manera enviando ese identificador con cada petición se
identificaría al usuario.

• Verificación completa del usuario.

Al desarrollar un sitio Web se lo debe dividir en dos partes claramente

diferenciadas: una a la que se puede entrar sin verificación y otra en la que
será obligada. Por ejemplo en una aplicación de negocio, se puede tener una
parte de noticias pública, donde el usuario además pueda ver los productos
pero en caso de que quiera realizar una compra el usuario tenga que introducir
su nombre y contraseña que ha dado anteriormente cuando se registró, dando
sus datos de cuenta y demás, aunque estos se podrían especificar más tarde por
si quiere cambiar el domicilio de envío o cualquier otra información personal.

• Evitar la inserción de código.

El usuario no debería poder introducir información en ningún momento,

la página debe estar hecha completamente para su cometido, que es realizar
las compras a golpe de clic, en caso de dudas que se hagan por correo-e.

• Verificación completa de datos.

Cuando el usuario decida pagar por su carrito de la compra, se deberá

comparar toda la información enviada de nombre del artículo, su identificador
único y su precio de manera que se sepa que la petición es correcta ya que el
usuario podría cambiar los precios de los artículos usando alguna herramienta
de depuración, como Firebug.

• Base de datos no accesible exteriormente.

Solamente debe de poder trabajar con ella la parte del servidor Web y
debe tener un usuario que solo debe poder acceder a su base de datos para
evitar que se cambien los precios aquí, si es que se tiene una tienda. Además,
en una aplicación Web el usuario no necesita acceder directamente al servidor
por SQL a no ser que sea precisamente para esto como el ISQLPlus de Oracle,
en cuyo caso está diseñado expresamente para esto.

• Minimizar la superficie de impacto.

El cliente solo debe poder acceder a una página que luego delegará depen-
diendo la petición realizada por el usuario el trabajo en otras contenidas en el
servidor no accesibles desde fuera.
Capítulo 8

Un Mundo de Toolkits y
Frameworks

8.1 Introducción

En los capítulos anteriores se ha estado trabajado intensamente con HTML y

Javascript. Aunque esta obligado a utilizar estos dos lenguajes cuando se habla
de AJAX, es posible usarlos directamente (como se ha hecho hasta ahora) o
indirectamente (lo que será el objetivo en el presente capítulo), es decir, existe
la posibilidad de trabajar sobre una capa de abstracción de alto nivel que más
tarde generará automáticamente el código HTML y Javascript necesario para
que la aplicación funcione como una página Web dinámica. Cuanto mejor y
más flexible sea esta capa, más se alejará de los intrincados recovecos de la
programación Web AJAX directa, facilitando así el trabajo.
Cada toolkit o framework posee una filosofía diferente y proporciona una
capa de alto nivel con distintas características y lenguajes propios.

8.2 Tipos de Toolkits y Frameworks Sobre Java

A día de hoy existen más de 50 toolkits y frameworks diferentes para trabajar

con AJAX, la inmensa mayoría gratuitos y algunos otros de pago. En una
búsqueda del más adecuado para los propósitos, se puede sentir desbordado y

160
CAPÍTULO 8. UN MUNDO DE TOOLKITS Y FRAMEWORKS 161

no saber cuál escoger y porqué. Para arrojar un poco de luz en este asunto,
primero se va a realizar una pequeña clasificación que, en cualquier caso, se
quedará pequeña en cuanto pase algo de tiempo ya que siempre están apa-
reciendo nuevas ideas para utilizar AJAX partiendo de diferentes tecnologías
de alto nivel. En este apartado se hará incapie en las bibliotecas que generan
Javascript y que incorporan tecnología Java por lo que los siguientes puntos
intentan abarcar gran parte de las soluciones java actuales para trabajar con
AJAX.

8.2.1 Bibliotecas Javascript en el Lado Cliente

Éstas son tal vez las que menos abstracción dan ya que se esta trabajando
directamente sobre Javascript y HTML, como ocurre por ejemplo en la biblio-
teca construida durante los primeros capítulos del presente volumen (aunque
ésta es muy simple y no cubre todas las necesidades, se la usa para aprender).
Características principales:

• Funcionan igual no importa el tipo de tecnología que se use en el servidor:

PHP, Java, Ruby, etc.

• Son accesibles durante el transcurso del programa ya sea localmente o a

través de una URL.

• Pueden combinarse en una misma aplicación.

Razones técnicas para utilizar éstas:

• Manejan las comunicaciones asíncronas.

• Manejan las incompatibilidades entre Navegadores.

• Usan un “IFrame” (Frame invisible al usuario que carga la información

que se necesita en la aplicación abriendo la página correspondiente sin
usar el objeto XMLHttpRequest) si el Navegador no soporta AJAX.

• Proveen una buena navegación dando soporte para los botones de “Ir
a la página anterior” e “Ir a la página siguiente” que muchas veces al
hacer una aplicación dinámica pierden su utilidad.
CAPÍTULO 8. UN MUNDO DE TOOLKITS Y FRAMEWORKS 162

• Proporcionan “Widgets” listos para usar, como árboles, calendarios,etc.

• Proporcionan una API de acceso al DOM más sencilla que la original.

• Proporcionan manejadores de errores.

• Proporcionan manejadores de eventos sencillos.

• Proporcionan facilidades para construir interfaces de usuario avanzadas.

• Facilitan una mejor programación orientada a objetos.

Razones comerciales para utilizar éstas:

• Han sido probadas en el mercado por lo que suelen ser mejores que las
de uno mismo.

• Poseen comunidades de desarrolladores por lo que es fácil encontrar ayu-

da.

• Son fáciles de usar aunque primero hay que aprender a usarlas, lo que
no es directo ni mucho menos.

• Los entornos IDE como Netbeans y Eclipse tienen plugins que dan so-
porte a muchas de estas bibliotecas facilitando el desarrollo.

Ejemplos de este tipo de bibliotecas son:

• Dojo Toolkit:

• La más utilizada y comprensible.

• Está ganando el liderazgo.

• Tiene el mayor soporte por parte de la industria (Sun e IBM ).

• http://dojotoolkit.com/

• Prototype:

• Usada como base para otras bibliotecas.

• http://prototype.conio.net/
CAPÍTULO 8. UN MUNDO DE TOOLKITS Y FRAMEWORKS 163

• Script.aculo.us:

• Construida sobre Prototype.

• Buen conjunto de efectos visuales y controles.

• http://script.aculo.us/
• Rico:
• Construida sobre Prototype.

• Rica en componentes para la comunicación asíncrona.

• http://openrico.org/

Como conclusión puede decirse que son buenas y se pueden tomar “wid-
gets” de diferentes fuentes. Lo malo es que el desarrollador tiene que aprender
Javascript y cada biblioteca suele tener su propia sintaxis.

8.2.2 Tecnologías Wrapper: jMaki

jMaki proporciona una capa Java de abstracción sobre Javascript, de esta ma-
nera se puede utilizar Widgets de las diferentes bibliotecas del lado cliente (las
soportadas, como Dojo, Scriptaculus, Yahoo UI Widgets, DHTML Goodies)
bajo una sintaxis Java común. De esta manera se facilita el trabajo a los
programadores Java para los que Javascript suele ser algo muy extraño, su
Web es https:/ajax.dev.java.net/.
Como conclusión puede decirse que aún a las diferentes bibliotecas bajo un
modelo de programación común y tiene plugin para Netbeans 5.5. Su único
problema (que también puede verse como una ventaja) es que está en constante
evolución ya que sus desarrolladores se encargan de que soporte las bibliotecas
Javascript de última generación.
NOTA: jMaki también permite trabajar con PHP, no solo con Java.

8.2.3 Componentes Java Server Faces que Utilizan AJAX

Con estos componentes no se nesecita conocer nada de Javascript delegando

esta complejidad a los autores de los componentes. Con esto pueden hacerse
CAPÍTULO 8. UN MUNDO DE TOOLKITS Y FRAMEWORKS 164

las páginas a base de tomar y arrastrar componentes a través de los entornos

IDE que soportan Java Server Faces.

Algunas implementaciones de esta idea son:

• Componentes Blueprint con soporte AJAX (código abierto).

• Web: http://developers.sun.com/ajax/componentscatalog.jsp
• Web: https://bpcatalog.dev.java.net/ajax/jsf-ajax/
• Ajax4jsf (código abierto):
• Web: https://ajax4jsf.dev.java.net/
• ICEfaces (ICESoft) (comercial):
• Web: http://www.icesoft.com/products/icefaces.html
• Dynafaces (código abierto)
• Web: https://jsf-extensions.dev.java.net/nonav/mvn/slides.html

Como conclusión puede decirse que es muy sencillo de utilizar ya que los
componentes se usan arrastrándolos sobre el espacio de trabajo. No obstante,
crear nuevos componentes personalizados no es una tarea sencilla.

8.2.4 Traductor Java a HTML/Javascript: Google Web To-

olkit

Con este toolkit todo el desarrollo se hace bajo Java, (más bien un subcon-
junto de sus bibliotecas bastante pequeño) junto con una serie de bibliotecas
desarrolladas por Google para el desarrollo Web que son las que integran real-
mente el toolkit y que, realmente, son las que se utilizarán. Es posible emplear
constantemente el lenguaje Java a que se esta acostumbrado (asumiendo que
se sabe Java) en el seno del toolkit para el desarrollo y la depuración. Una
vez que todo funcione correctamente se utilizará el preprocesador del toolkit
que traducirá la aplicación escrita en Java a HTML y Javascript. La Web es
http://code.google.com/webtoolkit/.
Como conclusión puede decirse que Java es la mejor capa de abstracción
que nos aleja del HTML/Javascript todo lo que se puede. Además tiene un
CAPÍTULO 8. UN MUNDO DE TOOLKITS Y FRAMEWORKS 165

buen soporte. El único inconveniente es que no se aleja totalmente de las hojas

de estilo y del DOM.

8.3 Tipos de Toolkits y Frameworks Sobre Lengua-

jes No Java

Como puede suponer el lector, hay suficientes toolkits y frameworks, como para
hablar de todos ellos, si bien se va a mencionar algunas de las plataformas de
programación y lenguajes más usuales.

8.3.1 .NET Frameworks

Hay una gran cantidad de compañías que utilizan tecnología Microsoft por lo
que se puede encontrar también una gran cantidad de frameworks basados en
.NET , ya que el número de usuarios potenciales es muy grande. Uno de los
más interesantes es:

• Atlas: es la apuesta de Microsoft para desarrollar Web, integra desarrollo

del lado cliente con un desarrollo del servidor basado en las bibliotecas
ASP .NET 2.0.

Existen más frameworks entre los que se podría mencionar: Ajax Engine,
Bitkraft, MagicAjax, Monorraíl y zumiPage.

8.3.2 Flash Frameworks

La tecnología Flash se está introduciendo vertiginosamente en el mundo Web

y ganando adeptos gracias a la facilidad de desarrollo que proporciona. AJAX
no podía ser menos y se dispone de:

• Flex Framework FABride: es una pequeña biblioteca que puede ser in-
sertada en una aplicación o componente Flex o incluso en un archivo swf
vacío y exponerlo al código dinámico en el navegador; ahora es código
abierto.
CAPÍTULO 8. UN MUNDO DE TOOLKITS Y FRAMEWORKS 166

8.3.3 PHP Frameworks

Pueden encontrarse más de 15 frameworks y no parece haber un claro ganador

entre ellas; sólo el tiempo lo dirá.

Por mencionar algunos: AjaxAC, AJAX AGENT, Cajax, CakePHP, Flexi-

ble Ajax, My-BIC, PAJAJ, Pipeline, TinyAjax, symfony, xajax, XOAD, Zoop,
etc

8.3.4 Otros Frameworks

También se pueden encontrar desde frameworks que no dependan de la tec-

nología del servidor, hasta algunos para usar con ColdFusion, Perl, Python,
Lisp y un largo etcétera con lo que hay para todos los gustos y colores.

8.4 Conclusiones Sobre el Uso de los Toolkits

Ya que existen tantas aproximaciones diferentes sobre una misma idea como
es AJAX y se debe elegir una manera de trabajar que use una o varias de
éstas (si es que son compatibles), de las opciones anteriores se debe hacer la
elección con detenimiento ya que esto condicionará de manera importante el
esquema de nuestra aplicación.
No se sabría decir cual es la mejor forma de trabajar, ya que ello depende de
muchos factores. Por ello, la más idónea sea seguramente la más cercana a cada
programador particular: un programador Web se puede ver cómodo con las
bibliotecas del lado cliente si no conoce Java, mientras que a un programador
Java le puede resultar complicado aprender Javascript en un principio por las
carencias de programación orientada a objetos de éste.

8.5 Notas Finales del Capítulo

Todos los toolkits y frameworks prometen ser maravillosos y facilitar la vida

muchísimo al programador. Los mejores de ellos o los que intentan captar más
al desarrollador tienen demostraciones en la misma página Web, con el código
fuente para que pueda apreciarse rápidamente la filosofía y “facilidad” de uso.
A este respecto, uno de los que más impresiona es “ZS” en el que el código es
realmente mínimo, pudiendo programar con sus etiquetas tipo HTML; también
“GWT ” o Google Web Toolkit es muy tentador, ya que intenta hacerlo todo
con Java.

Se ha de ser conscientes de que se encuentra en un momento en el que

la industria intenta captar usuarios (muchos de los Toolkits y Frameworks
son gratuitos), y ya que no hay una línea de trabajo definida el campo está
abonado para que vayan apareciendo y crezcan múltiples soluciones. Sólo el
tiempo dirá cuáles prevalecen y cuáles se dejan de actualiza.
Capítulo 9

Herramientas Utilizadas para

la Aplicación

9.1 Introducción

Las herramientas utilizadas para el desarrollo de la Aplicación Web con AJAX

fueron las siguientes:

• DB2 Express-C9 v9.1.0.356.

• WebsPhere Studio integrado a Rational Software Architect V6.0 para

Windows.

• Apache Tomcat.

A continuación se hará una breve descripción de las características más

importantes de cada una de la herramientas mencionadas precedentemente.

9.2 DB2 Express-C9

DB2 Express-C es un miembro de la familia IBM DB2 de poderosas aplicacio-

nes de servidores de datos para manejar tanto datos relacionales como XML.
DB2 Express-C es una edición de DB2 libre, sin límites y fácil de usar. La

168
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN169

C en DB2 Express-C significa Comunidad. Una comunidad de usuarios DB2

Express-C que se juntan para ayudarse unos a otros, tanto en línea como fuera
de ella. La comunidad DB2 Express-C consiste en una variedad de personas
y compañías que diseñan, desarrollan, implementan o utilizan soluciones de
base de datos, como:

• Desarrolladores de aplicaciones que requieren un software de base de

datos de estándar abierto para construir aplicaciones standalone, cliente-
servidor, Web y empresariales.
• ISVs, vendedores de hardware, vendedores de infraestructura de pila y
proveedores de otros tipos de solución que quieran incluir o empotrar un
completo servidor de datos como parte de sus soluciones.
• Consultores, administradores de base de datos y arquitectos IT que ne-
cesiten un servidor de datos robusto para entrenamiento, desarrollo de
habilidades, evaluación y prototyping.
• Startups, pequeñas y medianas compañías que necesitan un servidor de
datos confiable para sus aplicaciones y operaciones.
• Estudiantes, profesores y otros usuarios académicos que quieran un ser-
vidor de datos altamente versátil para enseñanza, courseware, proyectos
e investigaciones [2].

DB2 Express-C comparte el mismo núcleo de funcionalidad y código ba-

se como las ediciones pagadas de DB2 para Linux, UNIX y Windows. DB2
Express-C puede correr en sistemas de 32-bits y 64-bits con sistemas ope-
rativos Windows o Linux. Puede correr en un sistema que tenga cualquier
cantidad de núcleos y de memoria. No tiene ningún requerimiento especial
de almacenamiento o de configuración del sistema que sean especiales. DB2
Express-C también incluye pureXML sin costo. pureXML es la tecnología
única de DB2 para almacenar y procesar documentos XML nativamente.

9.2.1 Servidores DB2

Todas las ediciones de servidores DB2 contienen el mismo núcleo de compo-

nentes; están empaquetados de tal manera que los usuarios puedan escoger las
funciones que necesitan al precio correcto. Figura 9.1 de la página 170 ilustra
las diferentes ediciones de productos DB2.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN170

Figura 9.1: Servidores DB2.

Como se muestra en la figura 9.1, DB2 Express-C es igual que DB2 Express
solo que sin algunos componentes. DB2 Express-C es libre a la comunidad.
La figura 9.1 también explica porqué es tan fácil actualizar desde DB2
Express-C. Si se desea actualizar a cualquier otro servidor DB2 en el futu-
ro, todos los servidores DB2 tienen el mismo núcleo de componentes. Esto
también significa que una aplicación desarrollada para una edición trabajará,
sin ninguna modificación, en otra edición. Y cualquier habilidad aprendida en
una edición aplicará a las otras ediciones.

9.2.2 Clientes DB2 y Controladores

Un cliente DB2 incluye las funcionalidades necesarias para conectarse a un

servidor DB2, sin embargo, un cliente no siempre tiene que ser instalado. Por
ejemplo, una aplicación JDBC Type 4 puede conectarse directamente a un
servidor DB2, previsto del correcto controlador ya cargado. Los clientes DB2
vienen en diferentes formas:

• Cliente Servidor de Datos IBM (IBM Data Server Client): el más com-
pleto, incluye herramientas GUI, controladores.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN171

Figura 9.2: Clientes DB2 y Controladores Disponibles.

• Cliente de Tiempo de Ejecución de Servidor de Datos (IBM Data Server

Runtime Client): funcionalidad básica para conectarse e incluye contro-
ladores.
• Módulos fusionados de Cliente de Tiempo de Ejecución DB2 para Win-
dows (DB2 Runtime Client Merge Modules for Windows): principal-
mente usado para incluir un cliente de Tiempo de Ejecución DB2 como
parte de la instalación de una aplicación Windows.

La figura 9.2 de la página 9.2 muestra los diferentes clientes DB2 y con-
troladores disponibles.
Al lado izquierdo de la figura 9.2, todos los clientes DB2 y controladores
son mostrados. Aunque todos los clientes DB2 incluyen sus controladores
requeridos, a partir de DB2 9 se proveen controladores individuales también.
Todos los clientes DB2 y controladores son gratis y disponibles para descargar
desde el sitio Web de DB2 Express-C. Los clientes y controladores pueden ser
usados para conectarse a un servidor DB2 en Linux, UNIX o Windows. Para
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN172

conectarse a servidores DB2 para z/OSR

o DB2 para i5/OS R
es necesario
ir a través de un servidor DB2 Connect (mostrado en el medio de la Figura
9.2).

9.2.3 Características y Productos Relacionados

Las características incluidas en la versión gratuita de DB2 Express-C son:

• La funcionalidad base de DB2.

• Control Center, Data Studio y otras herramientas de manejo pureXML.

• Utilización de recursos hasta 2GB y 2 núcleos.

• Disponible en Linux, Windows, y Solaris (x86).

Las capacidades disponibles con la licencia de 12 meses de DB2 Express-C

son:

• Fix packs.

• Alta disponibilidad y Recuperación Critica (HADR )

• Data Replication (Homogenous SQL)

• Utilización de recursos hasta 4GB y 4 núcleos (en 2 tomas)

9.2.4 Características incluídas en otras ediciones de DB2:

Características pagadas en la edición DB2 Express:

• pureXML

• Alta disponibilidad

• Federación Homogénea

Características incluidas sin costo en la edición DB2 Workgroup:

CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN173

• Alta disponibilidad

• Disponible en AIX
R
, Solaris, y HP-UX además de Linux y Windows

Características pagadas en la edición DB2 Workgroup:

• pureXML
• Optimización de Performance (MQT, MDC, Query Parallelism)

• Federación Homogénea

Características incluídas sin costo en la edición DB2 Enterprise:

• Particionamiento de Tablas (Range)

• Materialized Query Tables (MQT )

• Multi-dimensional Clustering (MDC )

• Alta disponibilidad y Recuperación Critica (HADR)
• Conexión Concentrada

Características pagadas en la edición DB2 Enterprise

• pureXML
• Optimización de almacenamiento. (incluido compresión)
• Control de acceso avanzado (seguridad avanzada)
• Optimización del Performance (Performance Experto, Query Patroller )

• Administración de datos Geodetic

• Federación Homogénea DB2

Productos pagados relacionados a DB2 :

• DB2 Connect.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN174

• DB2 Warehouse Editions.

• WebSphere
R
Federation Server.

• WebSphere Replication Server.

9.2.5 Características Incluidas con la Licencia de Suscripción

de DB2 Express-C

Fix Packs

Un fix pack de DB2 es un paquete de código corregido aplicado en un pro-

ducto DB2 instalado, para corregir publicaciones diferentes después de que
el producto fue liberado. Con una licencia de suscripción, la corrección de
paquetes es gratis para descargar e instalar.

Alta disponibilidad de Recuperación Critica (HADR)

Alta disponibilidad de Recuperación Crítica (HADR) es una característica de

fiabilidad de base de datos que proporciona una alta disponibilidad y la so-
lución de recuperación de datos ante desastres de sitio completos así como
parciales. Un ambiente HADR generalmente consiste en dos servidores de
datos, el primario y el secundario (que puede estar en posiciones geográfica-
mente distantes). El servidor primario es donde la fuente de base de datos es
almacenada y accesada por aplicaciones de clientes.
Como las transacciones son procesadas sobre la base de datos primaria, los
registros de la base de datos automáticamente son transportados al servidor
secundario a través de la red. El servidor secundario tiene una copia clonada
de la base de datos primaria, por lo general creada por el back-up de la base
de datos primaria y restaurándolo sobre la base de datos secundaria. Cuando
los registros de la base de datos primaria son recibidos ellos son reproducidos
de nuevo y aplicados a la base de datos secundaria.
Por la repetición continua de los registros, la base de datos secundaria
mantiene una réplica en sincronización de la base de datos primaria que puede
asumir si la base de datos primaria falla.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN175

Una solución completa de DB2-supported HADR nos da lo siguien-

te:

• Capacidad rápida de solución ante fallas, con transparencia completa

para clientes y aplicación de cliente.
• Atomicidad completa en las transacciones para prevenir perdida de da-
tos.
• Habilidad de actualizar sistemas o aplicaciones sin interrupción de ser-
vicios visibles.
• Sistema remoto de fallas, proporcionando recuperación completa de de-
sastre local que puede dañar el centro de datos.
• Administración fácil con herramientas graficas de DB2.
• Todos esto con un impacto insignificante sobre funcionamiento total del
sistema.

Réplica de Datos

Esta característica permite la réplica de datos entre un servidor fuente donde

los cambios de datos con capturados, y un servidor objetivo donde el cambio de
datos son aplicados. La figura 9.3 de la página 176 proporciona una descripción
de cómo trabaja la réplica.
En la figura 9.3 hay dos servidores, un servidor fuente y un servidor ob-
jetivo. En el servidor fuente, el programa Capture captura el cambio hecho
en la base de datos. En el servidor objetivo, un programa Apply aplica los
cambios de la base de datos replica. La réplica es útil para una variedad de
propósitos que requieren replica de datos, incluyendo alivio de capacidad, sos-
teniendo el data warehouse y el mercado de datos, revisando el historial de
cambios. Usando las características de la réplica SQL puedes replicar datos
entre DB2 Express-C y otros servidores DB2, incluyendo aquellos en otros
sistemas Linux, UNIX, z/OS, y i5/OS.

9.2.6 Características No Disponibles con DB2 Express-C

Esta sección describe alguna de las características disponibles en otras edicio-

nes de DB2 pero no en DB2 Express-C.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN176

Figura 9.3: Réplica de SQL.

CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN177

Particionamiento de la Base de Datos

La característica de particionamiento de la base de datos (DPF ) es solo dis-

ponible con DB2 Enterprise Edition con la licencia de pago adicional. Esto
permite a la base de datos ser extendido a través de múltiples particiones los
cuales pueden estar alojados en varias computadoras. DPF está basado en
una arquitectura shared-nothing. Cada computadora, como es añadido al gru-
po de partición, trae el poder adicional de procesamiento de datos con sus
propias CPUs y memoria. DPF es en particular útil en ambientes de servidor
de datos grandes como data warehouses donde las sentencias de los sistemas
de apoyo de decisión (DSS ) son controlados.

Concentrador de Conexión

El concentrador de conexiones es una característica que permite el soporte de

un largo número de usuarios conectados simultáneamente. Previamente, toda
conexión a la base de datos requiere un agente de base de datos. El concen-
trador de conexiones introduce el concepto de un agente lógico, permitiendo
un agente para mantener muchas conexiones.

Geodetic Extender

DB2 Geodetic Extender esta disponible con pago adicional para DB2 Enter-
prise Edition. Este extender hace desarrollos para aplicaciones de inteligencia
de negocios y egovernment que requieren un análisis de localización geográfica
mucho más sencillo. DB2 Geodetic Extender puede construir un globo mun-
dial virtual a cualquier escala. La mayoría de información de localización
es tomada usando sistemas worldwide, por ejemplo el sistema de satélites de
posicionamiento global (GPS ), y puede ser representado en coordenadas de
latitud/longitud (geocódigo). Los datos de negocios, como direcciones, pue-
den ser convertidos a geocódigo con DB2 Geodetic Extender y aplicaciones a
nivel empresarial trabajan mejor cuando mantienen los datos en esta forma sin
proyección, saliendo las proyecciones del mapa (tierra a mapa plano) donde
ellos pertenecen, en la capa de presentación, para mostrar e imprimir mapas.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN178

Workload Management (WLM)

Maneja cargas de trabajo en una base de datos en base a prioridades de un

usuario y de aplicaciones combinadas con la disponibilidad de recursos y lími-
tes. Permite regular la carga de trabajo de tu base de datos y consultas, de tal
manera que consultas importantes y de alta prioridad pueden corer inmediata-
mente, y , and previene consultas espontáneas que no tienen buen rendimiento
de monopolizar los recursos del sistema de manera que tu sistema puede co-
rrer eficientemente. WLM is Nuevo en DB2 9.5 y prove mas poder que las
características de las herramientas Query Patroller y del DB2 Governor que
eran disponibles en versiones anteriores de DB2.

9.2.7 Productos Pagados Relacionados con DB2

DB2 Connect

DB2 Connect es un software pagado que permite al cliente DB2 para Linux,
UNIX o Windows conectarse a un servidor DB2 para z/OS o para i5/OS,
como se muestra en la figura 9.4 de la página 9.4. DB2 Connect no es requerido
cuando la conexión ocurre en la dirección opuesta: cuando se conecta desde
DB2 para z/OS o i5/OS hacia DB2 para Linux, UNIX o Windows. DB2
Connect viene en dos ediciones principales dependiendo de las necesidades de
conexión: DB2 Connect Personal Edition y DB2 Connect Enterprise Edition.

WebSphere Federation Server

Antiguamente conocido como WebSphere Information Integrator (para sopor-

te de federación), WebSphere Federation Server permite una federación de
base de datos; significando que puedes correr consultas de base de datos que
puedan trabajar con objetos de diferentes sistemas de base de datos relacional.
Por ejemplo, con WebSphere Federation Server, se puede correr la siguiente
consulta:
SELECT *

FROM Oracle.Table1 A

DB2.Table2 B
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN179

Figura 9.4: DB2 Connect.

CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN180

SQLServer.Table3 C

WHERE

A.col1 < 100

and B.col5 = 1000

and C.col2 = “Test’

La figura 9.5 de la página 9.5 provee una ilustración donde WebSphere

Federation Server es usado.

WebSphere Replication Server

Antiguamente conocido como WebSphere Information Integrator (para sopor-

te de replicación), WebSphere Replication Server permite replicación SQL en
registros de base de datos cuando servidores de datos que no son de IBM
están involucrados. Esto también incluye una característica conocida como
Q-Replication para replicar información usando cola de mensajes.

9.2.8 Guía de Instalación de DB2 Express C

Este apartado explicará paso a paso una instalación básica de DB2 Express-C
en Windows. La misma installation wizard está
disponible en Linux ; por lo tanto los pasos son similares en ambas plata-
formas.

Procedimiento

1. Obtener la imágen de DB2 Express-C. Descargar la imágen apropiada de

DB2 Express-C, u ordenar el Discovery Kit DVD que incluye la imágen
del DB2 Express -C de la página Web www.ibm.com/db2/express.

2. Descomprimir los archivos en el directorio que se desee.

3. Localizar los archivos. Dirígirse hacia el directorio (o unidad) en donde

se encuentran los archivos de instalación que se han descomprimido.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN181

Figura 9.5: WebSphere Federation Server.

CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN182

4. Correr el Launchpad. Ejecutar el DB2 Launchpad haciendo doble clic

en el archivo setup.exe. En Linux, ejecutar el commando db2setup como
root. En el Launchpad, clic en la opción Install Product en el panel
izquierdo de la ventana.

5. Correr el DB2 setup wizard. El DB2 setup wizard revisa si cumple todos
los requerimientos del sistema y ve si existe otra instalación de DB2.
Hacer clic en el botón Next para seguir con la instalación.

6. Revisar los términos de licencia. Leer y aceptar los términos de licen-

cia (seleccionar el radio button I Accept...) y clic al botón Next para
continuar.

7. Elegir el tipo de instalación. En este caso, seleccionar la opción Ty-

pical (opción por defecto). La opción Compact realiza una instalación
básica, mientras la opción Custom permite personalizar la configuración
específica que se quiere instalar. Clic en el botón Next para continuar.

8. Seleccionar la carpeta para la instalación. Esta pantalla permite ele-

gir la unidad y el directorio donde el código de DB2 es instalado en
el sistema. Asegurarse de que exista espacio suficiente para la ins-
talación. Usar la unidad y el directorio por defecto para este ejem-
plo (mostrado a continuación): Unidad: C: Directorio: C:\Archivos de
Programa\IBM\SQLLIB. Clic en el botón Next para continuar.

9. Configurar la información del usuario. Una vez que DB2 Express-C es-
tá instalado, asegurarse que los procesos de DB2 están corriendo como
Servicios del Sistema. Estos servicios requieren una cuenta del sistema
operativo para poder correrlo. En el ambiente de Windows, usar la cuen-
ta por defecto db2admin es recomendada. Si esta cuenta aun no existe,
DB2 la creará en el Sistema Operativo. También se puede especificar
una cuenta existente, pero esa cuenta debe tener los permisos de admi-
nistrador local. Se recomienda usar las opciones sugeridas. Asegurarse
de especificar el password para la cuenta. En Linux se usa el UserID por
defecto db2inst1 (dueño de la instancia), db2fenc1 (usuario para rutinas
limitadas) y dasusr1 (usuario del DB2 Administrator Server, DAS ). Clic
en el botón Next para continuar.

10. Configurar la instancia DB2. Pensar en el concepto de instancia DB2

como un contenedor para bases de datos. Una instancia debe existir
antes de que una base de datos pueda ser creada dentro de ella. En una
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN183

instalación en Windows, la instancia llamada DB2 se creará automáti-

camente. En Linux, el nombre por defecto de la instancia es db2inst1.
Por defecto, la instancia DB2 esta configurada para escuchar conexiones
TCP/IP en el puerto 50000. El protocolo por defecto y el puerto pueden
ser cambiados dándole clic en Protocols y el botón Startup, respectiva-
mente. Se recomienda usar las opciones por defecto para este ejemplo.
Clic en el botón Next para continuar.
11. Comenzar con la instalación. Revisar las opciones de instalación selec-
cionadas previamente. Hacer clic en el botón Install para comenzar a
copiar los archivos a la carpeta destino de instalación. DB2 también
realizará algunos procesos de configuración iniciales.
12. Primeros pasos. Luego que la instalación ha terminado, otra herramien-
ta llamada First Steps arranca automaticamente. First Steps también
puede ser arrancada con el comando db2fs.
13. La base de datos SAMPLE es una base datos que se puede usar para
probar DB2. Esta es creada automáticamente luego de la instalación de
DB2. Verificar que la base de datos exista abriendo la herramienta DB2
Control Center. Para abrir esta herramienta, del botón Inicio de Win-
dows elegir: Inicio → Programas → IBM DB2 →DB2COPY1 (Default)
→ General Administration Tools → Control Center. Ademas se puede
iniciar el Control Center con el comando db2cc.
14. Si la base de datos SAMPLE se muestra en el Control Center, se puede
saltar al paso 16. Si no se muestra, seleccionar el item Refresh del menu
Control Center View para asegurar que se puede ver toda la información
refrescada. Si la base de datos SAMPLE sigue sin aparecer, es porque no
ha sido creada. Habrá que crearla manualmente del First Steps. Elegir
donde dice Database Creation, y luego guiarse con el Wizard para crear
la base de datos SAMPLE. Asegurarse que los objetos XML y SQL y
las opciones de datos son seleccionados, y luego clic en OK. Esta última
opción creará una base de datos UNICODE el cual fue requerido en la
version 9 para soportar XML puro (pureXML), pero no es necesario en
DB2 9.5.
15. La siguiente ventana que se visualiza en la figura 9.6 de la página 184,
aparece cuando la base de datos esta siendo creada. (Este procedimiento
puede tomar algunos minutos). Cuando la base de datos es creada, clic
en el botón OK y cerrar la herramienta First Steps.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN184

Figura 9.6: Ventana de Progreso en DB2.

1. Regresar al Control Center y verificar que la base de datos SAMPLE

aparezca en el panel Object Tree. Se debe refrescar la vista del Con-
trol Center para ver los nuevos cambios efectuados. Para hacer esto,
seleccionar el item Refresh del menu Control Center View.

2. Reiniciar la computadora. A pesar que este paso no esta mencionado

en la documentación oficial de instalación DB2, se recomienda reiniciar
el sistema (si es posible, por lo menos en Windows) para asegurarse
que todos los procesos comiencen satisfactoriamente y limpien cualquier
recurso de memoria que no han sido eliminados correctamente. Esto es
OPCIONAL.

9.2.9 Herramientas de DB2

En este apartado, se describirán algunas de las herramientas que se pueden

usar con DB2.
La elipse roja en la figura 9.7 de la página 185 muestra el área en la que
se centra este apartado.

La figura 9.8 lista todas las herramientas disponibles en el menú de inicio

de DB2. La mayoría de esas herramientas son las mismas en Linux y Windows.
La tabla 9.1 provee una lista de comandos que pueden ser usados para
iniciar algunas de las herramientas más populares tanto en Linux o Windows.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN185

Figura 9.7: Herramientas DB2.

Herramienta Comando
Editor de Comandos db2ce
Command Line processor db2
Ventana de Comandos db2cmd
Control Center db2cc
Task Center db2tc
Health Center db2hc
Configuration Assistant db2ca
First Steps db2fs

Tabla 9.1: Comandos para Iniciar algunas herramientas DB2..

CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN186

Figura 9.8: Herramientas DB2: Menú Inicio.

Centro de Control (Control Center)

La herramienta primaria para la administración de DB2 es el Centro de Con-

trol, ilustrado en la figura 9.9 de la página 187.

El Centro de Control es una herramienta de administración centralizada

que permite:

• Ver el sistema, instancias, bases de datos y objetos de la base de datos;

• Crear, modificar y manejar objetos de las bases de datos;

• Lanzar otras herramientas gráficas de DB2.

El panel del lado izquierdo provee una visión jerárquica de los objetos de
la base de datos en el sistema, teniendo una carpeta para Tablas, Vistas, etc.
Al hacer doble clic sobre una carpeta, del lado derecho se listarán todos los
objetos relacionados, como por ejemplo, todas las tablas asociadas con la base
de datos SAMPLE. Si se selecciona una tabla en la parte alta del panel, en la
parte baja del lado derecho del panel se proveerá información más específica
acerca de esa tabla.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN187

Figura 9.9: Centro de Control de DB2.

Al hacer clic derecho sobre los diferentes objetos/carpetas en el árbol de ob-

jetos es posible ver el menú con las opciones aplicables a los objetos/carpetas.
La primera vez que se lanza el Centro de Control, preguntará qué vista se
prefiere usar. La elección de la vista determina qué tipo de opciones y objetos
de la base de datos son expuestos:

• La vista básica provee la funcionalidad elemental.

• La vista avanzada muestra más opciones y mejoras.

• La vista personalizada permite ajustar las mejoras específicas, opciones

y objetos que se mostrarán.

Cómo Lanzar el Centro de Control Hay varias formas de lanzar el Cen-

tro de Control :

• Navegando a través del menú de inicio de Windows

CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN188

Figura 9.10: Icono DB2 en Windows.

• Ejecutando db2cc en la línea de comandos

• Dando clic en el icono de el Centro de Control en la barra de herramientas

de cualquier otra herramienta gráfica de DB2

• Desde el icono DB2 en Windows como se muestra en la figura 9.10 (Da

clic sobre el icono verde DB2 y seleccionar la opción Central de Control
de DB2 )

El Editor de Comandos DB2

Usando el Editor de Comandos DB2 (editor de comandos), se pueden ejecutar

comandos DB2, sentencias SQL y XQuery, analizar el plan de ejecución de una
sentencia, y ver o actualizar resultados de consultas.
La figura 9.11 de la página 189 muestra el Editor de Comandos.
En el área de entrada, se pueden ingresar varias sentencias, tan largas has-
ta que se presente el caracter de finalización. Si se presiona el botón ejecutar,
las sentencias serán ejecutadas una después de otra. Si se selecciona explíci-
tamente una sentencia, sólo esa sentencia será ejecutada. Debe existir una
conexión a la base de datos para devolver sentencias SQL, sin embargo, una
de esas sentencias puede ser una sentencia de conexión.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN189

Figura 9.11: Editor de Comandos.

CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN190

Figura 9.12: Botón Show SQL.

SQL Assist Wizard

Si no se está familiarizado con el lenguaje SQL se podría usar un asistente

para generar código SQL, el SQL Assist Wizard está disponible en el Editor
de Comandos para ayudarte. Como se muestra en la figura 5.11, invócalo
desde el Editor de Comandos dando clic sobre le último icono con el símbolo
SQL.
Su uso es bastante claro. Primero indica el tipo de sentencia SQL para la
cual se necesita asistencia (SELECT, INSERT, UPDATE, DELETE). Depen-
diendo de que sentencia se haya elegido, diferentes opciones aparecerán. En
la parte baja de la ventana mostrará cómo la sentencia SQL es construida a
partir de diferentes elecciones en el asistente.

El Botón Show SQL

La mayoría de las herramientas gráficas y los asistentes en DB2 permiten

revisar el comando actual o la sentencia SQL que es creada como resultado de
usar la herramienta para realizar tal acción. Para ver esto, da clic en el botón
Show SQL en la herramienta en la que se está trabajando, como lo muestra la
figura 9.12 y figura 9.13 en las páginas 190 y 191 respectivamente.
La posibilidad de revisar las sentencias SQL y comandos es muy útil para
aprender sintaxis SQL, y para guardar comandos o sentencias para su posterior
uso. También se puede construir scripts re usando esos comandos y sentencias
generados.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN191

Figura 9.13: Salida de un Botón Show SQL.

9.3 WebSphere Studio

9.3.1 ¿Que es WebSphere?

• WebSphere es una plataforma de Software para e-business.

• IBM WebSphere es una plataforma de IBM para desarrollo y gestión de

sitios Web y aplicaciones destinadas al comercio electrónico.

• WebSphere posee una amplia gama de servidores y aplicaciones para

proporcionar todo tipo de capacidades de negocio y ayuda al desarrollo
de las aplicaciones.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN192

Figura 9.14: Plataforma de WebSphere.

• La Plataforma de Software WebSphere está compuesta por un conjunto

de herramientas de e-business integradas y basadas en estándares abier-
tos de mercado.

• WebSphere es ideal para todas las fases de un e-business, comenzando

desde pequeños sitios Web a mega sitios [1].

La figura 9.14 de la pág. 192 representa la plataforma virtual de WebS-

phere.

Aumentando el Desempeño

Distribuye carga de trabajo entre los servidores sin interrupción del servicio a
los visitantes del sitio de la Web.
Provee servicios a cliente de calidad superior y mejor desempeño del sitio
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN193

Web.
El extraordinario crecimiento de la Web ha hecho que una infraestructura
fiable, disponible y escalable sea más necesaria que nunca. Una interrupción,
aunque sea breve, o reducción de servicio puede causar que los clientes Web,
cada vez más sofisticados y exigentes, se dirijan inmediatamente a la compe-
tencia.

Cuando clientes frustrados pueden abandonar un sitio Web con un click,

las nociones tradicionales sobre lealtad de clientes se ven severamente desafia-
das. Por eso, los propietarios de contenido necesitan una infraestructura en la
Web que sea capaz de proporcionar excelentes tiempos de respuesta de forma
consistente, tratar flash crowds (multitud de visitas rápidas) y reconocer los
clientes leales con tratamiento preferente.

La plataforma de software WebSphere proporciona una completa gama de

habilidades que permiten a los clientes la entrega de altos niveles de servicio
a todos los visitantes del sitio en la Web. Administra cargas pico en los
servidores Web, mantiene la disponibilidad del sitio en la Web, y reconoce
contenido de solicitudes de la Web para calidad-de-servicio mejor. También
permite la diferenciación de niveles de servicio con base en el tipo de cliente.

Bases y Herramientas para Construir, Diseminar y Hacer Crecer el

e-business

El e-business es parte integral del éxito del negocio principal de hoy. Actual-
mente las empresas necesitan respuesta de base de alta calidad para rápida-
mente construir e implementar aplicaciones para e-business on demand de alto
desempeño.
El ambiente de TI del e-business debe ser construido sobre una sólida Base
y con Herramientas que sean integradas y que tengan desempeño confiable.
Los tiempos de detención del sistema y los problemas de desempeño crean un
riesgo real para el negocio. Este riesgo se multiplica debido a la diversidad de
los ambientes de TI.
Corporaciones de mayor porte pueden tener amplia diversidad dentro de
su propia empresa. Corporaciones de menor porte encontrarán diversidad al
dividirse más allá de las fronteras de su empresa hacia el resto de su cadena
de valor. El software IBM WebSphere ayuda a reducir este riesgo del negocio.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN194

El WebSphere para la Integración en el e-Business On Demand

En el núcleo del e-business on demand se encuentra la integración de negocios,

que comprende lo siguiente:

• Transformarse en un negocio on demand requiere construir una infraes-

tructura dinámica basada en procesos de negocio críticos estrechamente
integrados y racionalizados.
• Procesos eficientemente conectados en toda la compañía y con las de
socios comerciales claves, proveedores y clientes.
• Procesos de negocio integrados que proporcionan flexibilidad, la capaci-
dad de responder inmediatamente a casi todas las demandas de clientes,
oportunidad de mercado o amenaza externa.

Para obtener esta flexibilidad, la clave es una estrategia de integración bien

planificada, basada en una plataforma robusta. Una plataforma para:

• Automatizar y administrar procesos de la cadena de valor.

• Cortar drásticamente tiempos de ciclo y costos.
• Dar más velocidad al time-to-market.
• Aumentar la agilidad del negocio frente a las presiones competitivas.

Las compañías que evolucionan hacia el e-business on demand hacen del

WebSphere Business Integration el principio básico de su estrategia de inte-
gración. WebSphere proporciona una sólida base de integración con las capa-
cidades completas de e-business que se necesitan en una era on demand.
Estas cinco capacidades incluyen:

• Modelar : Diseñar, simular y planificar procesos de negocio.

• Integrar: Vincular personas, procesos, aplicaciones, sistemas y datos.
• Conectar : Expandir procesos a sus clientes y socios.
• Monitorear: Controlar y rastrear procesos de negocio.
• Administrar: Revisar, analizar y mejorar procesos y desempeño.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN195

Plataforma de Software

La complejidad creciente de los aplicativos de e-business crea muchos des-

afíos. Es necesario conseguir que los aplicativos le permitan comercializar
rápidamente, con contenido relevante y personalizado [9].
Los aplicativos deben ser escalables, fiables y se deben integrar completa-
mente con los sistemas back-end para proteger las inversiones existentes. El
equipo debe poseer las más actualizadas habilidades de programación para
acompañar el ciclo de vida del e-business.
Se necesita una plataforma completa, escalable y flexible que proporcione
soporte a la construcción y diseminación de aplicativos de e-business. Las
soluciones de software WebSphere ofrecen las herramientas necesarias para
alcanzar los objetivos de e-business.
Al proporcionar un banco de trabajo abierto que integre y simplifique
diferentes tareas, roles y herramientas, el software WebSphere ayuda a que el
equipo desarrolle, entregue y administre los aplicativos de e-business [3].
El ambiente de desarrollo del software WebSphere:

• Da soporte al desarrollo y cambios rápidos de nuevos aplicativos uti-

lizando un paradigma de desarrollo basado en reglas, permitiendo que
todos utilicen el mismo ambiente y reduciendo costes de entrenamiento.

• Proporciona código pre-construido, pre-testeado.

• Proporciona herramientas especializadas para página Web y desarrollo

de módulos migrables.

Adicionalmente, servicios basados en estándares Web permiten mezclar y

combinar componentes funcionales de diferentes orígenes de tal forma que se
puede proveer nuevos procesos y servicios al mercado rápida y eficientemente.
La capacidad de un portal de negocios tiene importancia crítica para per-
mitir que las personas interactúen y transaccionen de forma personalizada con
diversos recursos de negocios. Empieza dejando a la medida los ambientes
de usuarios para sus necesidades específicas, integrándolo entonces con otros
usuarios para permitir colaboración en tiempo real, y con los diversos ambien-
tes de TI.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN196

Todo esto permite que las personas trabajen en conjunto de forma más
productiva mientras actúan sobre la información que necesitan. La capacidad
del portal de negocios es proporcionada por la familia WebSphere Portal y la
familia WebSphere Commerce es un conjunto de soluciones eficaces del lado de
ventas para tratar los desafíos encontrados en ambientes de clientes y socios
comerciales [1].

Al expandir el ambiente de usuario para permitir que las personas accedan

a la información y actúen en cualquier lugar, en cualquier momento, usando
su elección de dispositivos y mecanismos de interacción significa acceso on
demand y las familias WebSphere Everyplace y WebSphere Voice, son software
para expandir aplicaciones de e-business a dispositivos móviles, permitiendo
interacción de voz natural con aplicaciones y datos.

WebSphere for Commerce - Soluciones B2B

Hoy, el e-commerce consiste en realizar negocios con sus clientes, proveedores

y contratistas comerciales sin encontrar dificultades de tiempo, limitaciones
organizacionales o fronteras geográficas.
Con el software With WebSphere Commerce, se establecen relaciones más
estrechas, más productivas con sus clientes y contratistas comerciales en todos
los puntos de contacto. Impulsa los procesos existentes reduzciendo sus costes.
Facilita que sus clientes y contratistas comerciales hagan negocios hoy y que
continúen mañana.
Con el IBM WebSphere Commerce Business Edition, se puede optimizar
procesos de negocio a través de la automatización e integración con sus apli-
cativos para los negocios principales, consigue el mayor impacto por el menor
coste y el ROI más rápido, fortalece las relaciones de negocios con clientes y
contratistas, y disemina un e-business verdaderamente global.

WebSphere for Commerce - Soluciones B2C

El software WebSphere Commerce le permite ir a la línea de las ventas online

a los consumidores.

Crea campañas de marketing dinámicas, fija como objetivo diferentes seg-

mentos de mercado, elabora promociones de producto personalizadas, y mejo-
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN197

ra el servicio a clientes. Esta solución ayuda a crear rápidamente y mantener

eficientemente un sitio interactivo, de alto volumen. Un sitio que atraiga con-
sumidores y los haga volver, obteniendo rápido retorno de inversión.
La solución WebSphere Commerce proporciona:

• Personalización sofisticada del B2B para ayudar a administrar las rela-

ciones de negocio.

• Tecnología de ventas asistidas para conducir a los clientes y contratistas

a través de la agrupación de requisitos y del proceso de selección del
producto.
• Herramientas de cooperación online y de formación de equipo virtual
para mejorar la eficacia de contratistas comerciales, canal y clientes.

• Administración integrada de contrato para soportar contratos complejos

y políticas de negocio.
• Administración de pedidos anticipado resultando en capacidades de op-
timización de operaciones.
• Capacidades multi-culturales para llegar a clientes globales.
• Capacidades avanzadas de inteligencia de negocios para decisiones fun-
damentas del e-business.

WebSphere for Commerce-Soluciones de Portal

La integración del WebSphere Commerce y WebSphere Portal permite que

las empresas se dirijan a múltiples sectores con necesidades de personaliza-
ción positivas de soluciones de comercio tanto para las áreas B2B o B2C.
Actualmente, muchas empresas crean sitios separados para cada división, lo
que demanda mucho tiempo y cuesta caro.
El abordaje racionalizado proporciona rápido retorno de inversión al elimi-
nar la necesidad de que la empresa mantenga múltiples sitios. Las empresas
también aumentan la eficiencia de interacciones con clientes y contratistas, lo
que mejora la retención del cliente.
Los productos IBM WebSphere Commerce y WebSphere Portal proporcio-
nan un único punto de interacción con información dinámica y personalizada,
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN198

aplicativos, procesos y personas, que son esenciales para construir portales

exitosos para el B2B y B2C .

Con el portal habilitado para el comercio, se puede crear un ambiente

personalizado de comercio provechoso para ambos ambientes, B2B y B2C :

• Ambientes B2B: Organizar eficientemente información online, servi-

cios y aplicativos para contratistas de negocio y proveedores a lo largo
de múltiples divisiones en un portal.

• Ambientes B2C o de ventas al por menor: Obtener ventas cruza-

das e impulsar los beneficios, mediante la oferta de acceso a productos,
información y servicios desde la Web y de dispositivos inalámbricos, así
como acceso consolidado a catálogos múltiples.

Con un portal de e-commerce integrado, se les puede ofrecer a los clientes,

contratistas y proveedores acceso 24 x 7 a los aplicativos online - rápida y
fácilmente.

WebSphere for Commerce-Soluciones Digital Media

Empresas de medios con volúmenes crecientes de activos digitales -fotos, vídeo

clips, archivos en audio, ilustraciones e imágenes animadas- enfrentan nuevas
exigencias reguladoras y el desafío de colocar esos activos disponibles online.
El software IBM WebSphere permite administrar estos activos digitales más
eficazmente, alcanzando clientes en todos el mundo a través de la Web.
IBM WebSphere Commerce para Medios Digitales permite almacenar, bus-
car, ver, administrar, colaborar, comprar, vender y hacer download de activos
digitales, alcanzando clientes en todo el mundo por la Web. Esta nueva oferta
de servicio de e-commerce combina el software WebSphere Commerce aproba-
do por la industria con las capacidades del IBM Content Manager, reforzado
por la tecnología Java.
WebSphere Commerce para Medios Digitales permite enriquecer la expe-
riencia del consumidor y la interfase de compra B2B, creando nuevas relaciones
con clientes al mismo tiempo en que fortalece las existentes y ayudando a ge-
nerar y aumentar ganancias así como sus márgenes de beneficios.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN199

WebSphere ofrece un amplio portafolio de soluciones clasificadas en tres

áreas críticas:

• Infraestructura y herramientas de Desarrollo (Fundation & To-

ols):

— Application server.
— WebSphere studio:
∗ IBM WebSphere Studio Site Developer.
∗ IBM WebSphere Studio Application Developer.
∗ IBM WebSphere Studio Application Developer Integration Edi-
tion.
∗ IBM WebSphere Studio Enterprise Developer.
∗ IBM WebSphere Studio Homepage Builder.
— Host Access.

• Alcance y experiencia con el usuario (Business Portals):

— WebSphere Portal.
— WebSphere Everyplace.
— WebSphere Commerce.

• Integración de negocio (Business Integration):

— WebSphere Business Integrator.

— WebSphere MQ Integrator.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN200

Application Server

La plataforma de alto desempeño y extrema escalabilidad para diseminar

aplicativos dinámicos de e-business, WebSphere Application Server, Versión
4.0, proporciona las funciones esenciales de e-business de manipulación de
transacciones y ampliación de datos back-end del negocio y aplicativos para la
Web. La plataforma ayuda a construir aplicativos que ejecutan esas funciones
con seguridad sólida, fiabilidad y escalabilidad.

Servidor de Aplicaciones

El servidor de aplicaciones colabora con el servidor Web intercambiando peti-

ciones de clientes y respuestas de aplicaciones. Puede definir varios servidores
de aplicaciones, cada uno de ellos ejecutándose en su propia Máquina Virtual
Java (JVM).

Contenedor de EJB

El contenedor de EJB proporciona los servicios de tiempo de ejecución ne-

cesarios para desplegar y gestionar componentes EJB, de ahora en adelante
conocidos como enterprise beans. Es un proceso de servidor que maneja peti-
ciones para beans de sesión y beans de entidad.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN201

Los enterprise beans (dentro de los módulos EJB ) instalados en un servi-

dor de aplicaciones no se comunican directamente con el servidor; en su lugar,
el contenedor de EJB ofrece una interfaz entre los enterprise beans y el servi-
dor. Juntos, el contenedor y el servidor proporcionan el entorno de tiempo de
ejecución del bean.
El contenedor proporciona muchos servicios de bajo nivel, incluido el so-
porte de hebras y transacciones. Desde un punto de vista administrativo, el
contenedor gestiona el almacenamiento y la recuperación de datos para los
beans que contiene. Un solo contenedor puede gestionar más de un archivo
JAR de EJB.

Contenedor Web

Los servlets y los archivos JSP (Java Server Pages) son componentes del
servidor que se utilizan para procesar peticiones de clientes HTTP como, por
ejemplo, navegadores Web. Se encargan de la presentación y el control de
la interacción del usuario con los datos de aplicación subyacentes y la lógica
empresarial. También pueden generar datos formateados, como XML, para
que los utilicen otros componentes de aplicación.
El contenedor Web procesa servlets, archivos JSP y otros tipos de inclu-
siones de servidor. Los servlets anteriores a J2EE se ejecutarán en un motor
de servlets. Cada contenedor Web contiene automáticamente un único gestor
de sesiones.
Cuando se manejan los servlets, el contenedor Web crea un objeto de
petición y un objeto de respuesta, e invoca el método de servicio de servlets.
El contenedor Web invoca el método destroy() del servlet cuando corresponda
y descarga el servlet, y después la JVM ejecuta la recolección de basura.

Contenedor de Clientes de Aplicaciones

Los clientes de aplicaciones son programas Java que se ejecutan normalmente

en un sistema de sobremesa con una interfaz gráfica de usuario (GUI) . Tienen
acceso a toda la gama de componentes y servicios de servidor J2EE.

El contenedor de clientes de aplicaciones maneja programas de aplicacio-

nes de Java que acceden a los beans enterprise, Java Database Connectivity
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN202

(JDBC) y las colas de mensajes de Java Message Service. El programa Cliente

de aplicaciones J2EE se ejecuta en las máquinas cliente.

Este programa sigue el mismo modelo de programación Java que otros

programas Java; no obstante, el cliente de aplicaciones J2EE depende del
tiempo de ejecución del cliente de aplicaciones para configurar su entorno de
ejecución, y utiliza el espacio de nombres JNDI (Java Naming and Directory
Interface) para acceder a los recursos.

Contenedor de Applets

Un applet es una clase Java de cliente que se ejecuta normalmente en un

navegador Web, pero que también se pueden ejecutar en otros dispositivos y
aplicaciones de cliente.
Los applets se utilizan a menudo junto con páginas HTML para mejorar
la experiencia de usuario que ofrece el navegador Web. También se pueden
utilizar para pasar parte de la carga de trabajo de proceso del servidor al
cliente.
El contenedor de applets maneja applets de Java incorporados en docu-
mentos HTML (HyperText Markup Language) que residen en una máquina
cliente remota respecto al servidor de aplicaciones. Con este tipo de cliente,
el usuario accede a un bean enterprise en el servidor de aplicaciones mediante
el applet de Java en el documento HTML.

Sistema Principal Virtual

Un sistema principal virtual es una configuración que permite que una única
máquina de sistema principal parezca varias máquinas de sistema principal.
Los recursos asociados con un sistema principal virtual no pueden compartir
datos con recursos asociados con otro sistema principal virtual, incluso si los
sistemas principales virtuales comparten la misma máquina física.

Los sistemas principales virtuales permiten al administrador asociar apli-

caciones Web con un sistema principal particular configurado para la máquina
que ejecuta la aplicación.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN203

Arquitecturas de Tres Niveles

WebSphere Application Server proporciona la capa de la lógica de aplicación

en una arquitectura de tres niveles, lo que permite a los componentes de cliente
interactuar con los recursos de datos y las aplicaciones heredadas.
De manera colectiva, las arquitecturas de tres niveles son modelos de pro-
gramación que permiten la distribución de la funcionalidad de la aplicación
entre tres sistemas independientes, normalmente:

• Componentes de cliente que se ejecutan en estaciones de trabajo locales

(nivel uno).

• Procesos que se ejecutan en servidores remotos (nivel dos).

• Una colección discreta de bases de datos, gestores de recursos y aplica-

ciones de sistema principal (nivel tres).

Primer nivel:

— La responsabilidad de la presentación y la interacción con el usuario

reside en los componentes del primer nivel. Estos componentes de
cliente permiten al usuario interactuar con los procesos del segundo
nivel de forma segura e intuitiva. WebSphere Application Server da
soporte a varios tipos de clientes.
— Los clientes no acceden directamente a los servicios del tercer nivel.
Por ejemplo, un componente de cliente proporciona un formulario
en el que el cliente solicita los productos.
— El componente de cliente entrega este pedido a los procesos del
segundo nivel, que comprueban las bases de datos del producto y
realizan las tareas necesarias para la facturación y el envío.

Segundo nivel (capa de la lógica de aplicación):

— Los procesos del segundo nivel se conocen normalmente como la

capa de la lógica de aplicación. Estos procesos gestionan la lógica
empresarial de la aplicación y pueden acceder a los servicios del
tercer nivel.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN204

— La capa de la lógica de aplicación es donde se produce la mayor

parte del trabajo de los procesos.
— Varios componentes de cliente pueden acceder simultáneamente a
los procesos del segundo nivel, por lo que esta capa de la lógica de
aplicación debe gestionar sus propias transacciones.
— Si varios clientes intentan realizar un pedido del mismo artículo,
del que sólo queda uno, la capa de la lógica de aplicación debe
determinar quién tiene derecho a ese artículo, actualizar la base
de datos para reflejar la compra e informar a los otros clientes de
que el artículo ya no está disponible. Sin una capa de la lógica de
aplicación, los componentes de cliente acceden a la base de datos
del producto directamente.
— La base de datos es necesaria para gestionar sus propias conexiones,
normalmente bloqueando un registro que se está procesando. El
bloqueo se puede realizar simplemente cuando un artículo se coloca
en un carro de compra, para evitar que los demás clientes consideren
la posibilidad de compra.
— La separación del segundo y el tercer nivel reduce la carga en los
servicios del tercer nivel, puede mejorar el rendimiento general de
la red y permite una gestión de conexiones más elocuente.

Tercer nivel:

— Los servicios del tercer nivel están protegidos del acceso directo de
los componentes de cliente al residir en una red segura.
— La interacción debe producirse a través de los procesos del segundo
nivel.

Los tres niveles deben poder comunicarse entre ellos. Los protocolos abier-
tos estándar y las API expuestas simplifican esta comunicación. Los com-
ponentes de cliente se pueden escribir en cualquier lenguaje de programación
como, por ejemplo, Java o C++, y se puedan ejecutar en cualquier sistema
operativo, siempre que pueden comunicarse con la capa de la lógica de aplica-
ción.

De la misma forma, las bases de datos del tercer nivel pueden tener cual-
quier diseño, siempre que la capa de la lógica de aplicación pueda consultarlas
y manipularlas. La clave de esta arquitectura es la capa de la lógica de apli-
cación.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN205

Familias del Producto

El ambiente operativo principal debe ser una base confiable que permita de
forma segura, transacciones e implementaciones de servicios en la Web de for-
ma abierta. En otras palabras, debe ser una infraestructura abierta, basada
en servicios, como la proporcionada por la familia del WebSphere Application
Server, un mecanismo de alto desempeño, extremadamente escalable para apli-
caciones de e-business dinámicos.
En el caso en que nuevas aplicaciones tengan que ser desarrolladas, estas
necesitan ser creadas de forma que capturen el conocimiento de negocio de
forma eficaz, y construidas para integrarse, de manera que se ajusten rápida-
mente al ambiente existente, y a impulsarlo. Esta capacidad de desarrollo de
aplicaciones es proporcionada por la familia WebSphere Studio [1].

Las inversiones existentes en sistemas y aplicaciones, tan dispares cuanto

puedan ser, deben ser utilizadas por el e-business para bajar costos y preservar
inversiones. Esta capacidad de modernización de la empresa es proporcionada
por herramientas especializadas de desarrollo de la familia WebSphere Studio
y a través de la familia WebSphere Host Integration, que es software destinado
a impulsar y extender los activos legados para nuevas soluciones de e-business.
El WebSphere Host Integration Solution puede llevar sus aplicativos pre-
existentes a la Web, ¡rápidamente! extiende los aplicativos de host a la Web
y proporciona software para la creación y diseminación de nuevos aplicati-
vos para host de acceso a e-business, sin necesidad de cambios a los propios
aplicativos existentes.
Tanto si se necesita una simple entrega de página Web, darle un nuevo as-
pecto a un aplicativo preexistente, o crear soluciones Java sofisticadas, el IBM
WebSphere Host Integration Solution permite rápida y flexiblemente integrar
datos críticos de la empresa la Web [9].
El WebSphere Host Publisher proporciona la manera más rápida, más fácil
para implementar e-business mediante la ampliación del alcance de aplicativos
a los usuarios de browsers en la Web y nuevos aplicativos WebSphere, sin al-
teraciones a aplicativos existentes. Amplio soporte a aplicativos preexistentes
y escalabilidad, seguridad, y características de disponibilidad, hacen del Host
Publisher la solución ideal para diseminaciones de nuevos e-business. Tanto
si su objetivo es coste menor o mayores ganancias a través de diseminaciones
Web-to-Host o a través del desarrollo de nuevos aplicativos para e-business.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN206

Las características clave son:

• Proporciona integración Web con Terminal Virtual 3270, 5250(VT), Java

Database Connectivity (JDBC) y aplicativos Java host sin necesidad de
cambios al propio aplicativo existente.

• Permite la fácil consolidación de múltiples aplicativos en un aplicativo

compuesto único o página Web para presentación a usuarios de la Web.

• Se integra con la Edición Avanzada del WebSphere Application Server

e incluye el WebSphere Studio para proporcionar una solución completa
para la entrega de datos del host a usuarios de la Web y para nuevos
aplicativos WebSphere para e-business.

• Opera con el Websphere Transcoding Publisher para extender datos del

host a tecnologías penetrantes como los dispositivos SmartPhone y asis-
tentes digitales personales.

• Proporciona una amplia gama de opciones de acceso al Host: HTML a

browsers de la Web, XML Gateway para aplicativos Java, y Host Pu-
blisher Integration Objects reutilizables para aplicativos de Java applets
aplicativos.

• Ayuda a impulsar la inversión en Host Publisher utilizando objetos de

integración basados en estándares abiertos de la industria que se pueden
reutilizar en nuevos aplicativos de e-business, reduciendo el coste y los
riesgos asociados al desarrollo de nuevos aplicativos.

• Puede ser implementado sin programación utilizando una simple inter-

face gráfica del tipo wizard (asistente).

• Remote Integration Objects (RIO) permite que Integration Objects sean

ejecutados en el servidor Host Publisher para ser accedido por aplicativos
con tecnología Java siendo ejecutados en cualquier lugar de la red.

• El XML Gateway torna datos existentes de aplicativos de host dispo-

nibles para aplicativos cliente o Business Partner Java en un formato
XML.

• El 3270/5250 HTML Mapper proporciona un emulador HTML de nivel

de entrada load-and-go dentro de una ventana de browser de la Web.
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN207

La familia de Herramientas WebSphere Studio

WebSphere Studio proporciona un conjunto de herramientas para facilitar el

desarrollo de aplicaciones Web. Posee un entorno visual para la distribución de
los elementos de una página Web usando Java Server Pages (JSPs), HTML,
Java Script, y DHTML, ayudando además, a un rápido desarrollo de aplica-
ciones de comercio electrónico con contenido dinámico. Una fácil integración
entre WebSphere Studio, Java VisualAge, y WebSphere Application Servers
hace que la comunicación y el trabajo en grupo para la creación de aplicacio-
nes de comercio electrónico basadas en Web, sea mucho más sencillo.
La familia IBM WebSphere Studio, consta de una serie de productos ba-
sados en Eclipse, que es una plataforma de código abierto para crear herra-
mientas de desarrollo de aplicaciones. Cada producto de la familia WebSphere
Studio presenta el mismo entorno de desarrollo integrado (IDE ) y una base
común de herramientas, por ejemplo para el desarrollo Java y Web. La dife-
rencia entre estos productos radica en las herramientas de conector que están
disponibles en cada configuración.
WebSphere Studio es un único entorno de desarrollo completo diseñado
para satisfacer todas las necesidades de desarrollo, desde interfaces Web a
aplicaciones del lado del servidor, desde el desarrollo individual a desarrollos
avanzados en equipo, desde el desarrollo Java a la integración de aplicaciones.
Con varias configuraciones disponibles, así como extensiones de IBM y de
terceros, la familia WebSphere Studio permite a los desarrolladores utilizar un
único entorno de desarrollo diseñado para satisfacer sus necesidades específicas.
Esta visión general describe las siguientes configuraciones:

• IBM WebSphere Studio Site Developer.

• IBM WebSphere Studio Application Developer.

• IBM WebSphere Studio Application Developer Integration Edition.

• IBM WebSphere Studio Enterprise Developer.

• IBM WebSphere Homepage Builder.

Tanto para los usuarios que estén construyendo páginas Web como para
los grandes equipos que construyan aplicaciones Web avanzadas, la familia
CAPÍTULO 9. HERRAMIENTAS UTILIZADAS PARA LA APLICACIÓN208

WebSphere Studio proporciona herramientas y asistentes para simplificar las

tareas de desarrollo Web. El entono incluye una interfaz intuitiva de tipo WY-
SIWYG (....lo que se ve es lo que se obtiene....) que permite a los diseñadores
Web novatos crear y publicar sitios Web al tiempo que incorpora lo último en
tecnología Web, incluyendo Java Script, HTML dinámico y hojas de estilo en
cascada.

El entorno completo y fácil de utilizar de la familia WebSphere Studio

permite construir aplicaciones Java, adaptadores de aplicaciones y servicios
Web. También puede integrar la aplicación con sistemas de fondo utilizan-
do herramientas visuales para crear adaptadores de aplicaciones y desarrollar
componentes de GUI Java (Swing y AWT ) mediante el Editor visual para
Java.

Para construir aplicaciones J2EE complejas y escalables con una calidad

homogénea en menor tiempo, la familia WebSphere Studio proporciona confi-
guraciones para el desarrollo rápido de aplicaciones que utilizan el poder de la
automatización de lógica empresarial para proporcionar sistemas de empresa
altamente configurables y escalables con una codificación manual mínima.
Esta familia de productos ofrece un entorno de desarrollo integrado que
abarca todos los cometidos de desarrollo de e-Business: desarrollador Web,
desarrollador Java, programador de empresa, analista de gestión y arquitecto
de sistemas.

9.4 Apache Tomcat

9.4.1 Descripción

Tomcat (también llamado Jakarta Tomcat o Apache Tomcat) funciona como

un contenedor de servlets desarrollado bajo el proyecto Jakarta en la Apache
Software Foundation. Tomcat implementa las especificaciones de los servlets
y de JavaServer Pages (JSP) de Sun Microsystems.

9.4.2 Entorno

Tomcat es un servidor web con soporte de servlets y JSPs. Tomcat no es un

servidor de aplicaciones, como JBoss o JOnAS. Incluye el compilador Jasper,
que compila JSPs convirtiéndolas en servlets. El motor de servlets de Tomcat
a menudo se presenta en combinación con el servidor Web Apache.

Tomcat puede funcionar como servidor web por sí mismo. En sus inicios
existió la percepción de que el uso de Tomcat de forma autónoma era sólo
recomendable para entornos de desarrollo y entornos con requisitos mínimos
de velocidad y gestión de transacciones. Hoy en día ya no existe esa percepción
y Tomcat es usado como servidor Web autónomo en entornos con alto nivel
de tráfico y alta disponibilidad.
Dado que Tomcat fue escrito en Java, funciona en cualquier sistema ope-
rativo que disponga de la máquina virtual Java.
Capítulo 10

Aplicación Web

10.1 Descripción General

El presente trabajo se basa en el investigación de software base para el estudio

de un nuevo acercamiento a las aplicaciones Web. Es un proyecto pensado
para demostrar que AJAX no es solo técnicamente importante, sino también
práctico para aplicaciones en el mundo real.
Los mayores desafíos al crear aplicaciones AJAX no son técnicos. Las
tecnologías centrales son maduras, estables y bien conocidas. En cambio, los
desafíos son para los diseñadores de estas aplicaciones: olvidar las limitaciones
de la Web, y comenzar a imaginar un rango más amplio y rico de posibilidades.
El objetivo es realizar una aplicación AJAX que elimine la naturaleza
arrancar-frenar- arrancar-frenar de la interacción en la Web introduciendo
un intermediario -un motor AJAX - entre el usuario y el servidor. Esto suma
una capa a la aplicación, pero no la retorna menos reactiva como se verá a
continuación.

La aplicación desarrollada es un sitio Web para la empresa “Baterías

RAC ”, la misma correrá sobre una plataforma Windows mediante la utili-
zación del servidor de aplicaciones Tomcat v5.0. y Java v6.
La misma posee dos módulos bien definidos:

• Módulo del Usuario: posee 6 secciones.

210
CAPÍTULO 10. APLICACIÓN WEB 211

Figura 10.1: Pagina inicial del sitio

• Módulo Administrador: posee 3 secciones.

La figura10.1 de la página211 visualiza la página inicial del sitio, la misma

posee el acceso a todos los módulos y secciones del sistema.
Los diferentes módulos con sus correspondientes secciones se explicarán en
detalle a continuación.

10.1.1 Módulo del Usuario

Sección Productos

En la sección productos el usuario puede consultar información de los produc-

tos que ofrece la empresa “Baterías RAC”, la página correspondiente se puede
visualizar en la figura 10.2 de la página 212.
Esta sección permite visualizar videos informativos del proceso de fabrica-
ción utilizado por la empresa y consultar acerca del producto más apropiado
CAPÍTULO 10. APLICACIÓN WEB 212

Figura 10.2: Sección Productos.

CAPÍTULO 10. APLICACIÓN WEB 213

Figura 10.3: Seccion catalogos

para su vehículo. A su vez la sección Productos posee tres subsecciones que

son:

• Catálogo: visualiza una lista de los productos que ofrece la empresa. La

página se puede observar mediante la figura 10.3 de la página 213 .
• Videos: muestra una lista de videos informativos acerca de los procesos
de fabricación utilizados por la empresa. La página se puede observar
mediante la figura 10.4 de la página 214.
• ¿Cuál es su Batería?: visualiza una serie de opciones para permitir al
usuario encontrar el producto más adecuado a sus necesidades. La pági-
na se puede observar mediante la figura 10.5 de la página 215.

Sección Historia

Realiza una breve descripción de la historia de la empresa, su nacimiento y

evolución. La página correspondiente se visualiza en la figura 10.6 de la página
CAPÍTULO 10. APLICACIÓN WEB 214

Figura 10.4: Seccion videos

216.

Sección Contacto

Presenta al usuario un espacio de comunicación con la empresa y le permite

detallar sus inquietudes, sugerencias y solicitudes. El mismo permite enviar
vía e-mail la información a la empresa. La misma se muestra en la figura 10.7
de la página 217.

Sección Ubicación

En esta sección se utilizan las facilidades ofrecidas por una de las aplicaciones
más famosas del mundo Web que se caracteriza por el uso de tecnologías
basadas en Ajax. Esta aplicación es la del Google Maps. Se puede visualizar
mediante la figura 10.8 de la página 218.
CAPÍTULO 10. APLICACIÓN WEB 215

Figura 10.5: Seccion cual es su bateria

10.1.2 Módulo del Administrador

Este módulo permite al administrador actualizar el sitio en forma dinámica.

La página se muestra en la figura de la página.

Sección Agregar Baterías

Esta sección permite al administrador realizar la carga de marcas, modelos y

baterías correspondientes.

Agregar Videos

Esta sección permite dar de alta los videos que luego visualizará el usuario en
la sección videos.
CAPÍTULO 10. APLICACIÓN WEB 216

Figura 10.6: Sección Historia.

CAPÍTULO 10. APLICACIÓN WEB 217

Figura 10.7: Sección Contacto.

CAPÍTULO 10. APLICACIÓN WEB 218

Figura 10.8: Sección Ubicación.

CAPÍTULO 10. APLICACIÓN WEB 219

Figura 10.9: Módulo del Administrador.

Consultar/Elimnar

Esta sección permite realizar consultas de baterías y videos cargados en las

secciones anteriores y la opción de eliminarlos.

10.2 Estructura de Datos Utilizada

A continuación se mostrará la estructura utilizada por la aplicación, conte-

niendo base de datos con sus tablas. El motor de base de datos elegido para
tal fin fue el DB2 Express C9.
En el gráfico 10.10 de la página 220, se puede observar la estructura com-
pleta utilizada por la aplicación.
CAPÍTULO 10. APLICACIÓN WEB 220

Figura 10.10: Estructura de la Base de Datos.

CAPÍTULO 10. APLICACIÓN WEB 221

Figura 10.11: Tabla ADMIN.

10.2.1 Estructura de Tablas

Las tablas que integran la base de datos RAC son las siguientes:

• ADMIN: contiene los datos que manejan el control de acceso del admi-
nistrador del sistema. Se puede apreciar su estructura en la figura 10.11
de la página 221 y posee los siguientes campos de datos:

— COD_ADMIN: campo del tipo INTEGER cuyos valores son auto-

generados. Representa la clave primaria de la tabla.
— USUARIO: campo del tipo VARCHAR que almacena el nombre del
usuario.
— CLAVE: campo del tipo VARCHAR que contiene la clave del usua-
rio.

• ANIO: contiene los datos correspondientes a los años. Se puede visualizar

su contenido en la figura 10.12 de la página 10.12 y su estructura de
CAPÍTULO 10. APLICACIÓN WEB 222

Figura 10.12: Muestreo del Contenido de la tabla ANIO.

campos es la siguiente:

— COD_ANIO: campo de datos del tipo INTEGER que contiene va-

lores autogenerados. Representa la clave primaria de la tabla.
— DESC_ANIO: campo de datos del tipo VARCAHAR que almacena
los valores correspondientes a los años.

• COMBUSTIBLE: contiene los datos correspondientes a los tipos de com-

bustible. Se puede visualizar su contenido en la figura 10.13 de la página
223 y su estructura de campos es la siguiente:

— COD_COMBUSTIBLE: campo de datos del tipo INTEGER que

contiene valores autogenerados. Representa la clave primaria de la
tabla.
CAPÍTULO 10. APLICACIÓN WEB 223

Figura 10.13: Tabla COMBUSTIBLE.

— DESC_COMBUSTIBLE: campo de datos del tipo VARCAHAR

que almacena los valores correspondientes a los tipos de combusti-
ble.

• MARCA: contiene los datos correspondientes a las marcas de los vehícu-

los. Se puede visualizar su contenido en la figura 10.14 de la página 224
y su estructura de campos es la siguiente:

— COD_MARCA: campo de datos del tipo INTEGER que contiene

valores autogenerados. Representa la clave primaria de la tabla.
— DESC_MARCA: campo de datos del tipo VARCHAR que alma-
cena los valores correspondientes a las descripciones o nombres de
las marcas.
CAPÍTULO 10. APLICACIÓN WEB 224

Figura 10.14: Tabla MARCA.

CAPÍTULO 10. APLICACIÓN WEB 225

Figura 10.15: Tabla MODELO.

• MODELO: contiene los datos correspondientes a los modelos de los ve-

hículos. Se puede visualizar su contenido en la figura 10.15 de la página
225 y su estructura de campos es la siguiente:

— COD_MODELO: campo de datos del tipo INTEGER que contiene

valores autogenerados. Representa la clave primaria de la tabla.
— DESC_MODELO: campo de datos del tipo VARCHAR que alma-
cena los valores correspondientes a las descripciones o nombres de
las marcas.

• BATERIA: posee los datos correspondientes al producto que ofrece la

empresa, las baterías están clasificadas según marca, modelo, año y com-
bustible del vehículo. Su estructura de datos se puede apreciar en la
figura de la página.
CAPÍTULO 10. APLICACIÓN WEB 226

Figura 10.16: Estructura de datos de la tabla BATERIA.

La tabla BATERIA posee las siguientes claves, primaria y foráneas que se

muestran en el gráfico 10.17 de la página 227.

• VIDEO: posee los datos correspondientes a los videos que contienen

imágenes del proceso de fabricación utilizado por la empresa. La es-
tructura de campos se puede visualizar en la figura de la página.

10.3 Ejemplos de Código Fuente Utilizados

10.3.1 HTML

A continuación se transcribe un ejemplo de Html utilizado por la aplicación,

el mismo corresponde a la página principal o de bienvenida del sitio.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />

<head>
CAPÍTULO 10. APLICACIÓN WEB 227

Figura 10.17: Definición de Claves de la Tabla BATERIA.

CAPÍTULO 10. APLICACIÓN WEB 228

Figura 10.18: Estructura de Campos de la Tabla VIDEO.

CAPÍTULO 10. APLICACIÓN WEB 229

<title>:. R A C :.</title>

<link href=“comunes/estilo-rac.css” rel=“stylesheet” type=“text/css”>

<SCRIPT language=“JavaScript” src=“js/ScriptGeneral.js”></SCRIPT>

</head>

<script language=“JavaScript” type=“text/JavaScript”>

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)

x.src=x.oSrc;

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;

i<a.length; i++)

if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf(”?”))>0

&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)

x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=

MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

CAPÍTULO 10. APLICACIÓN WEB 230

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=

new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)

x.oSrc=x.src; x.src=a[i+2];}

</script>

<body topmargin=“0” bottommargin=“0” leftmargin=“0” rightmargin=“0”

onLoad=“MM_preloadImages(‘imagenes/bo_index.png’,

‘imagenes/bo_historia.png’,

‘imagenes/bo_productos.png’,

‘imagenes/bo_ubicacion.png’)”>

<table border=“0” cellpadding=“0” cellspacing=“0” width=“100%”

height=“100%”>

<tr>

<td width=“25%” background=“imagenes/relleno.png”>&nbsp;</td>

<td width=“50%” valign=“top”>

<table width=“700” border=“0” height=“100%” cellpadding=“0”

cellspacing=“0”>

<tr>

<td valign=“top”><img src=“imagenes/encabezado.png”></td>

</tr>

<tr><td bgcolor=“#ACC880”>
CAPÍTULO 10. APLICACIÓN WEB 231

<table border=“0” cellspacing=“0” cellpadding=“0” align=“center”>

<tr>

<td><a href=“JavaScript:RACHtml(‘principal’)”

onMouseOut=“MM_swapImgRestore()”

onMouseOver=“MM_swapImage(‘Image1’,”,‘imagenes/bo_index.png’,1)”>

<img name=“Image1” border=“0” src=“imagenes/b_index.png”

alt=“Principal”>

</a></td> <td><a href=“JavaScript:RACHtml(‘historia’)”

onMouseOut=“MM_swapImgRestore()”

onMouseOver=“MM_swapImage(‘Image2’,”,

‘imagenes/bo_historia.png’,1)”>

<img name=“Image2” border=“0”

src=“imagenes/b_historia.png” alt=“Historia”></a></td>

<td><a href=“JavaScript:RACHtml(‘producto’)”

onMouseOut=“MM_swapImgRestore()”

onMouseOver=“MM_swapImage(‘Image3’,”,

‘imagenes/bo_productos.png’,1)”>

<img name=“Image3” border=“0”

src=“imagenes/b_productos.png” alt=“Productos”></a></td>

<td><a href=“JavaScript:RACHtml(‘ubicacion’)”

onMouseOut=“MM_swapImgRestore()”

onMouseOver=“MM_swapImage(‘Image4’,”,

‘imagenes/bo_ubicacion.png’,1)”>

<img name=“Image4” border=“0”

CAPÍTULO 10. APLICACIÓN WEB 232

src=“imagenes/b_ubicacion.png” alt=“Ubicación”>

</a></td>

</tr>

</table></td></tr>

<tr>

<td valign=“top” height=“100%” width=“100%”>

<DIV id=resu><TABLE width=100% border=0 cellpadding=0 cellspacing=1>

<TBODY>

<TR>

<TD><TABLE border=0 cellspacing=0 cellpadding=2 align=right >

<TBODY><TR>

<TD class=nav-t3-normal>

<A href=JavaScript:RACHtml(‘producto’)>Productos</A></TD>

<TD class=nav-t3-normal>

<A href=JavaScript:RACHtml(‘historia’)>Historia</A></TD>

<TD class=nav-t3-normal>

<A href=JavaScript:RACHtml(‘ubicacion’)>Ubicación</A></TD>

<TD class=nav-t3-normal>

<A href=JavaScript:RACHtml(‘contacto’)>Contacto</A></TD>

<TD class=nav-t3-normal>

<A href=JavaScript:RACHtml(‘admin’)>Admin</A></TD>

</TR></TBODY>

</TABLE><br></TD>

</TR>
CAPÍTULO 10. APLICACIÓN WEB 233

</TBODY>

</TABLE>

<CENTER><TABLE border=“0” width=“100%” cellspacing=“2”

cellpadding=“0” >

<TBODY>

<TR>

<TD align=“left” width=“32%” valign=“top”>

<TABLE border=“0” width=“226”>

<TBODY>

<TR>

<TD colspan=“3” align=“left”><IMG border=“0”

src=“imagenes/logefec/rac.gif” width=“219” height=“52”></TD>

</TR>

<TR>

<TD colspan=“3”><IMG border=“0” src=“imagenes/logefec/bat.gif”

width=“218” height=“11”></TD>

</TR>

</TBODY>

</TABLE>

<BR><TABLE width=“197”>

<TR>

<TD valign=“middle” class=“marquee2” align=“center”

height=“170”><MARQUEE direction=“up” scrollamount=“1”

style=“height:68px;” class=“texto1” width=”160” height=“49”>

CAPÍTULO 10. APLICACIÓN WEB 234

<IMG border=“0” src=“imagenes/flechita.gif”> Ponga en

funcionamiento el motor del vehículo si todos los equipos

eléctricos están apagados ( aire acondicionado, faros, Stereo,

amplificador, etc. )<BR>

<BR>

<IMG border=“0” src=“imagenes/flechita.gif”>Evite que los

equipos eléctricos estén prendidos por un largo periodo si el

vehículo esta apagado.<BR>

<BR>

<IMG border=“0” src=“imagenes/flechita.gif”>Olores extraños

provenientes de la batería, calentamiento de la misma o

transpiración, indican normalmente falla del regulador de

voltaje.<BR>

<BR>

<IMG border=“0” src=“imagenes/flechita.gif”>Mantenga los

extremos de los terminales bien ajustados y en buen estado.<BR>

<BR>

<IMG border=“0” src=“imagenes/flechita.gif”>Antes de retirar la

batería, verifique si su vehículo posee códigos de seguridad en

la alarma, radio, etc. En caso de que posean, tenga en cuenta

que deberá reactivarlos después de colocar la batería.<BR>

<BR>

</MARQUEE></TD>

</TR>
CAPÍTULO 10. APLICACIÓN WEB 235

</TABLE>

</TD>

<TD align=“right” valign=“TOP” width=“31%”

rowspan=“3”><font id=baterias><script>Principal(‘bateria’);

</script></font></TD>

<TD align=“right” valign=“top” width=“36%”>

<A href=“JavaScript:RACHtml(‘historia’)”><IMG border=“0”

src=“imagenes/historia2.gif” width=“182” height=“63”>

</A><BR>

<BR>

<A href=“JavaScript:RACHtml(‘contacto’)”>

<IMG border=“0” src=”imagenes/contacto.gif” width=“182”

height=“63”></A><BR>

<BR>

<A href=“JavaScript:RACHtml(‘ubicacion’)”>

<IMG border=“0” src=“imagenes/ubicacion2.gif” width=“182”

height=“63”></A></TD>

</TR>

<TR>

<TD width=“32%” rowspan=“2”>

<A href=“http://www.dolarsi.com” target=“_blank”>

<IMG

src=“http://www.dolarsi.com/cotizador/cotizador_verde_full.asp”>

</A></TD><TD width=“36%” align=“right”

CAPÍTULO 10. APLICACIÓN WEB 236

rowspan=“2” valign=“top”>

<script type=“text/javascript”>

function greeting()

var today = new Date();

var hrs = today.getHours();

function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)

this[0] = m0;

this[1] = m1;

this[2] = m2;

this[3] = m3;

this[4] = m4;

this[5] = m5;

this[6] = m6;

this[7] = m7;

this[8] = m8;

this[9] = m9;

this[10] = m10;

this[11] = m11;

function calendar()

{
CAPÍTULO 10. APLICACIÓN WEB 237

var monthNames = ‘EneFebMarAbrMayJunJulAgoSepOctNovDic’;

var today = new Date();

var thisDay;

var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30,

31, 30, 31);

year = today.getYear() ;

thisDay = today.getDate();

if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))

monthDays[1] = 29;

nDays = monthDays[today.getMonth()];

firstDay = today;

firstDay.setDate(1);

testMe = firstDay.getDate();

if (testMe == 2)

firstDay.setDate(0);

startDay = firstDay.getDay();

document.writeln(”);

document.write(‘<TABLE border=0 cellpadding=0

cellspacing=0 class=Tabla width=168>’);

document.write(‘<TR><TD colspan=7 align=center

class=tabla-td><B>’);

document.write(monthNames.substring(today.getMonth() * 3,

(today.getMonth() + 1) * 3));

document.write(‘. ’);
CAPÍTULO 10. APLICACIÓN WEB 238

document.write(year);

document.write(‘<TR class=texto-calend>

<TD><B>Dom</B><TD><B>Lun</B><TD><B>Mar</B><TD>

<B>Mie</B><TD><B>Jue</B><TD><B>Vie</B><TD>

<B>Sab</B>’);

document.write(‘<TR>’);

column = 0;

for (i=0; i<startDay; i++)

document.write(‘<TD>’);

column++;

for (i=1; i<=nDays; i++)

document.write(‘<TD valign=middle>’);

if (i == thisDay)

document.write(‘<FONT class=borde-amarillo

color=black><b>’)

document.write(i);

if (i == thisDay)

document.write(‘</b></FONT>’)

column++;

if (column == 7)

{
CAPÍTULO 10. APLICACIÓN WEB 239

document.write(‘<TR>’);

column = 0;

document.write(‘</TABLE>’);

document.writeln(”);

greeting();

document.write(‘</br>’);

calendar();

document.write(“”);

</SCRIPT>

</TD>

</TR>

<TR></TR>

</TBODY>

</TABLE></CENTER></DIV>

<BR>

<BR>

<BR>

<BR>

<FORM name=form >

<input type=hidden value=catalogo name=catalogo>

<input type=hidden value=video name=video>

CAPÍTULO 10. APLICACIÓN WEB 240

<input type=hidden value=cual name=cual>

</FORM>

<DIV id=cuales ></DIV>

<DIV id=catalogo></DIV>

<DIV id=video></DIV>

</td>

</tr>

<tr>

<td><img src=“imagenes/pie.png” height=“10” width=“700”></td>

</tr>

</table></td>

<td width=“25%” background=“imagenes/relleno.png”>&nbsp;</td>

</tr>

</table>

</body>

</html>

Servlet
A continuación se transcribe el código del servlet de Java que maneja el
armado de la página mediante la interacción con el motor Ajax.
package utilitarios;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;
CAPÍTULO 10. APLICACIÓN WEB 241

import java.sql.SQLException;

import java.sql.Statement;

import javax.servlet.Servlet;

import javax.servlet.ServletConfig;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class RACHtml extends HttpServlet implements Servlet {

Connection conn;

public void init(ServletConfig cf) throws ServletException {

super.init(cf);

conn=RACHtml.conexion();

public RACHtml() {

super();

protected void doGet(HttpServletRequest request, HttpServletResponse respon-

se)

throws ServletException, IOException {

String link=request.getParameter(“link”);

PrintWriter out = response.getWriter();

response.setHeader(“Content-Type”, “text/html;charset=windows-1252”);

response.setHeader(“Cache-Control”, “must-revalidate”);

response.setHeader(“Cache-Control”, “no-cache”);
CAPÍTULO 10. APLICACIÓN WEB 242

if(link.equals(“historia”)){

tabla(out);

historia(out);

fintabla(out);

}else if(link.equals(“producto”)){

tabla(out);

productos(out);

fintabla(out);

}else if(link.equals(“ubicacion”)){

tabla(out);

ubicacion(out);

fintabla(out);

}else if(link.equals(“principal”)){

tabla(out);

principal(out);

fintabla(out);

}else if(link.equals(“contacto”)){

tabla(out);

contacto(out);

fintabla(out);

}else if(link.equals(“admin”)||link.equals(“validar”)){

if(link.equals(“validar”)){

String usuario = request.getParameter(“usuario”);

String clave = request.getParameter(“clave”);

CAPÍTULO 10. APLICACIÓN WEB 243

try{

Statement stm=conn.createStatement();

ResultSet rs=stm.executeQuery(“select * from admin where usuario=“‘+usuario+”’

and clave=“‘+clave+””’);

String existe=””;

while(rs.next()){

existe=rs.getString(1);

rs.close();

if(existe.equals(“”)){

tabla(out);

out.println(“<CENTER><BR><BR>”);

out.println(“<body onload=document.formu.usuario.focus(); >”);

out.println(“<form name=formu>”);

out.println(“<TABLE border=‘0’ cellpadding=‘0’ cellspacing=‘1’>”);

out.println(“ <TBODY>”);

out.println(“<TR>”);

out.println(“ <TD class=texto colspan=2 align=center><font color=red>”);

out.println(“Unuario o clave incorrecta.</font></TD>”);

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD class=texto>Usuario:</TD>”);

out.println(“<TD><INPUT type=‘text’ name=‘usuario’ id=usuario size=‘20’

class=select-modelo></TD>”);
CAPÍTULO 10. APLICACIÓN WEB 244

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD class=texto>Clave:</TD>”);

out.println(“ <TD><INPUT type=‘password’ name=‘clave’ id=clave size=‘20’

class=select-modelo></TD>”);

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD colspan=‘2’ align=‘center’><BR><input type=image on-

click=RACHtml(‘validar’); name=‘entrar”’);

out.println(“src=‘imagenes/entrar.gif’ alt=‘Entrar’></a></TD>”);

out.println(“</TR>”);

out.println(“ </TBODY>”);

out.println(“ </TABLE></form>”);

out.println(“ </CENTER></body>”);

fintabla(out);

}else{

tabla(out);

admin(out);

fintabla(out);

}catch(Exception e){

e.printStackTrace();

}else{

tabla(out);
CAPÍTULO 10. APLICACIÓN WEB 245

validarAdmin(out);

fintabla(out);

public static void historia(PrintWriter out){

out.println(“ <DIV id=resu><TABLE width=100% height=173 border=0 cell-

padding=0 cellspacing=1>”);

out.println(“ <TBODY>”);

out.println(“ <TR>”);

out.println(“ <TD valign=middle height=192 width=264 height=252><IMG

border=0”);

out.println(“ src=fotos/historia2.gif hspace=8 vspace=8 width=249”);

out.println(“ height=175><br></TD>”);

out.println(“<TD rowspan=3 valign=top width=450><BR>”);

out.println(“ <p class=titulo>HISTORIA DE LA EMPRESA<BR>”);

out.println(“</p>”);

out.println(“ <P align=justify class=texto>La historia realmente”);

out.println(“empez&oacute; en el patio de una casa, en la ciudad de Formosa”);

out.println(“Provincia de Formosa. Una ciudad peque&ntilde;a, que apenas”);

out.println(“comenzaba su crecimiento geogr&aacute;fico, ni siquiera”);

out.println(“ todav&iacute;a era provincia, pertenec&iacute;a a la provincia”);

out.println(“ del chaco. Ir&oacute;nicamente, s&oacute;lo hab&iacute;a alguno-

s”);
CAPÍTULO 10. APLICACIÓN WEB 246

out.println(“ autom&oacute;viles, nacieron las bater&iacute;as Capra. Eso”);

out.println(“ ocurri&oacute; en el a&ntilde;o 1946.</P>”);

out.println(“ <P align=justify class=texto>El comienzo fue m&aacute;s o”);

out.println(“ menos as&iacute;: el tecnico profesor don Lino Capra, quien”);

out.println(“ hab&iacute;a estudiado por correspondencia, especialista en”);

out.println(“ motores a explosi&oacute;n junto a su esposa, Elidia malichid,”);

out.println(“ comenz&oacute; a trabajar en la Escuela Nacional de”);

out.println(“ Educaci&oacute;n T&eacute;cnica N&ordm;1 como profesor. Fue”);

out.println(“ cuando leyendo un libro que explicaba m&aacute;s o menos”);

out.println(“ c&oacute;mo se hac&iacute;a una placa de bater&iacute;a se le”);

out.println(“ ocurri&oacute; una idea. Y entonces surgi&oacute; la pregunta:”);

out.println(“ &iquest;Por qu&eacute; no hacemos bater&iacute;as?</P>”);

out.println(“ <P align=justify class=texto>Y adopt&oacute; la idea. Pero”);

out.println(“ don Capra se dio cuenta de que era necesario estudiar mucho y
que”);

out.println(“ el negocio no era tan simple. Percibi&oacute; que realmente”);

out.println(“necesitaba aprender m&aacute;s del tema. Y as&iacute;, hacien-

do”);

out.println(“ cursos a correspondencia, fue aprendiendo mas sobre el tema. Sin”);

out.println(“ dinero, pero sediento de conocimiento, este hombre empez&oacute;”);

out.println(“ su proyecto en el fondo de su casa.</P>”);

out.println(“ <P align=justify class=texto>All&iacute;, ya con bastante”);

out.println(“ conocimiento empez&oacute; ”);

out.println(“a comprar y materiales m&iacute;nimos”);

out.println(“ y fabricar su propia maquinaria, la primera una parrilla”);

CAPÍTULO 10. APLICACIÓN WEB 247

out.println(“ ordenadora de placas donde se soldaban las placas, que sirvieron”);

out.println(“ de base para producir otros equipos capaces de fabricar una”);

out.println(“ bater&iacute;a, aunque muy precaria.</P>”);

out.println(“ <P align=justify class=texto>Comenz&oacute; el negocio. En”);

out.println(“ sus comienzos, las bater&iacute;as eran muy d&eacute;biles, y las”);

out.println(“ ventas se limitaban solo a la ciudad. Se produc&iacute;a un”);

out.println(“ promedio de 15 bater&iacute;as al mes. Adem&aacute;s, el costo”);

out.println(“ para fabricar las bater&iacute;as era elevad&iacute;simo, pero la”);

out.println(“ calidad era buena. Asi con mucho esfuerzo y a pulm&oacute;n

fue”);

out.println(“ agrandando el negocio, hasta llegar a la construcci&oacute;n de”);

out.println(“ mejor f&aacute;brica junto a sus hijos situada a 15”);

out.println(“ kil&oacute;metros de la ciudad.</P>”);

out.println(“ <P align=justify class=texto>Luego nacen las bater&iacute;as”);

out.println(“ RAC con la misma tecnolog&iacute;a y calidad de siempre, donde”);

out.println(“ Ra&uacute;l Antonio Capra, hijo de don Capra ”);

out.println(“ sigue el camino.</P>”);

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD valign=middle width=264 class=marquee ”);

out.println(“align=center height=170>”);

out.println(“<marquee direction=up scrollAmount=1”);

out.println(“ style=height:68px; class=texto1 width=218 height=58>”);

out.println(“ <IMG border=0 src=imagenes/flechita.gif>”);

out.println(“ Ponga en funcionamiento el motor del vehículo si todos los equipos

CAPÍTULO 10. APLICACIÓN WEB 248

eléctricos están apagados”);

out.println(“( aire acondicionado, faros, Stereo, amplificador, etc. )<br>”);

out.println(“ <br>”);

out.println(“ <IMG border=0 src=imagenes/flechita.gif>Evite que los equipos

eléctricos ”);

out.println(“estén prendidos por un largo periodo si el vehículo esta apagado.<br>”);

out.println(” <br>”);

out.println( “<IMG border=0 src=imagenes/flechita.gif>Olores extraños prove-

nientes de la batería, ”);

out.println(“calentamiento de la misma o transpiración, indican normalmente

falla del regulador de voltaje.<br>”);

out.println(“ <br>”);

out.println(“ <IMG border=0 src=imagenes/flechita.gif>Mantenga los extremos

de los terminales ”);

out.println(“bien ajustados y en buen estado.<br>”);

out.println(“ <br>”);

out.println(“ <IMG border=0 src=imagenes/flechita.gif>Antes de retirar la ba-

tería, verifique si su vehículo”);

out.println(“posee códigos de seguridad en la alarma, radio, etc. En caso de que

posean, tenga en cuenta que deberá”);

out.println(“ reactivarlos después de colocar la batería.<br>”);

out.println(“ <br>”);

out.println(“ </marquee></TD>”);
CAPÍTULO 10. APLICACIÓN WEB 249

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD valign=top width=264 height=351></TD>”);

out.println(“ </TR>”);

out.println(“ </TBODY>”);

out.println(“ </TABLE></DIV>”);

public static void productos(PrintWriter out){

out.println(“ <br><TABLE border=0 width=100% cellspacing=0 cellpadding=2

align=center >”);

out.println(“<TBODY>”);

out.println(“ <TR>”);

out.println(“ <TD align=center valign=top><A href=‘JavaScript:verCatalogo”);

out.println(“(document.form.catalogo.value);’>”);

out.println(“<img src=imagenes/botones/catalogo.gif border=0></A></TD>”);

out.println(“ <TD align=center valign=top><A href=‘JavaScript:verVideos”);

out.println(“(document.form.video.value);’>”);

out.println(“<img src=imagenes/botones/videos.gif border=0></A></TD>”);

out.println(“ <TD align=center valign=top><A href=‘JavaScript:cualEs”);

out.println(“(document.form.cual.value);’>”);

out.println(“<img src=imagenes/botones/cuales.gif border=0></A></TD>”);

out.println(“ </TR>”);

out.println(“ </TBODY>”);

out.println(“ </TABLE><br>”);

out.println(“<DIV ID=catalogo ></DIV>” );

CAPÍTULO 10. APLICACIÓN WEB 250

out.println(“<p class=texto>&nbsp;</p>” );

public static void ubicacion(PrintWriter out){

out.println(“<br>”);

out.println(“<p class=titulo>UBICACION DE LA EMPRESA </p>”);

out.println(“<p align=left class=texto>&nbsp;</p>” );

public static void principal(PrintWriter out){

out.println(“<br>” );

out.println(“<p class=titulo>PRINCIPAL </p>” );

out.println(“<p align=center class=texto>Disculpe las molestias a la brevedad

se ” );

out.println(“incorporar&aacute; informaci&oacute;n. </p>” );

out.println(“<p class=texto>&nbsp;</p>” );

public static void contacto(PrintWriter out){

out.println(“<DIV id=resu><TABLE width=100% height=173 border=0 cell-

padding=0” );

out.println(“ cellspacing=1>”);

out.println(“ <TBODY>”);

out.println(“ <TR>”);

out.println(“ <TD valign=middle height=192 width=264 height=252><IMG

border=0”);

out.println(“ src=fotos/historia2.gif hspace=8 vspace=8 width=249”);

out.println(“ height=175><br></TD>”);

out.println(“ <TD rowspan=3 valign=top width=450><BR>”);

CAPÍTULO 10. APLICACIÓN WEB 251

out.println(“ <p class=titulo>CONTACTO<BR>”);

out.println(“ </p>”);

out.println(“<FORM NAME=‘emails’ Enctype=‘text/plain’ ” );

out.println(“action=‘mailto:[email protected]?Subject=Consulta RAC’ met-

hod=‘post’ ”);

out.println(“onSubmit=‘return validaFormContato()’><TABLE border=‘0”’);

out.println(“ width=100%>”);

out.println(“ <TBODY>”);

out.println(“ <tr>”);

out.println(“ <td class=‘textoch’ style=‘padding:10px 5px 0px 5px;’ align=‘justify’

>Esta sección es”);

out.println(“un área especial de nuestro sitio, creada para que usted pueda”);

out.println(“interactuar con RAC y darnos su opinión. Acá es posible enviar las

”);

out.println(“sugerencias, elogios o críticas, con relación a RAC. Recuerde: su

participación ”);

out.println(“es muy importante para que podamos, a cada dia, ofrecer una mejor
tecnología y ”);

out.println(“servicio asociado a nuestros productos. Las baterías RAC son espe-

cialmente ”);

out.println(“desarrolladas para actuar en situaciones críticas, sean de placer o

trabajo, en ”);

out.println(“el coche, oficina, almacenes o en barcos. <BR>”);

out.println(“ <IMG src=‘imagenes/item.gif’><FONT class=‘cinza3’>Para ob-

tener”);

out.println(“ información adicional sobre los productos de Moura o apenas para”);

out.println(“ darnos sus comentarios, por favor envíenos un e-mail:”);

out.println(“</FONT></td>”);
CAPÍTULO 10. APLICACIÓN WEB 252

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD class=‘textotd’ style=‘padding:10px 5px 0px 5px;’ width=‘315’>”);

out.println(“Nombre*<BR>”);

out.println(“ <INPUT type=‘text’ name=‘nombre’ class=‘caja-texto’ ”);

out.println(“style=‘width:250px;’></TD>”);

out.println(“ </TR>”);

out.println(“ <tr>”);

out.println(“ <td style=‘padding:10px 5px 0px 5px;’ class=‘textotd’ width=‘315’>E-

Mail*<br />”);

out.println(“ <input type=‘text’ name=‘email’ class=‘caja-texto’ style=‘width:250px;’

/></td>”);

out.println(“ <tr>”);

out.println(“ <td style=‘padding:10px 5px 0px 5px;’ class=‘textotd’ width=‘315’>”);

out.println(“Teléfono<br />”);

out.println(“ <input type=‘text’ name=‘telefono’ class=‘caja-texto’ style=‘width:110px;’

/></td>”);

out.println(“ <tr>”);

out.println(“ <td style=‘padding:10px 5px 0px 5px;’ class=‘textotd’ width=‘315’>”);

out.println(“Tema<br />”);

out.println(“ <input type=‘text’ name=‘titulo’ class=‘caja-texto’ id=‘titulo’ sty-

le=‘width:250px;’ /></td>”);

out.println(“<tr>”);

out.println(“ <td style=‘padding:10px 5px 0px 5px;’ class=‘textotd’ ”);

out.println(“width=’315’></td>”);

out.println(“ <tr>”);
CAPÍTULO 10. APLICACIÓN WEB 253

out.println(“ <td style=‘padding:10px 5px 0px 5px;’ class=‘textotd’ ”);

out.println(“width=‘315’>Mensaje*”);

out.println(“<br />”);

out.println(“ <textarea name=‘mensage’ class=‘select-desc’ id=‘mensagem’ sty-

le=‘width:250px; height:60px;’ ”);

out.println(“onKeyUp=‘AreaMax(this, 1200, MaxConceito);’></textarea>”);

out.println(“ <br />”);

out.println(“ Caracteres disponibles:<input name=‘MaxConceito’ ”);

out.println(“style=‘width:30px;text-align:center;”’);

out.println(“type=‘text’ class=’caracteres’ id=‘MaxConceito’ value=‘1200’ size=‘3’

maxlength=‘4’ ><br />”);

out.println(“ <br />”);

out.println(“ <input type=‘image’ name=‘enviar’ ”);

out.println(“src=‘imagenes/enviar.gif’/></td>”);

out.println(“ </tbody></table>”);

out.println(“</FORM>”);

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“<TD valign=middle width=264 class=marquee ”);

out.println(“align=center height=170>”);

out.println(“<marquee direction=up scrollAmount=1”);

out.println(“ style=height:68px; class=texto1 width=218 height=58>

out.println(“<IMG border=0 src=imagenes/flechita.gif>”);

out.println(“ Ponga en funcionamiento el motor del vehículo si todos los equipos

eléctricos”);

out.println(“ están apagados ( aire acondicionado, faros, Stereo, amplificador, etc.

CAPÍTULO 10. APLICACIÓN WEB 254

)<br>”);

out.println(“ <br>”);

out.println(“ <IMG border=0 src=imagenes/flechita.gif>Evite que los equipos

eléctricos ”);

out.println(“estén prendidos por un largo periodo si el vehículo esta apagado.<br>”);

out.println(“ <br>”);

out.println(“ <IMG border=0 src=imagenes/flechita.gif>Olores extraños prove-

nientes de la batería,”);

out.println(“ calentamiento de la misma o transpiración, indican normalmente

falla del regulador de voltaje.<br>”);

out.println(“ <br>”);

out.println(“<IMG border=0 src=imagenes/flechita.gif>Mantenga los extremos

de los terminales”);

out.println(“ bien ajustados y en buen estado.<br>”);

out.println(“ <br>”);

out.println(“<IMG border=0 src=imagenes/flechita.gif>Antes de retirar la ba-

tería, verifique si su ”);

out.println(“vehículo posee códigos de seguridad en la alarma, radio, etc. En caso

de que posean, tenga en cuenta ”);

out.println(“que deberá reactivarlos después de colocar la batería.<br>”);

out.println(“ <br>”);

out.println(“ </marquee></TD>”);

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD valign=top width=264 height=351></TD>”);

out.println(“ </TR>”);

out.println(“ </TBODY>”);
CAPÍTULO 10. APLICACIÓN WEB 255

out.println(“ </TABLE></DIV>”);

//ADMIN

public static void validarAdmin(PrintWriter out){

out.println(“<CENTER><BR><BR>”);

out.println(“<body onload=document.formu.usuario.focus(); >”);

out.println(“<form name=formu>”);

out.println(“<TABLE border=‘0’ cellpadding=’0’ cellspacing=’1’>”);

out.println(“ <TBODY>”);

out.println(“ <TR>”);

out.println(“ <TD class=texto>Usuario:</TD>”);

out.println(“ <TD><INPUT type=‘text’ name=‘usuario’ id=usuario size=‘20’

”);

out.println(“class=select-modelo></TD>”);

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD class=texto>Clave:</TD>”);

out.println(“ <TD><INPUT type=‘password’ name=‘clave’ id=clave size=‘20’

”);

out.println(“class=select-modelo></TD>”);

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD colspan=‘2’ align=‘center’><BR><input type=image”);

out.println(“onclick=RACHtml(‘validar’); name=‘entrar”’);

out.println(“ src=‘imagenes/entrar.gif’ alt=‘Entrar’></a></TD>”);

CAPÍTULO 10. APLICACIÓN WEB 256

out.println(“ </TR>”);

out.println(“ </TBODY>”);

out.println(“ </TABLE></form>”);

out.println(“ </CENTER></body>”);

public static void admin(PrintWriter out){

out.println(“<TABLE width=100% height=340 border=0 cellpadding=0”);

out.println(“ cellspacing=1>”);

out.println(“<TBODY>”);

out.println(“ <TR>”);

out.println(“ <TD valign=top>”);

out.println(“ <TABLE width=100% border=0 cellpadding=0 cellspacing=0>”);

out.println(“ <TBODY>”);

out.println(“ <TR>”);

out.println(“ <TD class=titulo colspan=2>Actualización de Baterias<BR>”);

out.println(“ <BR>”);

out.println(“ </TD></TR>”);

out.println(“ <TR>”);

out.println(“ <TD class=link align=left valign=top width=164 height=335”);

out.println(“rowspan=2><A”);

out.println(“ href=‘JavaScript:AgregarMarca()’>”);

out.println(“Agregar Marca del Auto</A><BR>”);

out.println(“ <A href=‘JavaScript:AgregarModelo()’><BR>”);

CAPÍTULO 10. APLICACIÓN WEB 257

out.println(“Agregar Modelo del Auto<BR>”);

out.println(“ <BR>”);

out.println(“ </A><A”);

out.println(“ href=‘JavaScript:AgregarAuto()’>Agregar Bateria</A><BR>”);

out.println(“ <BR><A href=‘JavaScript:AgregarVideos()’>”);

out.println(“Agregar Videos</A><BR>”);

out.println(“<BR>”);

out.println(“ <A href=‘JavaScript:ConsultaAdmin()’>Consultar</A>”);

out.println(“ <BR>”);

out.println(“<BR>”);

out.println(“ <A href=‘http://www.dolarsi.com’ target=‘_blank’> <IMG”);

out.println(“ src=‘http://www.dolarsi.com/cotizador/”);

out.println(“cotizador_verde_full.asp’>”);

out.println(“ </A>”);

out.println(“ </TD>”);

out.println(“ <TD valign=‘top’ width=‘536’ height=‘600’>”);

out.println(“ <CENTER>”);

out.println(“ <DIV ID=altas></div>”);

out.println(“ </CENTER>”);

out.println(“ </TD>”);

out.println(“ </TR>”);

out.println(“ </TBODY>”);

out.println(“ </TABLE>”);

out.println(“ </TD>”);
CAPÍTULO 10. APLICACIÓN WEB 258

out.println(“ </TR>”);

out.println(“ </TBODY>”);

out.println(“</TABLE>”);

//tabla con Div

public static void tabla(PrintWriter out){

out.println(“ <tr>”);

out.println(“<td valign=top height=100% width=100%>”);

out.println(“ <DIV id=resu><TABLE width=100% border=0 cellpadding=0

cellspacing=1>”);

out.println(“ <TBODY>”);

out.println(“ <TR>”);

out.println(“ <TD><TABLE border=0 cellspacing=0 cellpadding=2 align=right

>”);

out.println(“ <TBODY><TR><TD class=nav-t3-normal>

out.println(“<A href=JavaScript:RACHtml(’producto’)>”);

out.println(“ Productos</A></TD>”);

out.println(“ <TD class=nav-t3-normal>”);

out.println(“<A href=JavaScript:RACHtml(’historia’)>Historia</A></TD>”);

out.println(“ <TD class=nav-t3-normal>”);

out.println(“<A href=JavaScript:RACHtml(‘ubicacion’)>Ubicación</A></TD>”);

out.println(“<TD class=nav-t3-normal>”);

out.println(“<A href=JavaScript:RACHtml(‘contacto’)>Contacto</A></TD>”);

out.println(“ <TD class=nav-t3-normal>”);

out.println(“<A href=JavaScript:RACHtml(‘admin’)>Admin</A></TD>”);
CAPÍTULO 10. APLICACIÓN WEB 259

out.println(“</TR></TBODY>”);

out.println(“ </TABLE><br></TD>”);

out.println(“ </TR>”);

out.println(“ <TR>”);

out.println(“ <TD valign=top height=100%>”);

public static void fintabla(PrintWriter out){

out.println(“ </TD>”);

out.println(“ </TR>”);

out.println(“ </TBODY>”);

out.println(“</TABLE></DIV>”);

out.flush();

out.close();

public static Connection conexion(){

Connection conn=null;

try {

Class.forName(“sun.jdbc.odbc.JdbcOdbcDriver”);

}catch (ClassNotFoundException e) {

System.out.println(“Imposible encontrar el driver:” +

e.getMessage());

try {

conn = DriverManager.getConnection(“jdbc:odbc:rac”);
CAPÍTULO 10. APLICACIÓN WEB 260

}catch (SQLException e) {

System.out.println(“Imposible crear conexion:” + e.getMessage());

return conn;

10.3.2 JavaScript (.js)

A continuación se transcribe un ejemplo de las funciones JavaScript que crea

el objeto XmlHttpRequest, conformando el motor Ajax que maneja toda la
aplicación.
function objetoAjax(){

var xmlhttp=false;

try {

xmlhttp = new ActiveXObject(‘Msxml2.XMLHTTP’);

}catch (e) {

try {

xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP’);

}catch (E) {

xmlhttp = false;

if (!xmlhttp && typeof XMLHttpRequest!=‘undefined’) {

xmlhttp = new XMLHttpRequest();

}
CAPÍTULO 10. APLICACIÓN WEB 261

return xmlhttp;

// crea consulta para ver el cliente

function RACHtml(link){

if(link==‘principal’){

window.location.href=“Index.html”;

}else{

var usuario=“”;

var clave=“”;

if(link==‘validar’){

usuario = document.getElementById(“usuario”).value;

clave = document.getElementById(“clave”).value;

divResultado = document.getElementById(‘resu’);

var espera= document.getElementById(“espera”);

ajax=objetoAjax()

var url = ‘RACHtml?usuario=’+escape(usuario)+‘&clave=‘+escape(clave)+’&link=

+escape(link);

ajax.open(‘GET’, url);

ajax.onreadystatechange=function() {

if (ajax.readyState==1) {

divResultado.innerHTML = “<center>Cargando... <img src=imagenes/ajax-

loader.gif ></center>”

if (ajax.readyState==4) {
CAPÍTULO 10. APLICACIÓN WEB 262

divResultado.innerHTML = ajax.responseText

ajax.send(null);

// delete(ajax);

10.3.3 Página de Estilos (.css)

A continuación se transcribe un ejemplo del código de la página de estilos

utilizada en la aplicación.

.texto{

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #333333;

padding-left:5px;

padding-right:5px;

.textoj{

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #333333;

padding-left:5px;

padding-right:5px;;

text-align: justify;
CAPÍTULO 10. APLICACIÓN WEB 263

text-indent: 6px;

vertical-align: middle

.titulo{

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

color: #ACC880;

font-weight: bold;

text-transform: uppercase;

padding-left:5px;

.nombres{

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

color: #ff8000;

font-weight: bold;

text-transform: uppercase;

padding-left:5px;

.borde-amarillo{

border-style: solid;

border-width: 1px;

border-color: green

}
.fondo-tabla{

background-image: url(“../imagenes/fondo-tabla.gif”);

background-repeat: no-repeat;

background-position: center;

font-family: Arial, Helvetica, sans-serif;

font-size: 10pt;;

}
Capítulo 11

Conclusiones

11.1 Respecto del Futuro de AJAX

Como se ha visto AJAX no genera nuevos problemas realmente, en cambio

solventa problemas de interactividad y el de las cookies ya que no es necesario
cambiar de página, no necesita plugins pero, en cambio, tiene que estar bien
soportado por todos los navegadores y ser compatible. Es algo nuevo pero con
una esperanza de vida grande ya que hay multitud de pequeñas comunidades
y grandes compañías desarrollando alrededor de él últimamente.
En un futuro no muy lejano se espera de él lo siguiente:

• Creación de unas librerías estándar, libres de fallos y de agujeros de se-

guridad, la mayor parte de los toolkits actuales suelen emplear el método
GET por defecto.
• Estandarización del objeto XMLHttpRequest.
• Mejora del soporte por parte de los navegadores.
• Mejora de los patrones de diseño con Javascript y esto último es muy
importante.

Gracias a AJAX se pueden realizar aplicaciones de gran calidad, rápidas,

sin agujeros de seguridad, vistosas gráficamente y muy interactivas pero re-
quiere de un equipo bastante experto.

265
CAPÍTULO 11. CONCLUSIONES 266

11.2 Respecto del Motor de Base de Datos Utiliza-

do

La rápida adopción de XML para la integración de aplicaciones, Web 2.0,

y SOA está empujando la necesidad de servidores de datos híbridos. DB2
Express-C es un servidor de datos híbrido, sin costo, sin límites, y capaz
de manejar tanto datos XML como datos relacionales sin problemas. Sin
costo significa que DB2 Express-C es gratis para bajar, gratis para desarrollar
aplicaciones, gratis para desplegar en producción, y gratis para distribuir con
su aplicativo. DB2 no pone límites artificiales en el tamaño de la base de
datos, el número de bases de datos, o el número de usuarios.

DB2 Express-C corre en sistemas Windows y Linux e incluye los drivers

de muchos lenguajes de programación tales como C/C++, Java, .NET, PHP,
Perl, y Ruby.

11.3 Respecto del Entorno de Desarrollo Utilizado

La plataforma de software WebSphere proporciona una completa gama de

habilidades que permiten a los clientes la entrega de altos niveles de servicio
a todos los visitantes del sitio en la Web. Administra cargas pico en los
servidores Web, mantiene la disponibilidad del sitio en la Web, y reconoce
contenido de solicitudes de la Web para calidad-de-servicio mejor. También
permite la diferenciación de niveles de servicio con base en el tipo de cliente.
El WebSphere integrado a Rational Architect proporciona el poder necesa-
rio para realizar aplicaciones ricas de internet posibilitando todas las ventajas
del uso de AJAX.

11.4 Líneas Futuras de Acción

Como líneas futuras de acción se espera:

• Mejorar la seguridad en cuanto a la autenticación de usuarios utilizando

criptografía con AJAX.
• Ampliar las posibilidades del Administrador del sitio, en cuanto a los
niveles de actualización de datos.

• Implementar un sistema de compra basado en el “carro de compras”.

Bibliografía

[1] Bart Jacob Carla Sadtler, John Ganci. WebSphere Product Family Over-
view and Architecture. IBM Press, USA, 2004.

[2] IBM Corporation. IBM DB2 Universal Database para Windows Guía
Rápida de Iniciación Versión 7. IBM Press, USA, 2000.

[3] IBM. WebSphere Comerse V5.5 Architecture. IBM Press, USA, 2003.

[4] Dion Almaer Justin Gehtland, Ben Galbraith. Pragmatic Ajax: A Web
2.0 Primer. ISBNŮ13: 978-0976694083. O’Reilly, USA, 2007.

[5] Javier Eguíluz Pérez. Introducción a CSS. O’Reilly, USA, 2006.

[6] Javier Eguíluz Pérez. CSS Avanzado. O’Reilly, USA, 2007.

[7] Javier Eguíluz Pérez. Introducción a AJAX. IBM Press, USA, 2008.

[8] Bruce Perry. Ajax Hacks. ISBN-13: 978-0596101695. O’Reilly, USA,

2006.

[9] Rudyanto Linngar Saida Davies, Surech Amujuri. WebSphere Business

Integration Pub/Sub Solutions. IBM Press, USA, 2004.

[10] Nicholas C. Zakas. Professional JavaScript for Web Developers. ISBN:

978-0-7645-7908-0. WROX, USA, 2005.

268
Índice de Materias

.NET, 165 cliente de aplicaciones de, 201

EJB de, 200
abort, 110 Web, 201
ActionScript, 6 CSS, 2
ADMIN, 221
INTEGER, 221 DB2 Express C9, 219
VARCHAR, 221 default, 133
AJAX, iii, 1, 210 tilde no, 192
APPLET, 6 DHTML, 3, 207
Applets digitales
contenedor de, 202 activos, 198
applets, 206 documento, 77
archivo, 133 download, 198
archivos, 122 DTD, 19
arquitecturas
tres niveles de, 203 e-business on demand
ASP, 3 integración en el, 194
e-commerce, 196
B2B, 198 Eclipce, 162
B2C, 198 enterprise beans, 200
bases y herramientas estructuras de datos, 219
para su e-business, 193 eventos, 139
Baterías RAC, iii, 210
false, 126
BATERIA, 225
filas, 139
Berners-Lee, 1
firebug, 90
Blueprint, 164
flash crowds, 193
botón, 139
framework, 160
browsers, 205
GET, 116
código fuente, 226
Google, 139
cliente, 133
Google Maps, 214
contenedor
GUI, 201

269
ÍNDICE DE MATERIAS 270

Hacker, 153 robots, 151

HTML, 1, 206
Scriptaculus, 163
IDE, 207 sección, 77
Internet Explorer, 1 Server
Application, 200
Javascript, 3 servidor, 129
JDBC, 202, 206 de aplicaciones, 200
JNDI, 202 servlet, 116
Jscript, 3 servlets, 201
JSP, 3, 201 setTimeout, 129
jsp, 116 SmartPhone, 206
JSPs, 207 sourceforge, 107
JVM, 200
tabla, 133
librería, 130 tidy, 113
toolkit, 160
método, 116
true, 126
MARCA, 223
Microsoft, 3 URL, 115
MODELO, 225 UTF-8, 116
Mozilla Firefox, 3
VIDEO, 226
Netbeans, 162 virtual
Netscape, 1 sistema principal, 202
nick, 127 VT, 206
objeto, 116 WebSphere
objetoAjax, 97 Studio, 191
Outlook, 8 WebSphere Commerce, 196
WebSphere Everyplace, 196
petición, 119, 133
WebSphere for Commerce
PHP, 3
soluciones de portal, 197
plataforma, 194
soluciones digital media, 198
de software, 195
WebSphere for commerce
Plug-in, 6
soluciones B2B, 196
POST, 118
soluciones B2C, 196
producto
WebSphere Host Integration, 205
familias del, 205
WebSphere Host Publisher, 205
Prototype, 163
WebSphere Portal, 196
RIO, 206 WebSphere Studio, 205
ÍNDICE DE MATERIAS 271

la familia de herramientas, 207

WebSphere Transcoding Publisher,
206
WebSphere Voice, 196
Widgets, 162
wizard, 206
Word Wide Web, 1

XHTML, 2
XML, 2, 206
XMLHttpRequest, 7, 113