ajax y xhtml

285
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

Upload: luis-rodolfo-pumisacho

Post on 27-Jun-2015

622 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Ajax y Xhtml

UNNEUniversidad 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 HerrmannPrimer Prof. Orientador: Mgter. David Luis la Red

MartínezSegundo Prof. Orientador: Lic. Valeria E. Uribe

Licenciatura en Sistemas de InformaciónCorrientes - Argentina

2009

Page 2: Ajax y Xhtml

A mi familia y amigos por el apoyo incondicional.

Page 3: Ajax y Xhtml

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áticosdistribuidos, 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ámenesy la gestión de información a través de las redes de datos, especialmente lasIntranets de las organizaciones y la Internet, mejorando asimismo la toma dedecisiones y el uso eficiente de los recursos.

Todo lo señalado precedentemente sería ilusorio si no se dispusiera de lasmetodologías y de los sistemas informáticos que facilitaran la información en-tre las distintas organizaciones, utilizando diversos medios de comunicación ydiferentes plataformas de hardware y de software.

El presente trabajo se basa en la investigación de software base para elestudio de un nuevo acercamiento a las aplicaciones Web. Es un proyectopensado para demostrar que AJAX no es solo técnicamente importante, sinotambién práctico para aplicaciones en el mundo real.

Los mayores desafíos al crear aplicaciones AJAX no son técnicos. Lastecnologías centrales son maduras, estables y bien conocidas. En cambio, losdesafíos son para los diseñadores de estas aplicaciones: olvidar las limitacionesde 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 desarrollode un sistema dinámico que muestre los contenidos investigados.

El objetivo es realizar una aplicación AJAX que elimine la naturalezaarrancar-frenar- arrancar-frenar de la interacción en la Web introduciendo unintermediario -un motor AJAX - entre el usuario y el servidor. Esto suma unacapa a la aplicación, pero no la retorna menos reactiva.

La aplicación desarrollada es un sitio Web para la empresa “BateríasRAC”, 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-

Page 4: Ajax y Xhtml

iv

dos.

Etapas de Desarrollo

• Se ha efectuado una amplia recopilación bibliográfica específica de lostemas pertinentes a la tarea planificada y a los productos de softwareque 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 comoen libros de dicha empresa, en el marco del Scholars Program de la mis-ma, destinado a Universidades de todo el mundo; se destacan por sernecesarios para la realización del presente Trabajo Final los referentesa 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 laversión JDK 1.6.

• Se ha realizado un detallado estudio del entorno de trabajo ScientificWorkPlace 2.5.0 para la escritura del libro correspondiente al informefinal.

• Se ha realizado un detallado estudio del software para el desarrollo de laaplicación, es decir el estudio de la plataforma integrada de desarrollo deaplicaciones Web, WebSphere Studio Application Developer integrado aRational 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 laherramienta WebSphere Studio Application Developer integrado a Ra-tional en el entorno Windows.

• Se ha realizado el correspondiente testeo de la aplicación, utilizando unamáquina como servidor y otra como cliente ingresando a la base de datosdel servidor a través de la Intranet de la Facultad.

Page 5: Ajax y Xhtml

v

• Una vez finalizada la aplicación se realizó la grabación en DVD de todoel material correspondiente al trabajo final: una versión de la aplicación,otra referente al libro en formato LaTex y el PDF generado. Tambiénse 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 parael presente trabajo.

Organización del Informe Final

El informe final comprende un libro impreso y un DVD, además de unresumen 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): Seseñ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 principalesaspectos y destacadas características del objeto XMLHttpRequest juntoa sus métodos y atributos.

• Capitulo 4 - Herramientas de Depuración: Se resumen los aspectosy características más destacadas de las herramientas de depuración másconocidas.

• 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 losprincipales ejemplos reales de uso para AJAX.

• Capitulo 7 - Problemas de seguridad y desarrollo: Se señalan losaspectos más relevantes de seguridad y desarrollo.

Page 6: Ajax y Xhtml

vi

• Capitulo 8 - Un mundo de Toolkits y Frameworks: Se detallan losaspectos 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 utilizadaspara 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ódigoutilizado.

• Capitulo 11 - Conclusiones: Se presentan las conclusiones a las que seha 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úlLicenciatura en Sistemas de Información

Universidad Nacional del NordesteL.U.: 36078

Primer Prof. Orientador: Mgter. David Luis La Red MartínezSegundo Prof. Orientador: Lic. Valeria Emilce Uribe

Corrientes; 11 de Marzo de 2009

Page 7: Ajax y Xhtml

Índice General

1 Introducción 11.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1.1 Las Tecnologías Web . . . . . . . . . . . . . . . . . . . . 11.1.2 Visión en Conjunto . . . . . . . . . . . . . . . . . . . . . 41.1.3 Forman Parte de las RIA . . . . . . . . . . . . . . . . . 5

1.2 Algunos Ejemplos Reales de AJAX . . . . . . . . . . . . . . . 81.2.1 Notas Finales . . . . . . . . . . . . . . . . . . . . . . . . 9

2 Las RIA 112.1 HTML y XHTML . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1.1 Conceptos Básicos de HTML . . . . . . . . . . . . . . . 112.1.2 Estructura del Documento HTML, Ejemplo Básico . . . 112.1.3 Tags de Imagen y Tabla . . . . . . . . . . . . . . . . . . 132.1.4 Hiperenlaces . . . . . . . . . . . . . . . . . . . . . . . . 17

2.2 XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.2.1 Diferencias Más Importantes Entre XHTML y HTML . 192.2.2 ¿Cómo Validar una Página Web? . . . . . . . . . . . . . 22

2.3 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.4 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2.4.1 Crear un Nuevo Objeto . . . . . . . . . . . . . . . . . . 232.4.2 Crear un Nuevo Constructor . . . . . . . . . . . . . . . 242.4.3 Asignar un Método a un Objeto . . . . . . . . . . . . . 24

2.5 Applet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.6 Adobe Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.7 Java WebStart . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

2.7.1 Obtención del Software de Java Web Start . . . . . . . . 292.7.2 Ejecución de una Aplicación con el Software de Java

Web Start . . . . . . . . . . . . . . . . . . . . . . . . . . 292.8 DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

vii

Page 8: Ajax y Xhtml

ÍNDICE GENERAL viii

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

3 El Objeto XMLHttpRequest 323.1 Descripción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

3.1.1 Implementación y Uso de la Interfaz . . . . . . . . . . . 333.2 Características Generales del Objeto . . . . . . . . . . . . . . . 33

3.2.1 Razones Para Utilizar una Librería en el Lado Cliente . 333.2.2 La Dependencia de los Navegadores . . . . . . . . . . . 35

3.3 Navegadores Compatibles . . . . . . . . . . . . . . . . . . . . . 393.4 Métodos y Propiedades del Objeto . . . . . . . . . . . . . . . . 40

3.4.1 Métodos . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.4.2 Propiedades . . . . . . . . . . . . . . . . . . . . . . . . . 41

3.5 Peticiones Síncronas y Asíncronas . . . . . . . . . . . . . . . . 423.6 Escribir Clases en JavaScript . . . . . . . . . . . . . . . . . . . 48

3.6.1 Clases VS Prototipos . . . . . . . . . . . . . . . . . . . . 483.6.2 Prototype vs Encerrar las Funciones . . . . . . . . . . . 513.6.3 Variables Públicas vs Variables Privadas . . . . . . . . 51

4 Herramientas de Depuración 524.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524.2 Instalación de las Herramientas . . . . . . . . . . . . . . . . . 524.3 La Consola JavaScript . . . . . . . . . . . . . . . . . . . . . . . 544.4 Document Object Model Inspector (Inspector del DOM) . . . 56

4.4.1 ¿Cómo Funciona? . . . . . . . . . . . . . . . . . . . . . 594.5 Venkman(Depurador de Javascript) . . . . . . . . . . . . . . . 604.6 Firebug (Todo lo Anterior en Uno) . . . . . . . . . . . . . . . . 66

4.6.1 Funcionalidades de Firebug . . . . . . . . . . . . . . . . 69

5 Petición de Información 755.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 755.2 Insertar Código HTML . . . . . . . . . . . . . . . . . . . . . . 755.3 Insertar Imágenes Usando el DOM . . . . . . . . . . . . . . . 795.4 Insertar Código JavaScript . . . . . . . . . . . . . . . . . . . . 835.5 DOM API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 875.6 DOM API e innerHTML . . . . . . . . . . . . . . . . . . . . . 905.7 Encapsulación del Objeto XMLHttpRequest . . . . . . . . . . 955.8 Petición de Código Javascript y Lanzarlo . . . . . . . . . . . . 1025.9 Manejo de Errores . . . . . . . . . . . . . . . . . . . . . . . . . 1045.10 Dar Soporte al Usuario . . . . . . . . . . . . . . . . . . . . . . 107

Page 9: Ajax y Xhtml

ÍNDICE GENERAL ix

6 Ejemplos Reales de Uso Para AJAX 1136.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1136.2 La Web Actual . . . . . . . . . . . . . . . . . . . . . . . . . . . 1136.3 Métodos GET, POST y Caracteres Especiales en Internet . . . 115

6.3.1 Introducción a los Métodos GET y POST . . . . . . . 1156.3.2 Caracteres Especiales . . . . . . . . . . . . . . . . . . . 1166.3.3 Cambios en la Librería Para Que Acepte los 2 Métodos 1166.3.4 Ejemplo de Uso de los Métodos GET y POST . . . . . 119

6.4 Auto Verificación y Rendimiento en AJAX . . . . . . . . . . . . 1226.5 Refrescar la Pantalla Automáticamente . . . . . . . . . . . . . 1286.6 Una Base de Datos Creada con el DOM y Guardada con AJAX1336.7 Crear una Tabla Dinámicamente . . . . . . . . . . . . . . . . . 1346.8 Auto-Completado Empleando AJAX . . . . . . . . . . . . . . . 139

7 Problemas de Seguridad y Desarrollo 1507.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1507.2 Problemas de Desarrollo . . . . . . . . . . . . . . . . . . . . . 150

7.2.1 Internet Oscura . . . . . . . . . . . . . . . . . . . . . . . 1517.2.2 Complejidad Aumentada . . . . . . . . . . . . . . . . . 1517.2.3 Aplicaciones Difíciles de Mantener . . . . . . . . . . . . 1517.2.4 Las Herramientas de Desarrollo que Usan AJAX son

Inmaduras . . . . . . . . . . . . . . . . . . . . . . . . . . 1517.2.5 El Objeto XMLHttpRequest No Está Estandarizado . . 1517.2.6 El Objeto XMLHttpRequest No Está en Navegadores

Antiguos . . . . . . . . . . . . . . . . . . . . . . . . . . 1527.2.7 Dependencia de la Tecnología Javascript . . . . . . . . . 152

7.3 Problemas de Seguridad . . . . . . . . . . . . . . . . . . . . . . 1527.3.1 Parte del Cliente . . . . . . . . . . . . . . . . . . . . . . 1527.3.2 Problemas Antiguos AJAX . . . . . . . . . . . . . . . . 1537.3.3 Parte del Servidor . . . . . . . . . . . . . . . . . . . . . 1537.3.4 Problemas Agravados Por el Uso de AJAX . . . . . . . 154

7.4 Política de Mismo Origen . . . . . . . . . . . . . . . . . . . . . 1567.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 1608.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1608.2 Tipos de Toolkits y Frameworks Sobre Java . . . . . . . . . . . 160

8.2.1 Bibliotecas Javascript en el Lado Cliente . . . . . . . . . 1618.2.2 Tecnologías Wrapper: jMaki . . . . . . . . . . . . . . . . 163

Page 10: Ajax y Xhtml

ÍNDICE GENERAL x

8.2.3 Componentes Java Server Faces que Utilizan AJAX . . 1638.2.4 Traductor Java a HTML/Javascript: Google Web Toolkit164

8.3 Tipos de Toolkits y Frameworks Sobre Lenguajes No Java . . . 1658.3.1 .NET Frameworks . . . . . . . . . . . . . . . . . . . . . 1658.3.2 Flash Frameworks . . . . . . . . . . . . . . . . . . . . . 1658.3.3 PHP Frameworks . . . . . . . . . . . . . . . . . . . . . . 1668.3.4 Otros Frameworks . . . . . . . . . . . . . . . . . . . . . 166

8.4 Conclusiones Sobre el Uso de los Toolkits . . . . . . . . . . . . 1668.5 Notas Finales del Capítulo . . . . . . . . . . . . . . . . . . . . 166

9 Herramientas Utilizadas para la Aplicación 1689.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1689.2 DB2 Express-C9 . . . . . . . . . . . . . . . . . . . . . . . . . . 168

9.2.1 Servidores DB2 . . . . . . . . . . . . . . . . . . . . . . . 1699.2.2 Clientes DB2 y Controladores . . . . . . . . . . . . . . . 1709.2.3 Características y Productos Relacionados . . . . . . . . 1729.2.4 Características incluídas en otras ediciones de DB2: . . 1729.2.5 Características Incluidas con la Licencia de Suscripción

de DB2 Express-C . . . . . . . . . . . . . . . . . . . . . 1749.2.6 Características No Disponibles con DB2 Express-C . . . 1759.2.7 Productos Pagados Relacionados con DB2 . . . . . . . . 1789.2.8 Guía de Instalación de DB2 Express C . . . . . . . . . . 1809.2.9 Herramientas de DB2 . . . . . . . . . . . . . . . . . . . 184

9.3 WebSphere Studio . . . . . . . . . . . . . . . . . . . . . . . . . 1919.3.1 ¿Que es WebSphere? . . . . . . . . . . . . . . . . . . . . 191

9.4 Apache Tomcat . . . . . . . . . . . . . . . . . . . . . . . . . . . 2089.4.1 Descripción . . . . . . . . . . . . . . . . . . . . . . . . . 2089.4.2 Entorno . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

10 Aplicación Web 21010.1 Descripción General . . . . . . . . . . . . . . . . . . . . . . . . 210

10.1.1 Módulo del Usuario . . . . . . . . . . . . . . . . . . . . 21110.1.2 Módulo del Administrador . . . . . . . . . . . . . . . . . 215

10.2 Estructura de Datos Utilizada . . . . . . . . . . . . . . . . . . . 21910.2.1 Estructura de Tablas . . . . . . . . . . . . . . . . . . . . 221

10.3 Ejemplos de Código Fuente Utilizados . . . . . . . . . . . . . . 22610.3.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22610.3.2 JavaScript (.js) . . . . . . . . . . . . . . . . . . . . . . . 26010.3.3 Página de Estilos (.css) . . . . . . . . . . . . . . . . . . 262

Page 11: Ajax y Xhtml

ÍNDICE GENERAL xi

11 Conclusiones 26511.1 Respecto del Futuro de AJAX . . . . . . . . . . . . . . . . . . 26511.2 Respecto del Motor de Base de Datos Utilizado . . . . . . . . . 26611.3 Respecto del Entorno de Desarrollo Utilizado . . . . . . . . . . 26611.4 Líneas Futuras de Acción . . . . . . . . . . . . . . . . . . . . . 266

Bibliografía 268

Índice de Materias 269

Page 12: Ajax y Xhtml

Índice de Figuras

1.1 Primer ejemplo con Ajax. . . . . . . . . . . . . . . . . . . . . . 81.2 Página Google 1. . . . . . . . . . . . . . . . . . . . . . . . . . . 91.3 Página Google 2. . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.1 Primer Ejemplo HTML. . . . . . . . . . . . . . . . . . . . . . . 122.2 Ejemplo HTML: Imágenes. . . . . . . . . . . . . . . . . . . . . 142.3 Ejemplo HTML: Etiquetas. . . . . . . . . . . . . . . . . . . . . 152.4 Ejemplo HTML: Tablas. . . . . . . . . . . . . . . . . . . . . . . 18

3.1 Página Inicial antes del Evento. . . . . . . . . . . . . . . . . . . 393.2 Resultado luego del Evento. . . . . . . . . . . . . . . . . . . . 403.3 Ejemplo de Petición Síncrona. . . . . . . . . . . . . . . . . . . . 463.4 Ejemplo de uso de Prototipos. . . . . . . . . . . . . . . . . . . . 50

4.1 Aspecto del Menú Herramientas luego de la Instalación. . . . . 534.2 Resultado en la Consola de JavaScript. . . . . . . . . . . . . . . 554.3 Código que produjo el Error. . . . . . . . . . . . . . . . . . . . 564.4 Resultado del Código depuracion2.html visto en Mozilla Firefox. 584.5 Ejemplo de Uso de la Utilidad DOM Inspector. . . . . . . . . . 594.6 Pantalla de Inicio de Venkman. . . . . . . . . . . . . . . . . . . 624.7 Venkman con el Fichero depurar.html Cargado. . . . . . . . . . 634.8 Venkman Detenido en el Punto de Ruptura. . . . . . . . . . . . 644.9 Vista Watches de Vankman. . . . . . . . . . . . . . . . . . . . . 654.10 Icono de Inicio de FireBug. . . . . . . . . . . . . . . . . . . . . 664.11 Pestañas o Solapas de FireBug. . . . . . . . . . . . . . . . . . . 674.12 Error Visualizado en la Consola de FireBug. . . . . . . . . . . . 68

5.1 Página que Realiza la Petición. . . . . . . . . . . . . . . . . . . 785.2 Resultado de la Petición. . . . . . . . . . . . . . . . . . . . . . . 795.3 Google Maps sin Terminar de Cargar Imágenes. . . . . . . . . . 805.4 JavaScript Devuelto y Evaluado por AJAX. . . . . . . . . . . . 85

xii

Page 13: Ajax y Xhtml

ÍNDICE DE FIGURAS xiii

5.5 Petición Indirecta con AJAX. . . . . . . . . . . . . . . . . . . . 885.6 Jerarquía de Objetos del Navegador. . . . . . . . . . . . . . . . 895.7 Ejemplo de Utilización del Objeto window. . . . . . . . . . . . 895.8 DOM de una página Web visto con Firebug. . . . . . . . . . . . 915.9 petición de información a una url inexistente . . . . . . . . . . 1045.10 cuadroEstadoCarga . . . . . . . . . . . . . . . . . . . . . . . . . 108

6.1 Esquema de una página Web Actual. . . . . . . . . . . . . . . . 1146.2 Guardar en Formato URF-8. . . . . . . . . . . . . . . . . . . . 1176.3 Ejemplo de los Métodos GET y POST. . . . . . . . . . . . . . 1196.4 Ejemplo de Verificación de Usuarios Usando AJAX. . . . . . . 1246.5 Ejemplos de Verificación: Estados Posibles. . . . . . . . . . . . 1276.6 Refresco automático de página . . . . . . . . . . . . . . . . . . 1296.7 Tabla Generada Dinámicamente Haciendo uso del DOM. . . . . 1346.8 Interfaz Simple Para Guardar y Cargar de un Archivo. . . . . . 1356.9 Ejemplo de Auto-completado empleando AJAX . . . . . . . . . 1406.10 Google Suggest. . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

7.1 Aplicación desarrollada con una Seguridad Ineficiente. . . . . . 1557.2 Aplicación Desarrollada con una Seguridad Correcta. . . . . . . 1557.3 Internet Explorer 6 pidiendo una confirmación debido a un po-

sible riesgo de seguridad. . . . . . . . . . . . . . . . . . . . . . . 158

9.1 Servidores DB2. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1709.2 Clientes DB2 y Controladores Disponibles. . . . . . . . . . . . . 1719.3 Réplica de SQL. . . . . . . . . . . . . . . . . . . . . . . . . . . 1769.4 DB2 Connect. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1799.5 WebSphere Federation Server. . . . . . . . . . . . . . . . . . . . 1819.6 Ventana de Progreso en DB2. . . . . . . . . . . . . . . . . . . . 1849.7 Herramientas DB2. . . . . . . . . . . . . . . . . . . . . . . . . . 1859.8 Herramientas DB2: Menú Inicio. . . . . . . . . . . . . . . . . . 1869.9 Centro de Control de DB2. . . . . . . . . . . . . . . . . . . . . 1879.10 Icono DB2 en Windows. . . . . . . . . . . . . . . . . . . . . . . 1889.11 Editor de Comandos. . . . . . . . . . . . . . . . . . . . . . . . . 1899.12 Botón Show SQL. . . . . . . . . . . . . . . . . . . . . . . . . . . 1909.13 Salida de un Botón Show SQL. . . . . . . . . . . . . . . . . . . 1919.14 Plataforma de WebSphere. . . . . . . . . . . . . . . . . . . . . . 192

10.1 Pagina inicial del sitio . . . . . . . . . . . . . . . . . . . . . . . 21110.2 Sección Productos. . . . . . . . . . . . . . . . . . . . . . . . . . 21210.3 Seccion catalogos . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Page 14: Ajax y Xhtml

ÍNDICE DE FIGURAS xiv

10.4 Seccion videos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21410.5 Seccion cual es su bateria . . . . . . . . . . . . . . . . . . . . . 21510.6 Sección Historia. . . . . . . . . . . . . . . . . . . . . . . . . . . 21610.7 Sección Contacto. . . . . . . . . . . . . . . . . . . . . . . . . . . 21710.8 Sección Ubicación. . . . . . . . . . . . . . . . . . . . . . . . . . 21810.9 Módulo del Administrador. . . . . . . . . . . . . . . . . . . . . 21910.10Estructura de la Base de Datos. . . . . . . . . . . . . . . . . . . 22010.11Tabla ADMIN. . . . . . . . . . . . . . . . . . . . . . . . . . . . 22110.12Muestreo del Contenido de la tabla ANIO. . . . . . . . . . . . . 22210.13Tabla COMBUSTIBLE. . . . . . . . . . . . . . . . . . . . . . . 22310.14Tabla MARCA. . . . . . . . . . . . . . . . . . . . . . . . . . . . 22410.15Tabla MODELO. . . . . . . . . . . . . . . . . . . . . . . . . . . 22510.16Estructura de datos de la tabla BATERIA. . . . . . . . . . . . 22610.17Definición de Claves de la Tabla BATERIA. . . . . . . . . . . . 22710.18Estructura de Campos de la Tabla VIDEO. . . . . . . . . . . . 228

Page 15: Ajax y Xhtml

Capítulo 1

Introducción

1.1 Introducción

Antes de emprender la lectura de este texto hay ciertas cosas que sería buenoconocer para entender perfectamente qué es AJAX y en qué lugar se ubi-ca dentro del desarrollo de aplicaciones Web. Por ello se aprovechará estaintroducció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 hastasu estado actual para conocer en qué momento se está y con qué tecnologíasse 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 lasque se crean las páginas Web (ya que cada navegador añadía sus propias a lasya establecidas y muchas veces había que realizar la misma aplicación parauno y otro, y detectar el navegador antes de lanzarla). Como muestra de suesmero, este consorcio hoy en día sigue 7 pasos para la aprobación de cualquierestá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

Page 16: Ajax y Xhtml

CAPÍTULO 1. INTRODUCCIÓN 2

te y de forma práctica más adelante. Es importante entender que mantienenmucha 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 ritmosorprendente, así pues, cada versión normalmente extiende la anterior y nosuele 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 elpaso del tiempo se han ido añadiendo etiquetas a las que ya tenía además dedar 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 intentandoseguir 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 abanicode 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 datoscomo pudiera ser los campos de una tabla para intercambiar información deforma rápida y fácil. También permite especificar cómo tienen que ser losdatos, 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 eltipo de atributos del texto dentro de las etiquetas HTML.

Page 17: Ajax y Xhtml

CAPÍTULO 1. INTRODUCCIÓN 3

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

DOM (Document Object Model)

Cuando se carga una página Web en el navegador, éste crea asociado a lapágina una serie de objetos en forma jerárquica, de manera que medianteun lenguaje utilizable en la parte del navegador, como Javascript, puedenmodificarse las características de esos objetos y con ello la página en sí. Ya quela página se actualiza inmediatamente si se realiza algún cambio con Javascriptmientras é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 scriptque se utiliza normalmente para dotar de dinamismo a las páginas y obtenerDHTML. 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 MozillaFirefox. Por su parte Microsoft también ha evolucionado hasta presentar suversió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 yresponda (por ejemplo al conectarse a una cuenta de correo), o que guardeinformación (por ejemplo en un foro). Para este procesamiento se utilizanlos lenguajes de servidor PHP , JSP (el que utiliza este texto), ASP , etc. Sepuede elegir el que más guste con sus pros y sus contras, y su dinámica defuncionamiento es la siguiente:

Page 18: Ajax y Xhtml

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 servidorla ejecuta y le devuelve el resultado al cliente, que será solo HTML, nocontendrá lenguajes del lado del servidor ya que el navegador no loscomprende.

1.1.2 Visión en Conjunto

Se tiene un usuario que carga en su navegador una página compuesta porXHTML y Javascript cuyo estilo está en un archivo CSS si se lo separa; elnavegador crea el DOM asociado a la página y el Javascript lo modifica paraconseguir dinamismo.

Se tiene en el servidor páginas hechas con JSP, cuando el usuario pide unade estas páginas, el servidor la ejecuta y devuelve el resultado al usuario yasea 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 seriede términos, problemas y posibles soluciones y ver cuál es el papel de AJAXdentro 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.

Page 19: Ajax y Xhtml

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 seestá.

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 yutilizadas 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 detallanlas ventajas y desventajas de la utilización de cada una de estas:

• APPLET.

Page 20: Ajax y Xhtml

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 muchopara hacer juegos monousuario para Web ya que es programable con ActionS-cript .

— Ventajas:

∗ Es capaz de dar un aspecto visual inigualable actualmente conotras 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ónde escritorio.

∗ Utiliza Tecnología muy extendida como Java.∗ Las aplicaciones se pueden firmar digitalmente.∗ Se pueden seguir utilizando una vez desconectado.

Page 21: Ajax y Xhtml

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 yrefrescar solo la parte necesaria de la página sin perder nada del contexto, seterminaron 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 (cadavez 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ásnueva para ofrecer una experiencia rica al usuario es la utilización de AJAXy la verdad es que proporciona todo lo que promete, como se puede ver en losejemplos reales en los que se ha utilizado.

Page 22: Ajax y Xhtml

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ónprimero 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 InternetExplorer era capaz de generar el objeto XMLHttpRequest(llamado de otromodo). Cuando Mozilla Firefox, el navegador más grande de la competencia,implementó un objeto compatible, y más tarde el resto de navegadores decódigo abierto, empezó el boom.

Otro gran ejemplo del uso deAJAX esGoogle 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 losmapas, convirtiéndose en una verdadera guía para no perderse por la ciudad.

Page 23: Ajax y Xhtml

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

La aplicación tiene una calidad en las imágenes envidiable y todavía sepuede 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 generandoasí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 usode AJAX llega el momento en que las compañías que se dedican al desarrolloWeb hagan los cursillos de reciclaje a sus empleados, la documentación quesigue 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 haypersonas que se quieren iniciar en el desarrollo Web con AJAX.

Page 24: Ajax y Xhtml

CAPÍTULO 1. INTRODUCCIÓN 10

Figura 1.3: Página Google 2.

Page 25: Ajax y Xhtml

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 hacerdocumentos; normalmente los documentos contienen texto, párrafos (texto),imágenes (con el nombre de su archivo que es texto), tablas (que contienentexto), 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 encierranel texto sobre el que actúan, por ejemplo la tag <b>...</b> pone el texto ennegrita, las tags se pueden escribir tanto en mayúscula como en minúscula, esindiferente, el lenguaje no es sensible a ello.

2.1.2 Estructura del Documento HTML, Ejemplo Básico

<HTML>

<HEAD>

11

Page 26: Ajax y Xhtml

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> quees 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 discoduro, se debería obtener el resultado como se muestra en la figura 2.1 de lapágina 12.

Como se puede ver en la figura 2.1 de la página 12 del ejemplo anterior,

Page 27: Ajax y Xhtml

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 ala 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 sobreun 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 laimá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 navegadorutilizará el tamaño original de la imágen.

Page 28: Ajax y Xhtml

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 cargao cuando se posiciona el mouse encima de ella (esto último en InternetExplorer).

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éncentrarla. 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íaponer el tag <center> antes de la frase y el final </center> detrás del tagde 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 partedel documento. El código sería el siguiente:

<HTML>

<HEAD>

Page 29: Ajax y Xhtml

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>

Page 30: Ajax y Xhtml

CAPÍTULO 2. LAS RIA 16

Tablas

Una tabla HTML puede ser considerada de manera simple como un grupode filas donde cada una de ellas contiene un grupo de celdas. Las tablas, asícomo toda estructura en documentos HTML, son definidas usando tags. Acontinuació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>

Page 31: Ajax y Xhtml

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óndel código de ejemplo. A continuación se detallan las tags utilizadas en elmismo:

• <Tabla>...</Tabla>: Contiene toda la tabla y dentro es donde sepueden 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 unafila.

• <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 odocumentos separados, basados en la idea de una simple referencia sumada ala 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 eldocumento y el recurso vinculado. Los vínculos pueden ser clasificados comovisuales (ubicados dentro del contenido del documento) u ocultos (definiendoinformación relacional generalizada).

Page 32: Ajax y Xhtml

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 agregarun vínculo o enlace con otra página, en este caso a la página de un buscadorde Internet :

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

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

2.2 XHTML

XHTML (eXtensible Hypertext Markup Language), es el lenguaje de marcadopensado para sustituir a HTML como estándar para las páginas Web.

Como se ha visto, en HTML no existen restricciones muy significativas encuanto 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 haterminando usándose muchísimo y debido a esto se ha ido degradando un poco

Page 33: Ajax y Xhtml

CAPÍTULO 2. LAS RIA 19

su uso ya que no todos forman parte de la real academia, XHTML es una formaestricta de escribir HTML ya que esta definido en XML y tiene un documentoDTD de validación. Esta forma de escribir es totalmente compatible conHTML 4.01 ya que se definió a partir de éste, con lo cual, cualquier navegadorpuede 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 laanidació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ímbolode finalización, <br> ahora se escribiría como<br /> dejando un espacioentre br y / para que sea compatible con los navegadores actuales.

Page 34: Ajax y Xhtml

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 contenidoentre comillas:

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

• Los atributos ahora se tienen que escribir como se observa en la tabla2.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 ellenguaje 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>

Page 35: Ajax y Xhtml

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 ventajasde las capacidades de presentación de HTML y cuando es necesa-rio soportar navegadores que no aceptan CSS [6]. Quedaría de lasiguiente 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:

Page 36: Ajax y Xhtml

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áginasesten 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 estructurade 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 porel programador según convenga para crear formatos propios, luego se tomael texto que contiene las etiquetas seleccionándolas por su nombre [10]. Acontinuació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>

Page 37: Ajax y Xhtml

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 undocumento 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 sintaxissemejante 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 elparadigma de programación basada en prototipos, ya que las nuevas clases segeneran clonando las clases base (prototipos) y extendiendo su funcionalidad.

Todos los navegadores modernos interpretan el código JavaScript integradodentro de las páginas Web.

2.4.1 Crear un Nuevo Objeto

Como en cualquier otro lenguaje, no tiene ninguna particularidad especialaparte de que JavaScript tiene su sintaxis.

var miObjetoPruebas = new constructorObjeto(param01,...,paramN);

Page 38: Ajax y Xhtml

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 seencargará de construir el objeto en memoria e inicializarlo. Esta función se lellama 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 objetoque se está construyendo. A ese objeto que se está construyendo se le asignanvalores en sus propiedades y también nombres de funciones definidas parasus métodos. Al construir un objeto técnicamente es lo mismo declarar unapropiedad o un método, solo difiere en que a una propiedad se le asigna unvalor 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, perotambién es posible asignar una función en cualquier momento a una variablecomo se observa a continuación, esto se usa a lo largo de todo el libro parareasignar los manejadores de la clase AJAX.

Page 39: Ajax y Xhtml

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;

Page 40: Ajax y Xhtml

CAPÍTULO 2. LAS RIA 26

pastelSoloChocolate.montarPastel();

</script>

</body>

</html>

JavaScript permite emplear variables sin declarar, dentro o fuera de objetosy reasignar funciones a objetos, entre otras cosas. Se está en presencia de unlenguaje 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 contextode otro programa, por ejemplo un navegador Web. El applet debe ejecutarseen un contenedor, que lo proporciona un programa anfitrión, mediante unplugin, o en aplicaciones como teléfonos móviles que soportan el modelo deprogramación por applets.

A diferencia de un programa, un applet no puede ejecutarse de maneraindependiente, 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 carecede 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 ouna porción de texto. Cuando el navegador carga la página Web, el appletinsertado 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 otraque 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 unapplet 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 devideo incrustados en los navegadores como el Internet Explorer. Otros plugins

Page 41: Ajax y Xhtml

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, poreso se utiliza principalmente para el trabajo de páginas Web, ya que es unpequeño programa que es utilizado en una página HTML y representado poruna pequeña pantalla gráfica dentro de ésta.

Por otra parte, la diferencia entre una aplicación Java y un applet radicaen cómo se ejecutan. Para cargar una aplicación Java se utiliza el intérpretede Java (Visual J++ de Microsoft, Forte de Sun de Visual Café). En cambio,un applet se puede cargar y ejecutar desde cualquier explorador que soporteJava (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 quetrabaja sobre “Fotogramas” destinado a la producción y entrega de contenidointeractivo para diferentes audiencias alrededor del mundo sin importar laplataforma. Es actualmente escrito y distribuido por Adobe Systems, y utilizagráficos vectoriales e imágenes ráster, sonido, código de programa, flujo devideo y audio bidireccional (el flujo de subida sólo está disponible si se usaconjuntamente con Macromedia Flash Communication Server).

En sentido estricto, Flash es el entorno y Flash Player es el programa demáquina virtual utilizado para ejecutar los archivos generados con Flash.

Los archivos de Flash, que tienen generalmente la extensión de archivoSWF, pueden aparecer en una página Web para ser vista en un navegador, opueden ser reproducidos independientemente por un reproductor Flash. Losarchivos de Flash aparecen muy a menudo como animaciones en páginas Weby 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 hastaentonces como Macromedia Flash R© y adquirido por Adobe Systems (desdeentonces conocido como Adobe Flash) ampliando con ello su portafolio de

Page 42: Ajax y Xhtml

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 unservidor Web de aplicaciones comprobando previamente si el cliente tiene laversión actualizada de dicha aplicación. Si no es así descargará la últimaversión y se ejecutará en local.

El arranque de dichas aplicaciones puede ser efectuado mediante enlacesen una página Web o bien a través de enlaces en el escritorio cliente. Medianteesta 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 encuentrala aplicación, versión, etc. tiene la extensión jnlp.

Un ejemplo de esta tecnología es la de un servidor Web donde se encuentrauna página Web HTML con enlaces a aplicaciones Java. Cada uno de estosenlaces apuntará a ficheros .jnlp que indicarán la ruta de la aplicación en esteu otro servidor. En ese momento arrancará automáticamente Java Web Starty comprobará la seguridad y si el usuario tiene la última versión instalada yaen su equipo, si no es así, la descarga y la ejecuta.

Actualmente Java Web Start viene incluido en el JRE (Java RuntimeEnvironment).

Sun Microsystems y Java Web Start son marcas registradas por Sun Mi-crosystems, Inc.

El software de Java Web Start permite descargar y ejecutar aplicacionesJava 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.

Page 43: Ajax y Xhtml

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) comoparte de JRE 5.0. Esto significa que al instalar el JRE, Java Web Start seinstala automáticamente.

Cuando se descarga por primera vez una aplicación que utiliza la tecnologíaJava Web Start, el software de Java Web Start se ejecuta automáticamentey guarda la aplicación localmente, en la memoria caché del equipo. De estemodo, las subsiguientes ejecuciones son prácticamente instantáneas, ya que losrecursos necesarios están disponibles de forma local.

Cada vez que se inicia la aplicación, el componente de software de JavaWeb Start comprueba si en la sede Web de la aplicación hay una versión nuevadisponible; 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 JavaWebStart

• Desde un navegador: solo es necesario hacer clic en un vínculo de unapá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 sinnecesidad de un navegador.

• Desde el Visualizador de la memoria caché de aplicaciones deJava: Java Web Start también proporciona un Visualizador de la memo-ria caché de aplicaciones, que puede ejecutar desde el Panel de control deJava. Este visualizador le permite ejecutar directamente las aplicacionesque 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, dondejnlp_url corresponde a la URL del archivo jnlp de la aplicación.

Page 44: Ajax y Xhtml

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 unacombinación de lenguaje HTML estático, un lenguaje interpretado en el ladodel 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 losscripts en el lado del cliente cambian el HTML del documento, después deque éste se haya cargado completamente, lo cual afecta a la apariencia y lasfunciones de los objetos de la página.

La característica dinámica del DHTML, por tanto, es la forma en que lapágina interactúa con el usuario cuando la está viendo, siendo esta la mismapara todos los usuarios.

En contraste, el término más general “página web dinámica” se usa parareferir a alguna página específica que es generada de manera diferente paracada usuario, en cada recarga de la página o por valores específicos de variablesde 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 antesde enviarla al cliente, o bien de la ejecución en la parte cliente de un códigoque crea la página completa antes de que el programa cliente (usualmente, unnavegador) la visualize.

En una página DHTML, una vez que ha sido cargada completamente porel cliente, se ejecuta un código (como por ejemplo JavaScript) que tiene efectosen 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 visualde 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.

Page 45: Ajax y Xhtml

• 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 palabrasclave.

• Cronómetros, etc.

• Otro uso interesante de esta tecnología es la creación de juegos de acciónque utilizan el navegador Web para funcionar, aunque tradicionalmenteeste tipo de desarrollos han sido complicados debido a las diferencias enel lenguaje y las características soportadas por los distintos navegadoresexistentes.

Recientemente los navegadores más populares han empezado a soportarestándares comunes, como el DOM, lo cual ha facilitado mucho la creación deeste tipo de aplicaciones.

• En DHTML, el tag <noscript> puede ser usado para poner informaciónque se mostrará cuando el navegador no soporte Javascript o lo tengadeshabilitado.

Page 46: Ajax y Xhtml

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 pararealizar 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 sepresenta como una clase de la que una aplicación cliente puede generar tantasinstancias como necesite para manejar el diálogo con el servidor.

El uso más popular, si bien no el único, de esta interfaz es proporcionarcontenido dinámico y actualizaciones asíncronas en páginas Web mediantetecnologías construidas sobre ella como por ejemplo AJAX.

En este capítulo se demuestra su uso mediante ejemplos utilizados en laaplicación final.

Para comenzar es necesario construir una pequeña librería (archivo carga-do por el navegador) programada haciendo uso de JavaScript, primero paracomprender cómo funciona el objeto XMLHttpRequest que se ha hecho muyfamoso 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, comose verá seguidamente y, también para reutilizar código [8].

32

Page 47: Ajax y Xhtml

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óncliente debe crear una nueva instancia mediante el constructor adecuado. Esposible realizar peticiones síncronas y asíncronas al servidor; en una llamadaasíncrona el flujo de proceso no se detiene a esperar la respuesta como se haríaen 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 proxycache 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 yMIME. El estándar XMLHttpRequest recomienda UTF-8 para la codificaciónde cadenas de texto.

La codificación particular de los datos transmitidos se determina según elsiguiente 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ónse detectará basándose en las reglas estándar de XML o HTML segúncorresponda.

• Si la cabecera HTTP especifica un tipo MIME mediante Content-Typee identifica un charset se utiliza dicho charset.

• Si los datos enviados especifican un BOM válido, se utilizará la varianteUTF 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:

Page 48: Ajax y Xhtml

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 34

• La tecnología que use el servidor debe ser indiferente, es decir no debeactuar 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ódigocompatible.

• Debe manejar la comunicación asíncrona ocultando las operaciones abajo nivel.

• Debe dar al desarrollador una forma fácil de acceder al DOM (DocumentObject Model).

• Debe dar cierto manejo ante errores, primero para que el programa nocolapse 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 intentarhacer una aplicación Web medianamente vistosa se convertiría en un trabajotedioso, que además será casi imposible de mantener.

Características avanzadas que podría cubrir una librería en el lado delcliente:

• 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 normalmentepor 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.

Page 49: Ajax y Xhtml

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 35

• Los entornos IDE no tardarán mucho tiempo en darle soporte, al menosa las más importantes de código abierto.

La librería que se construirá cubrirá las características básicas; para cubrirlas características avanzadas existen multitud de librerías de código abiertoy comerciales, además no aportan demasiado a la comprensión del problemaque resuelve AJAX sino más bien, como se ha dicho anteriormente, mejoranla experiencia visual.

Muchas de las librerías pueden ser difíciles de utilizar para el usuario noexperto y las que pueden ser mas fáciles esconden totalmente el problema.

En los siguientes ejemplos se utilizará AJAX a bajo nivel, en primer lugarse 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 porMicrosoft, usado desde Internet Explorer 5.0 como un objeto ActiveX, siendoaccesible mediante JavaScript. Mozilla en su versión 1.0 implementó un objetocompatible.

Debido a que estos dos últimos son los navegadores más difundidos y queademás existen navegadores basados en el código de Mozilla, es recomendableintentar la compatibilidad en ambos, y de esta manera conseguir que el códigofuncione en forma óptima en más del 90% de las veces.

Ejemplo:

El siguiente ejemplo muestra cómo redireccionar una página HTML enforma 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 objetobotón que responde al evento “onclick”. Cuando ocurre el evento sellama 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 ejecutauna función que realiza la comunicación asíncrona con el servidor lla-mando a un servlet que reside en él.

Page 50: Ajax y Xhtml

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 36

3. Clase java que extiende a la clase HttpServlet y redefine el método Getpara el tratamiento de los requerimientos y las respuestas: resibe elrequerimiento 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é lacreación del objeto XMLHttpRequest de tal forma que sea compatiblecon 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(){

Page 51: Ajax y Xhtml

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 unbotó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>

Page 52: Ajax y Xhtml

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 armala 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 />” );

Page 53: Ajax y Xhtml

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 queocurra el evento.

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

3.3 Navegadores Compatibles

Como se vió en el ejemplo anterior, es necesario tratar de manera diferente lacreació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 objetoXMLHttpRequest es la siguiente:

• Mozilla Firefox 1.0 y superiores.

Page 54: Ajax y Xhtml

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 estose está trabajando actualmente en navegadores para llevar AJAX hasta losdispositivos 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 iniciarla conexión, se puede decir que son los obligatorios:

Page 55: Ajax y Xhtml

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

∗ banderaAsync: si su valor es true realiza una petición asíncronay si es false realiza una petición síncrona.

∗ Nombreuser y password : solo se usan para acceder a recursosprotegidos.

• 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 lallamada HTTP como un string.

• Método:getResponseHeader(cabecera): devuelve la cabecera identificadapor 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 seriede propiedades que indican el estado de la petición durante su ejecución. Sepueden 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;

Page 56: Ajax y Xhtml

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 42

• Mensaje de texto enviado por el servidor junto al código (status), parael 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 puedeser 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 queel estado conexión cambia, es decir, se asigna una función que cada vezque el estado dado por readyState cambia se lanza, por ejemplo se podríavisualizar 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 delas 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íncronao asíncrona, el código es el siguiente:

Page 57: Ajax y Xhtml

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 XMLreadyState 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 manejadorque 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 bloqueadohasta que recibe la información, en los ejemplos anteriores no se ha notadodebido a que se trata de pruebas sencillas que no reciben gran cantidad deinformación.

En cambio si se realiza una petición asíncrona el usuario puede moverse porla 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ónpero sin bloquear al navegador; es recomendable utilizar peticiones asíncronaspara aumentar la interactividad.A continuación se muestra un ejemplo:

• Código JavaScript:

function MostrarUrl(){

divResultado = document.getElementById(‘resu’);

Page 58: Ajax y Xhtml

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>

Page 59: Ajax y Xhtml

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{

Page 60: Ajax y Xhtml

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.

Page 61: Ajax y Xhtml

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 47

Ahora surge un problema, ¿cómo sabe el usuario que está esperando lainformación, si no tiene muestra alguna de ello?, él sólo sabe que ha pulsadoun botón (en el ejemplo anterior), lo ideal sería que recibiera alguna señal. laforma 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 siguientecó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”

Page 62: Ajax y Xhtml

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 queperfectamente pueden ser GIFs animados y mostrar así los diferentes estadosde carga y error, aumentando la interactividad y enriqueciendo la esperienciadel 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íatienden a hacer uso de los mismos para garantizar más interactividad y mejorfuncionalidad.

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 mediadaspara 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 nombradasanteriormente.

Page 63: Ajax y Xhtml

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 objetosla definición de clase con los constructores.

y se instancia con su constructor.Se crea un nuevo objeto Igualcon el operador “new”.

Se construye una jerarquia de Se construye una jerarquia de objetosobjetos usando definiciones de asignando un objeto como el prototipoclases 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 otodas 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.

Page 64: Ajax y Xhtml

CAPÍTULO 3. EL OBJETO XMLHTTPREQUEST 50

Empleado

function Empleado () {

this.nombre = "";

this.departamento = "general";}

Empleado.prototype.especialidad = "ninguna";

Trabajador

funct ion Trabajador () {

this.proyectos = [] ;

}

Trabajador.prototype = new Empleado;

Ingeniero

function Ingeniero () {

this.departamento = "ingenieria";

this.ordenador = "";

}

Ingeniero.prototype = new Trabajador;

Ingeniero.prototype.especialidad = "codigo";

Jerarquía de Objetos Objetos Individuales

Juan = new Empleado;

Juan.especialidad es "ninguna"

Lucas = new Trabajador;

Lucas.especialidad es "ninguna"

David = new Ingeniero;

David.especialidad es "codigo"

Figura 3.4: Ejemplo de uso de Prototipos.

Page 65: Ajax y Xhtml

3.6.2 Prototype vs Encerrar las Funciones

Es posible encerrar todo el código dentro del constructor, de forma que sólo seharí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 seauto-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 unabuena técnica para limpiar código, tiene un problema técnico. Encerrar lasfunciones 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 creapara cada objeto, lo que no es un problema si se crean pocos objetos a la vezen 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 comoestá 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 queel desarrollador final que utilice la clase no pueda tocarlos en el transcurso delprograma y por consiguiente estropear algo de manera que tuviera que crearun nuevo objeto para cada petición (como en JavaScript no existe un public yun private, se deberían poner esas variables y métodos en un lugar donde notuviera visibilidad el creador del objeto).

A cambio se pierde mucha funcionalidad ya que en ocasiones será necesarioreutilizarlo 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 variablesy los métodos de los objetos creados serán públicos debido a las necesidadesde trabajo que pueden surgir con AJAX.

Page 66: Ajax y Xhtml

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 entornoWeb, dicho entorno debe ser depurado, el presente capítulo describe las herra-mientas necesarias para ello. Existen varias herramientas, pero no se tratarántodas, las elegidas han sido escogidas por sus capacidades potenciales y sucondición de gratuitas, las mismas se integran al mismo programa, en estecaso 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áginaprincipal 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 eshttps://addons.mozilla.org/firefox .

52

Page 67: Ajax y Xhtml

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 archivodescargado previamente, Firefox detectará que es una de sus extensionesy permitirá su instalación.

• Reiniciar el navegador.

• Una vez instalado deberían aparecer las siguientes utilidades al iniciarMozilla Firefox en el menú Herramientas.

Las utilidades que deben aparecer como se puede observar en la figura 4.1de la página 53 son las siguientes:

Page 68: Ajax y Xhtml

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>

Page 69: Ajax y Xhtml

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 parallamar a la función se obtendrá lo que se muestra en la figura 4.2 de la página55.

La consola detecta el error en el código, provocado al intentar aplicar lafunción length a un objeto del tipo String. Al hacer clic sobre el enlace queaparece en la consola, la misma llevará a la línea dentro del código JavaScripten 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.

Page 70: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 56

Figura 4.3: Código que produjo el Error.

4.4 Document Object Model Inspector (Inspectordel DOM)

Esta herramienta permite ver el árbol de objetos del documento con todos loscampos de cada etiqueta.

Cuando se realiza una inserción de códigoHTML en una página mediante elobjeto XMLHttpRequest, ese cambio no es apreciable y la consola no devuelveningún error. Esto se debe a que el código insertado puede ser correcto perono hace lo que debería, la solución es ver lo que realmente se ha insertadomediante el Inspector del DOM . Esta utilidad busca el error dentro del códigoinsertado, 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()

Page 71: Ajax y Xhtml

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 conocela ruta de su ubicación, no es necesario enviar información al servidor y por lotanto en este ejemplo no se utiliza AJAX, solo demuestra el funcionamientode 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 sobreel enlace que aparece en la misma, la petición de lanza y se obtiene comoresultado 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 yla imagen se ha insertado con su tamaño original, sin respetar las medidas quese pretendían, el error se encuentra en el código HTML. El DOM inspectortiene la capacidad de detectar las propiedades insertadas en el código HTMLy, por lo tanto, verificar si se han insertado correctamente o no.

Page 72: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 58

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

Page 73: Ajax y Xhtml

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 herramientaDOM y luego desplegar las sucesivas ramas del árbol jerárquico que formanlas etiquetas HTML como muestra la figura 4.5 de la página 59 hasta llegar alcódigo correpondiente a la imagen.

Se insertado “border”, “alt”, “eight”, “idth” y “src”, como se observa enla figura 4.5 los atributos “eight” y “idth” tienen los valores 240 y 320, perosu sintáxis es incorrecta. Para solucionar este error solo es necesario corregirla sintáxis.

Page 74: Ajax y Xhtml

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 nopermita continuar hasta depurar el error. Al ubicar el cursor dentro de unafunción, se puede apreciar cómo cambian los valores de las variables localessobre la marcha al ejecutar un “step by step”.

El ejemplo que se muestra a continuación, es una versión modificada dedepuracion1.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);

Page 75: Ajax y Xhtml

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ágina62.

¿Cómo funciona?

Se deben seguir las siguientes instrucciones:

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

2. Una vez hallado el archivo, hacer doble clic para visualizar su código enel 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 seejecutará hasta llegar al primer punto de ruptura, en ese momento sedetendrá, como se muestra en la figura 4.8 de la página 64.

Page 76: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 62

Figura 4.6: Pantalla de Inicio de Venkman.

Page 77: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 63

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

Page 78: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 64

Figura 4.8: Venkman Detenido en el Punto de Ruptura.

Page 79: Ajax y Xhtml

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 puedeir 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ñadiruna expresión como el valor de una variable local. La figuara 4.9 de lapágina 65 visualiza la situación.

Lo demostrado mediante el ejemplo es básicamente lo que se puede hacercon el depurador. Permite examinar el código paso por paso viendo el valorde las variables.

Page 80: Ajax y Xhtml

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 todala 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 paradesarrolladores y programadores Web. Es un paquete de utilidades con elque se puede analizar (revisar velocidad de carga, estructura DOM ), editar,monitorizar y depurar el código fuente, CSS, HTML y JavaScript de unapá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 iconode la esquina inferior derecha como muestra la figura 4.10 de la página66, 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 empiezaa actuar mostrando el error en la consola como se puede observar en lafigura 4.12 de la página 68.

Firebug no es un simple inspector como DOM Inspector, además edita ypermite guardar los cambios, un paso por delante del conocido Web Developer.Su atractiva e intuitiva interfaz, con solapas específicas para el análisis decada tipo de elemento (consola, HTML, CSS, Script, DOM y red), permiteal usuario un manejo fácil y rápido. Firebug está encapsulado en forma deplug-in o complemento de Mozilla, es Open Source (aunque no Free Software)y de distribución gratuita.

Page 81: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 67

Figura 4.11: Pestañas o Solapas de FireBug.

Page 82: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 68

Figura 4.12: Error Visualizado en la Consola de FireBug.

Page 83: Ajax y Xhtml

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 sobreel 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 desarrolladorWeb para hacer de su aplicación una aplicación de calidad, esto se debe a quepermite eliminar de la aplicación los molestos alert().

La consola de Firebug tiene 6 apartados:

• Console.

• HTML.

• CSS.

• Script.

• DOM.

• NET.

Page 84: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 70

Console La consola es uno de sus puntos fuertes, muestra las peticionesAJAX (GET o POST) que realiza la página, headers, variables enviadas y larespuesta del servidor.

También muestra los errores Javascript que se producen en la página juntoa 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 objetocontiene muchos métodos que permiten mostrar información en la consola deun modo transparente y sin necesidad de recurrir a los “alert()”.

HTML

Mediante esta funcionalidad Firebug permite editar el html en tiempo realy además ofrece muchas facilidades para ello, especialmente interesante es el“Inspector de HTML” que permite detectar los elementos deseados únicamentepasando el ratón por encima, una vez localizado el elemento se puede editaren 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.

Page 85: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 71

CSS

En esta pestaña puede acceder fácilmente a la edición de estilos de lapágina, es muy intuitivo y tremendamente útil ya que todos los cambios serealizan en tiempo real.

A menudo los pequeños retoques de hojas de estilo se convierten en unatarea nada agradable para el desarrollador ya que su comportamiento en cadanavegador es en numerosas ocasiones diferente, esta herramienta es ideal paraprincipiantes que necesitan de muchas pruebas para encontrar los errores ensu 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

Page 86: Ajax y Xhtml

CAPÍTULO 4. HERRAMIENTAS DE DEPURACIÓN 72

Es un potente debugger de Javascript que permite manejar la ejecuciónde los códigos javascript, y conseguir un buen aumento del rendimiento delcó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 cargay ejecución que ha provocado la navegación por la página.

DOM

Page 87: Ajax y Xhtml

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 parala representación de Documentos” y por lo tanto se trata de la interfaz a travésde la cual los programas y scripts pueden acceder y modificar dinámicamenteel 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 cargade 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 seencuentra 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é.

Page 88: Ajax y Xhtml

• Examinar las cabeceras.

• Monitorizar el XMLHttpRequest.

Page 89: Ajax y Xhtml

Capítulo 5

Técnicas Básicas de Peticiónde Información

5.1 Introducción

Lo realmente interesante del objeto XMLHttpRequest es utilizarlo para traer ala 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 esmejorar la librería para utilizar el objeto y tener una sencilla función que lohaga 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 formamuy sencilla. El siguiente ejemplo demuestra cómo insertar código HTML:

• Archivo: insertarHTML.html

<HTML>

75

Page 90: Ajax y Xhtml

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 lapá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 creanel objeto XMLHttpRequest, etc., a continuación solo se transcribe el códi-go correspondiente a la función tomarHTML().

Page 91: Ajax y Xhtml

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 yse ejecuta la función tomarHTML(), esta crea el objeto XMLHttpRequest einserta el código html que se encuentra en el archivo pagina01.html en formatode texto mediante “innerHTML”. El resultado muestra la inserción de unaimágen en la página principal, como se puede observar en la figura 5.8 de lapágina 91.

Hasta ahora no se había mencionado a la etiqueta <span>, ésta defineuna sección dentro del documento, en este caso la sección comienza antes delbotón y termina después de éste, además esa es la sección de código que se vaa 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

Page 92: Ajax y Xhtml

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

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

Page 93: Ajax y Xhtml

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 “lapá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 laque se ha cargado.

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

5.3 Insertar Imágenes Usando el DOM

Aunque se pueda insertar imágenes como HTML, también se puede crear laetiqueta 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 unfuturo, como en principio parece que no tiene utilidad se mostrará un ejemplopráctico real de una aplicación Web AJAX.

Page 94: Ajax y Xhtml

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

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

Page 95: Ajax y Xhtml

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, mientrasse 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óndel mapa. Por supuesto que la complejidad de google Maps no se halla en lainserció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>

Page 96: Ajax y Xhtml

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 utilizadouna etiqueta <spam> para sustituir un campo del código, y además sele ha puesto a la imagen el tamaño que tendrá, pero no el campo srcdonde se encuentra, de forma que en el cuadro que aparecerá vacío parauna imagen se puede insertar la imagen que se desee.

2. La dirección de la imagen se encuentra en un archivo txt, que tambiénpodría estar en un fichero html, pero el contenido sería el mismo, lasextensiones dan igual, solo se está eligiendo un fichero de donde cargartexto, se ha puesto así para que quede más claro.

Page 97: Ajax y Xhtml

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 esla página original, se elige un elemento de la página con getElementById quees la imagen a la que se le ha dado un id, y por ultimo se accede al campo .srcde la imagen01, que aunque no se ha escrito, existe, es nulo, pero existe, y sele está diciendo que es “=” a la respuesta en formato texto, con lo cual se leindica dónde se encuentra la imagen.

En los ejemplos anteriores se accedía al código HTML delimitado por laetiqueta <spam>, es decir, se estaba sustituyendo dentro de la propiedad quecontiene el código HTML, por eso el texto se interpretaba como código.

Esta es la forma de cambiar campos del DOM dinámicamente cargandosu contenido mediante AJAX, en este caso, se ha utilizado para cargar el srcde una imagen contenida en un txt, si se hubiera insertado directamente sinhacer una petición al servidor no sería AJAX. [4]

El uso del DOM tiene más posibilidades aunque su uso es muy tedioso paraprogramadores 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 ciertosprogramas, 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 posibletomar ese código de un archivo preparado anteriormente o generado por elservidor dinámicamente y devuelto.

Un ejemplo sencillo de llamar ejecutar código Javascript con AJAX sería:

• Archivo insertarJavascript.html

<HTML>

Page 98: Ajax y Xhtml

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)

Page 99: Ajax y Xhtml

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 evaluarcódigo Javascript, también se pueden cargar más peticiones AJAX, desde unapetición AJAX, es decir, peticiones indirectas.

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

• Archivo insercionesIndirectas.html

<HTML>

Page 100: Ajax y Xhtml

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

Page 101: Ajax y Xhtml

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ódigoJavascript contenido dentro de un fichero de texto, este contenía una llamadaAJAX que cargaba un pedazo de código HTML dentro de un pedazo contenidopor una etiqueta <span>.

Se han analizado las posibilidades de utilización; por supuesto a la horade utilizarlo realmente se debe elegir la situación mas adecuada, las peticionesindirectas son buenas para que una petición haga generar al servidor la segundapetición de forma dinámica si se está buscando una información de la cual soloel 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 decaracterísticas importantes como la herencia y se basa en prototipos.

Ya que el lenguaje interactúa con los objetos del navegador, cuando sedescarga una página HTML que contiene JavaScript, este código sigue estandodentro de la página ya que el lenguaje actúa en la parte del cliente, en cambiolenguajes como ASP, PHP o JSP generan lenguaje HTML desde el servidory 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 observaren la figura 5.6 de la página 89:

Page 102: Ajax y Xhtml

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á deforma 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 debeestar delimitado por estos tags de principio y fin, el resultado es el que semuestra en la figura 5.7 de la página 89.

Page 103: Ajax y Xhtml

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.

Page 104: Ajax y Xhtml

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 yobligaría a los usuarios a utilizar éste, además algunos estándares se tratan demanera diferente dependiendo del navegador lo que obliga a crear código conbifurcaciones que primero detecte el navegador y dependiendo de éste ejecuteun pedazo de programa u otro sin dar errores.

Es normal que los diferentes toolkits que hay para programar aplicacionesWeb orientadas a AJAX resuelvan estas incompatibilidades por el programa-dor cuando no queda mas remedio en cambio en la mayoría de las ocasioneses posible encontrar un camino estándar que exista en todos los navegadores.

El árbol de objetos del navegador es un árbol general que contiene tantométodos y propiedades del navegador como las creadas por el usuario, comose 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 cambiala página, en cambio también se puede modificar el documento cambiando lasdiferentes propiedades de cada nodo, esto es más complejo y laborioso peropermite crear entornos realmente atractivos,es posible crear etiquetas, insertartexto y modificar propiedades mediante JavaScript.

5.6 DOM API e innerHTML

La causa que hace que modificar el documento haciendo uso de innerHTMLsea más fácil que modificar el DOM es que mientras que innerHTML modificala estructura textual del documento, el DOM modifica la estructura lógicaque se encuentra a un nivel más bajo.

Para comprender el siguiente código se debe entender que el DOM de unapá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 lapágina, se debe tener cierto cuidado.

dom api.html

<html>

<head>

Page 105: Ajax y Xhtml

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

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

Page 106: Ajax y Xhtml

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

{

Page 107: Ajax y Xhtml

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 DOMdirectamente, como se ve, es trabajar con las funciones de un árbol y se deberecordar que no se está dando formato al texto, aunque ahora se podría usarhojas de estiloCSS [5] como piden los documentosXHTML estrictos, la verdades que debido a lo estrictos que son se termina poniendo la extensión htmlnormal 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>

Page 108: Ajax y Xhtml

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 seinserte algo como código html, la complejidad es la misma.

Page 109: Ajax y Xhtml

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 quedé la información, las posibilidades son muchísimas debido a que ya se sabecómo pedir código en formato de texto, imágenes y Javascript. Lo siguienteserá poder hacerlo con una línea de código y olvidarse de la programación abajo nivel. Es lo que se hará, se puede imaginar que se está a punto de leer unmontó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 delos 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>

Page 110: Ajax y Xhtml

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ónque 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í quese crea una variable con su contenido, como anteriormente.*/

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

{

document.getElementById(idActual).innerHTML = respuestaTexto;

Page 111: Ajax y Xhtml

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

}

this.coger(this.ruta); /*Si alguien ha llamado a la función tomarHtml es porquequiere 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óntomarHtml.

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

Page 112: Ajax y Xhtml

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 tipo1</button>

</center>

</span>

</body>

</html>

En cambio si se vá a insertar directamente en el DOM, se supone quelas características de la imagen ya están en la página y solo se nesecita quedevuelva su dirección.

insertarImagen2.html

<html>

<head>

<title>Insertar Imagen</title>

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

Page 113: Ajax y Xhtml

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 tipo2</button>

</center>

<center>

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

<center>

</span>

</body>

</html>

Page 114: Ajax y Xhtml

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

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

Page 115: Ajax y Xhtml

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É SEQUIERE AJAX!! (Para los que no se hayan enterado todavía, si se sabe dóndeestá la imagen, se puede cambiar su src document.getElementById(idActual).src= rutaImagen;

directamente en Javascript sin necesidad de invocar al servidor medianteel objeto XMLHttpRequest) */

}

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

Page 116: Ajax y Xhtml

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ónde tomar propia de las imágenes.

El resultado de lo anterior sería mostrar la imagen del ratón, no añadenada 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 lasmentes 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>

Page 117: Ajax y Xhtml

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ñadela función de tomar al objeto. */

alertaejemplo.js

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

Page 118: Ajax y Xhtml

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 detener 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, puedesintroducir 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 urlno existiese se entraría en estado 4 y ocurriría lo siguiente, figura5.9 de lapagina104

Page 119: Ajax y Xhtml

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ódigo404 y el servidor ha devuelto la típica página de error, ¡se va a insertar lapágina de error!, parece que no es muy grave, en verdad se va a enterar delerror perfectamente, pero quedaría más bonito que saliera una alarma dándo lamisma información y no ocurriera nada, además existen más códigos de errormenos típicos. Hasta ahora todo lo que se há hecho si funciona correctamentedevuelve el código 200, por lo que cualquier cosa que no sea 200 ahora mismose la toma como extraño.

Una pequeña detección de errores sería la siguiente (como el código es largose 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();

Page 120: Ajax y Xhtml

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;

}

}

Page 121: Ajax y Xhtml

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ásclaro, es un pequeño cambio pero uno que dará información sin necesidad deestar utilizando un depurador, sin contar que es bastante más elegante detectarun posible error que dejar ver lo que pasa y si encima se quiere tratarlo dealguna manera, se puede hacer con un manejador que está por defecto enblanco 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íaAJAX pulsará sus botones y esperara que ocurra “algo”, y desesperará, porello estaría bien que viera algo mientras espera, un barra de carga, un monosaltando, 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 HTMLuna función que se llamará cuadroEstadoCarga, que no será obligatorio usarlay que se podrá redefinir en el código de la página, por si no gusta el que sehace por defecto, pero que si se quisiéra usar, funcionará sin que se tenga quehacer nada más que decírselo, con los siguientes resultados: figura5.10de lapágina108.

Se ha utilizado un texto un poco raro del que hay que dar crédito al creadorde la librería isiAJAX en unos foros, usó este texto para uno de sus ejemplosde carga largos y se puede encontrar su trabajo en sourceforge, es un archivode texto de unos 20 Megas, si se está haciendo las pruebas en un servidorinstalado en una PC de casa es mejor que sea un archivo grande, si además esun archivo de texto y el navegador se ve obligado a procesarlo puede ayudar aque 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

Page 122: Ajax y Xhtml

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

Figura 5.10: cuadroEstadoCarga

Page 123: Ajax y Xhtml

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>

Page 124: Ajax y Xhtml

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 elcódigo HTML del cuadro cancelar que se ha visto en la imagen, se puedaponer que la imagen del cuadro cancelar es un link al método abort del objetoXMLHttpRequest de la variable.

Para mostrar el cuadro lo único que se hace es colocarlo en el lugar dondeirá 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 siguientemodificació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íacancelar 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 elcuadro 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;

}

Page 125: Ajax y Xhtml

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

if (this.nombreVariable) //Sin nombre no hay cuadro, lo muestra antes de empezarla 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 lanzala 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.

Page 126: Ajax y Xhtml

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 cuadroaparece por defecto centrado para dar un mejor aspecto como se ve en elcódigo HTML generado, no es más que un par de imágenes y un link conmuchas barras invertidas para quitarle a las comillas su sentido de carácterespecial.

Igualmente que se haya hecho esto aquí se podría añadir a la petición delas imágenes de Tipo 1 pero, como no añade nada nuevo, no se explicará yaque se hará exactamente lo mismo; se lo añadiría antes de que apareciera laimagen y luego ésta lo sustituiría.

Page 127: Ajax y Xhtml

Capítulo 6

Ejemplos Reales de Uso ParaAJAX

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 losacentos, para que a la hora de transferir información se pueda hacer respetandola lengua de origen, luego se verán una serie de ejemplos típicos del uso quese le da normalmente a AJAX [4] en la Web.

Otro aspecto interesante que se tratará en este capítulo es el estándar xhtmlestricto marcado por consorcio World Wide Web, creado con una extensiónpara Mozilla Firefox llamada tidy , pero usado luego como documentos htmlnormales 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 sepodría hacer haciendo uso de lo visto hasta el momento. La figura 6.1 de lapá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

Page 128: Ajax y Xhtml

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ípicasque se pueden encontrar en un portal Web; aunque puede variar su posicióny 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 vezdesaparecerán de la página, en cambio el cuerpo de la página(zona 1 del afigura 6.1), cambiará dependiendo de la sección. Lo ideal sería que cuandocambie 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 elegantey más dinámico.

Page 129: Ajax y Xhtml

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

6.3 Métodos GET, POST y Caracteres Especialesen 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 setratarán a continuación.

Método GET

El método get envía información al servidor como parte de la URL. El servidoranalizará la URL pedida por el agente de usuario y separará la informaciónrelevante 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 GETal 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

Page 130: Ajax y Xhtml

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

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

6.3.2 Caracteres Especiales

Este problema surge debido a las diferentes codificaciones que hay para loscaracteres en texto plano, si la página corre de forma local no hay problemapero 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 ycuando se muestren al final serán unos signos de interrogación algo pintorescosy extraños.

Para resolver este problema se deben hacer dos cosas, la primera es guardarlas páginas Web que se escriban en formato de texto UTF-8 que contiene todoslos símbolos, una vez terminada la página Web se debe guardar en formatoUTF-8 de la siguiente manera:

• Abrir el archivo html como si de un texto normal se tratase con el blocde notas “en Windows” e ir al menú archivo->Guardar como, como semuestra 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álusar al crear el objeto y seleccionar más tarde el método con una estructurade selección simple será suficiente, se remarcará lo interesante en el código yse omitirá lo que no sea necesario.

Page 131: Ajax y Xhtml

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

Figura 6.2: Guardar en Formato URF-8.

Page 132: Ajax y Xhtml

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

// 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 losvalores 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

Page 133: Ajax y Xhtml

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 utilizarlos métodos GET o POST como se ve en el código siguiente que no tiene nadaespecial 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 siguientedirectiva y guardar el archivo con codificación UTF-8 utilizando el bloc de notasmediante la opción Guardar Como.->

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

<%

Page 134: Ajax y Xhtml

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 lahora de usar un método u otro ya que el método POST envía los valores enuna cadena aparte de la url.

Ejemplo: Peticion.html(solo parte del archivo)

function datosCuestionarioEnCadena() //Esta función construye una cadena conlos 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=” +

Page 135: Ajax y Xhtml

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

Apellidos + “&Cumple=” + Cumple;

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

}

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 datosvan 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 datosen 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 losdatos van en cadenas diferentes.

//Cadena de los datos

var datosPOST = datosCuestionarioEnCadena() + “&TimeStamp=” + new Da-te().getTime();

Page 136: Ajax y Xhtml

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 siuna página Web existe o un usuario existe, se realicen sin necesidad de que elusuario tenga que pulsar ningún botón. Estas acciones se realizan automáti-camente cuando fueran útiles, evitando muchas veces cargar una página deerror, el ejemplo que se muestra a continuación trata una hipotética creaciónde usuario. Este ejemplo intenta resolver de forma más elegante la sobrecargaal servidor, evitando la necesidad de generar una página nueva de error, conla consecuente pérdida de tiempo.

El ejemplo siguiente consta de 3 archivos, uno .html que tiene tanto códigoJavascript como HTML y dos archivos .jsp, el único archivo que no es pequeñoes 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, JuanMay Sergio.

<br />

Se quiere crear un nuevo usuario.

<br />

El sistema comprobará mientras que escribes si tu nombre de usuario esta ya enla base de datos o no.

Page 137: Ajax y Xhtml

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 decargar la página se lanza una función, esta función desconectará el botón yaque éste se activará y desactivará dependiendo de si el usuario introducido esválido o no, el aspecto del ejemplo es el mostrado en la figura 6.4 de la página124.

Page 138: Ajax y Xhtml

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

Figura 6.4: Ejemplo de Verificación de Usuarios Usando AJAX.

Page 139: Ajax y Xhtml

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

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

}

}

Page 140: Ajax y Xhtml

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á usandopor 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.jspque reside en el servidor, si éste es de al menos de cuatro caracteres, el servidorsólo puede contestar true (el nombre se puede usar) o false (nombre ocupado).

Page 141: Ajax y Xhtml

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 lellegará la típica página diciendo que su nick de registro está ya utilizado, cadavez que intenta registrarse y se evita con ello perder el contexto y los datos dela página.

Con lo anterior explicado los estados posibles en los que puede estar lapá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 archivosjsp ya que pueden aclarar de dónde se saca el valor de respuesta y cómo se hasimulado el mirar en una base de datos.

• Código 3: validarUsuario.jsp

<% String usuario;

usuario=request.getParameter(“id”);

Page 142: Ajax y Xhtml

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

//Se tiene una hipotetica base de datos solo con JuanMa y Sergio, se la simulade 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 insertanada. —>

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 tiempoy muchas veces concurrentes.

Page 143: Ajax y Xhtml

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

Figura6.6 de la pagina129 Ejemplo de refresco automático haciendo usofunción setTimeout y AJAX.

El ejemplo tiene dos elementos que se deben destacar ya, el primero y másnotable es que los cambios en la página se hacen sin permiso del usuario, él

Page 144: Ajax y Xhtml

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 sihiciera falta cualquier tipo de información que necesita refresco.

El ejemplo consta solo de 2 archivos, bastante pequeños, se sigue haciendouso 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();

}

Page 145: Ajax y Xhtml

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

Page 146: Ajax y Xhtml

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

Page 147: Ajax y Xhtml

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óncada 2 segundos y se inserta el texto enviado por el servidor en el cuadro delcliente, las peticiones al servidor se hacen solo en los números pares con lo cualun 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 parecidoteniendo 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 laposibilidad 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 lagenere de nuevo, ahora gracias a AJAX se obtiene mayor potencia utilizandomenos recursos. [4]

6.6 Una Base de Datos Creada con el DOMyGuar-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.7de la página 134.

Esto no tiene nada que ver con AJAX, es solo una muestra de que sepuede ir generando los elementos necesarios dinámicamente, esto es un granavance ya que gracias a ello se pueden realizar programas con un aspectovisual agradable rápidamente si se programan en una Web. Pero es necesarioguardar la información que se genera para que tenga sentido. Llegado estemomento 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 lacosa 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 locual se complica un poco, pero en cambio al guardar en un archivo y rescatarla información haciendo uso de la propiedad “innerHTML” lo que simplifica elproblema. En otras palabras, el archivo almacena la información directamenteen HTML.

Page 148: Ajax y Xhtml

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 tablautilizando el DOM, el ejemplo consta de un archivo que contiene tanto elcódigo HTML como Javascript.

El archivo está comentado y es suficientemente auto-explicativo pero algolargo por lo cual se ha decidido partir en tres partes: dos partes Javascriptcada 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.

Page 149: Ajax y Xhtml

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

Figura 6.8: Interfaz Simple Para Guardar y Cargar de un Archivo.

Page 150: Ajax y Xhtml

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

Page 151: Ajax y Xhtml

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 formatotexto, así se puede guardar el código html después en formato texto y que la referenciaal 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

Page 152: Ajax y Xhtml

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

Page 153: Ajax y Xhtml

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 otraque las borra, éstas se llaman debido a los eventos disparados por los botonesde añadir y borrar, lo siguiente sería no perder la información al salir delnavegador.

6.8 Auto-Completado Empleando AJAX

Para explicarlo rápidamente lo mejor es ver el resultado primero, mostrado enla figura 6.9 de la página 140.

Como se puede observar en la figura 6.9, no existe un botón de aceptarla 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 seestá 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 Suggestmostrado 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.

Page 154: Ajax y Xhtml

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

Figura 6.9: Ejemplo de Auto-completado empleando AJAX

Page 155: Ajax y Xhtml

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

Figura 6.10: Google Suggest.

Page 156: Ajax y Xhtml

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

Page 157: Ajax y Xhtml

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 seañ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 datosvan 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 elresto de los datos.

/*Se asigna la función de completado, que llevara la carga de generar las nuevasceldas con la información recibida, en esta ocasión, aunque lo mas correcto sería quese tuviéra una función propia que lo haga, esto es solo un ejemplo sencillo */

pedirInfo01.completado =

function objetoRequestCompletado01(estado, estadoTexto, respuestaTexto, res-puestaXML)

{

Page 158: Ajax y Xhtml

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 ala hoja CSS

celda.onmouseover = function() {this.className=‘ratonEncima’;}; // Referenciaa la hoja CSS

celda.setAttribute(“bgcolor”, ”#A9A9A9”);

//3.Si se pulsa sobre uno de los sugeridos se sustituirá el valor de búsqueda poreste.

celda.onclick = function() { ponerNombre(this);};

//4.Se une la nueva fila a la tabla.

fila.appendChild(celda);

document.getElementById(“cuerpoTablaSugerancias”).appendChild(fila);

}

}

Page 159: Ajax y Xhtml

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

Page 160: Ajax y Xhtml

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 siguienteiteració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>

Page 161: Ajax y Xhtml

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 porN.</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 ycomprensible: hace una petición en base a lo que el usuario haescrito en el cuadro de texto. Cuando llega el resultado, éste vaa la función objetoRequestCompletado01 que recoge el documentoXML, lo analiza sacando los nombres y crea la tabla dinámicamente.

Para concluir se muestra el archivo .jsp que realiza la búsqueda y generael documento XML.

• Código 2: pedirInfo.jsp

<%@ page import=“java.io.*,java.util.*,java.lang.*”

contentType=“text/xml; charset=UTF-8” pageEncoding=“UTF-8”%>

Page 162: Ajax y Xhtml

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.

Page 163: Ajax y Xhtml

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

%>

Page 164: Ajax y Xhtml

Capítulo 7

Problemas de Seguridad yDesarrollo

7.1 Introducción

Como cualquier otra técnica o tecnología que se emplee en un entorno Web, eluso de AJAX está sujeto a inconvenientes. La experiencia enseña que con eltiempo estos inconvenientes se suplen cuando el mercado apoya una tecnologíay ésta se estandariza lo suficiente como para que los distintos navegadores noden problemas con ella, ya sean estos de compatibilidad o de seguridad.

AJAX permite realizar ahora cosas que antes no se podían o necesitabanuso de plugins, además de aumentar la interactividad al poder mantener laconexión con el servidor de forma sencilla. Por este motivo la industria seha volcado mucho últimamente en desarrollar software con AJAX, pero éstees todavía un poco inmaduro. En este capítulo se mencionará los principalesproblemas de los entornos Web que utilicen AJAX así como los problemas dedesarrollo que supone.

7.2 Problemas de Desarrollo

Se enumerarán los problemas debajo de un título que marque su naturalezapara que se vea claro que los problemas de desarrollo no solo son muchos sino

150

Page 165: Ajax y Xhtml

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ámicamentelos robots de Google no encuentran muchas veces nada en la página, obtenien-do un ranking deficiente, para evitarlo, deben crearse páginas especiales derecorrido completo.

7.2.2 Complejidad Aumentada

Los desarrolladores de la parte cliente de la aplicación deben entender la parteló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óny lógica de negocio.

Los desarrolladores de páginas Web deben tener habilidad para trabajarcon 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 hautilizado apenas.

• La modularidad de Javascript es muy limitada.

7.2.4 Las Herramientas de Desarrollo que Usan AJAX sonInmaduras

Como es ahora cuando se está empezando a emplear el objeto XMLHttpRequestlas 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.

Page 166: Ajax y Xhtml

CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 152

7.2.6 El Objeto XMLHttpRequest No Está en NavegadoresAntiguos

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 testearel código para asegurar su correcto funcionamiento.

Cualquier persona con algo de experiencia en el uso de AJAX se da cuentade todo lo que esto supone, el uso de AJAX para poder crear una aplicaciónexitosa obliga a tener conocimientos de Javascript y del DOM y, durantesu desarrollo y una vez terminada, a testarla en los diferentes navegadoresdonde se quiera utilizar y a corregir los problemas. Si no se es disciplinado eldesarrollo con AJAX sale realmente muy caro a una empresa, tanto en tiempocomo 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 deseguridad se debe hacer pensando que el atacante conoce perfectamente to-do el funcionamiento del sistema ya que no se puede confiar en que ayudemantenerlo 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 problemasde seguridad ya que todas se suelen correr sobre el mismo software del servidoral que le llegan las peticiones de los usuarios “no identificados” ya que nunca sepuede asegurar realmente de quien hay al otro lado de la línea, si la aplicaciónnecesita de seguridad deberá ser el servidor el que la proporcione. A nadie se

Page 167: Ajax y Xhtml

CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 153

le ocurriría poner la seguridad en el lado cliente ya que equivale a servir enbandeja 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 unpotencial Hacker, puede buscar la forma de utilizar el código, como está o conlas modificaciones oportunas para explotar las debilidades de la aplicación.

• Solución errónea: Encriptarlo, si se ejecuta es porque nuestra máquinaes capaz de desencriptarlo con lo cual seguro que es posible la ingenieríainversa.

• 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, comose ha visto en los ejemplos, si fuera código con malas intenciones el clientepodría hacer poco ante ello.

• Solución 1: Utilizar algún tipo de área de pruebas para el código antesde lanzarlo directamente que lo analice, existen ya algunos filtros queevitan 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 necesarioutilizar 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.

Page 168: Ajax y Xhtml

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 usuariocomprobando 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 Webnormal es que, debido a su naturaleza (hacer peticiones para luego refrescarpartes de una página), el desarrollador puede perfectamente desglosar las di-ferentes partes de la página JSP, incluidas las que necesitan autenticación yautorización, o incluir otros servicios que necesiten por ejemplo de una basede datos. Al terminar la aplicación a un desarrollador no demasiado expertopuede 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 “GRANSUPERFICIE DE IMPACTO” (este problema surge al dividir un programaen módulos accesibles individualmente ya que también se pueden intentar ata-car individualmente buscando un comportamiento incorrecto que genere algúnagujero 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 laaplicación, lo que resulta abominable ya que la validación no sirve de nada sino se hace antes de cualquier servicio que lo necesite lo que requiere mucharepetición de código, además al equipo de desarrollo se le puede escapar algunavalidación y como los servicios se pueden acceder individualmente (en estecaso) puede haber algún agujero de seguridad en alguno.

Lo ideal para proporcionar seguridad sería el caso de la figura 7.2 de lapágina 155.

Como se puede observar en la figura, el hecho de que el lado servidor de laaplicación esté diseñado de forma segura es la verdadera clave de la seguridaden las aplicaciones Web ya que todo el código de la parte cliente es visiblea ataques y modificaciones en la memoria del cliente para atacar a la parteservidor.

Page 169: Ajax y Xhtml

CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 155

CLIENTE

PARTE CLIENTE

PARTE 2

VALIDADOR

Necesitan validación

No necesitan validación

PARTE 1

BASE DE DATOS

PARTE SERVIDOR

(Accesibles directamente ó por una dirección)

Figura 7.1: Aplicación desarrollada con una Seguridad Ineficiente.

Cliente

Servidor accedible por una dirección

SERVICIO 1

No necesitan validación Necesitan validación

Servidor

(No acces ible directamente o por una direcc ión)

SERVICIO 2

CONTROLADOR

B.DBASE DE DATOS

VALIDADOR

VISTA

Figura 7.2: Aplicación Desarrollada con una Seguridad Correcta.

Page 170: Ajax y Xhtml

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 ladocliente cuando se esta ejecutando código sobre el navegador (en mayor partede 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 interesanteque a la hora de desarrollar las aplicaciones utilizando AJAX se sepa esto yaque es un límite impuesto para garantizar la seguridad, esto se puede observarmediante 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; //Solointeresa la respuesta como texto

}

Page 171: Ajax y Xhtml

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 eldominio localhost con el puerto 8080, y si alguno de estos parámetros cambiaen una petición AJAX, la política de mismo origen entrará en juego.

En Internet Explorer, se mostrará una alarma y preguntará si se deseapermitir, recordando que es un riesgo de seguridad, se puede ver en la figura7.3 de la página 158.

Si se quiere permitir la carga de dominios diferentes sin problemas se debenmodificar 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ámetrosde 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 sepueden configurar y simplemente negarán el acceso ya que esto atenta contrala 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.

Page 172: Ajax y Xhtml

CAPÍTULO 7. PROBLEMAS DE SEGURIDAD Y DESARROLLO 158

Figura 7.3: Internet Explorer 6 pidiendo una confirmación debido a un posibleriesgo 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 cuandoel usuario mande sus datos personales éstos estén codificados, aunque esto hagagastar 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 irmodificando dinámicamente la actual, se puede dar al usuario un identificadoral comenzar la sesión, apuntarlo en la base de datos y no necesitar usar ningúncookie sino una variable que contenga el identificador y que se borrará al cerrarel navegador, de esta manera enviando ese identificador con cada petición seidentificaría al usuario.

• Verificación completa del usuario.

Al desarrollar un sitio Web se lo debe dividir en dos partes claramentediferenciadas: una a la que se puede entrar sin verificación y otra en la que

Page 173: Ajax y Xhtml

será obligada. Por ejemplo en una aplicación de negocio, se puede tener unaparte de noticias pública, donde el usuario además pueda ver los productospero en caso de que quiera realizar una compra el usuario tenga que introducirsu nombre y contraseña que ha dado anteriormente cuando se registró, dandosus datos de cuenta y demás, aunque estos se podrían especificar más tarde porsi 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 realizarlas 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 elusuario podría cambiar los precios de los artículos usando alguna herramientade depuración, como Firebug.

• Base de datos no accesible exteriormente.

Solamente debe de poder trabajar con ella la parte del servidor Web ydebe tener un usuario que solo debe poder acceder a su base de datos paraevitar 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 servidorpor 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 elservidor no accesibles desde fuera.

Page 174: Ajax y Xhtml

Capítulo 8

Un Mundo de Toolkits yFrameworks

8.1 Introducción

En los capítulos anteriores se ha estado trabajado intensamente con HTML yJavascript. Aunque esta obligado a utilizar estos dos lenguajes cuando se hablade AJAX, es posible usarlos directamente (como se ha hecho hasta ahora) oindirectamente (lo que será el objetivo en el presente capítulo), es decir, existela posibilidad de trabajar sobre una capa de abstracción de alto nivel que mástarde generará automáticamente el código HTML y Javascript necesario paraque la aplicación funcione como una página Web dinámica. Cuanto mejor ymás flexible sea esta capa, más se alejará de los intrincados recovecos de laprogramación Web AJAX directa, facilitando así el trabajo.

Cada toolkit o framework posee una filosofía diferente y proporciona unacapa 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 trabajarcon AJAX, la inmensa mayoría gratuitos y algunos otros de pago. En unabúsqueda del más adecuado para los propósitos, se puede sentir desbordado y

160

Page 175: Ajax y Xhtml

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, sequedará pequeña en cuanto pase algo de tiempo ya que siempre están apa-reciendo nuevas ideas para utilizar AJAX partiendo de diferentes tecnologíasde alto nivel. En este apartado se hará incapie en las bibliotecas que generanJavascript y que incorporan tecnología Java por lo que los siguientes puntosintentan abarcar gran parte de las soluciones java actuales para trabajar conAJAX.

8.2.1 Bibliotecas Javascript en el Lado Cliente

Éstas son tal vez las que menos abstracción dan ya que se esta trabajandodirectamente 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 atravé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ónque se necesita en la aplicación abriendo la página correspondiente sinusar el objeto XMLHttpRequest) si el Navegador no soporta AJAX.

• Proveen una buena navegación dando soporte para los botones de “Ira la página anterior” e “Ir a la página siguiente” que muchas veces alhacer una aplicación dinámica pierden su utilidad.

Page 176: Ajax y Xhtml

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 lasde 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 queno 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/

Page 177: Ajax y Xhtml

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 aprenderJavascript 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 (lassoportadas, como Dojo, Scriptaculus, Yahoo UI Widgets, DHTML Goodies)bajo una sintaxis Java común. De esta manera se facilita el trabajo a losprogramadores Java para los que Javascript suele ser algo muy extraño, suWeb es https:/ajax.dev.java.net/.

Como conclusión puede decirse que aún a las diferentes bibliotecas bajo unmodelo de programación común y tiene plugin para Netbeans 5.5. Su únicoproblema (que también puede verse como una ventaja) es que está en constanteevolución ya que sus desarrolladores se encargan de que soporte las bibliotecasJavascript 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 delegandoesta complejidad a los autores de los componentes. Con esto pueden hacerse

Page 178: Ajax y Xhtml

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 entornosIDE 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 loscomponentes 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 bibliotecasdesarrolladas 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 emplearconstantemente el lenguaje Java a que se esta acostumbrado (asumiendo quese sabe Java) en el seno del toolkit para el desarrollo y la depuración. Unavez que todo funcione correctamente se utilizará el preprocesador del toolkitque traducirá la aplicación escrita en Java a HTML y Javascript. La Web eshttp://code.google.com/webtoolkit/.

Como conclusión puede decirse que Java es la mejor capa de abstracciónque nos aleja del HTML/Javascript todo lo que se puede. Además tiene un

Page 179: Ajax y Xhtml

CAPÍTULO 8. UN MUNDO DE TOOLKITS Y FRAMEWORKS 165

buen soporte. El único inconveniente es que no se aleja totalmente de las hojasde 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 parahablar de todos ellos, si bien se va a mencionar algunas de las plataformas deprogramación y lenguajes más usuales.

8.3.1 .NET Frameworks

Hay una gran cantidad de compañías que utilizan tecnología Microsoft por loque 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 losmás interesantes es:

• Atlas: es la apuesta de Microsoft para desarrollar Web, integra desarrollodel lado cliente con un desarrollo del servidor basado en las bibliotecasASP .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 Weby ganando adeptos gracias a la facilidad de desarrollo que proporciona. AJAXno 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 swfvacío y exponerlo al código dinámico en el navegador; ahora es códigoabierto.

Page 180: Ajax y Xhtml

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 ganadorentre 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 comoes 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 laelección con detenimiento ya que esto condicionará de manera importante elesquema de nuestra aplicación.

No se sabría decir cual es la mejor forma de trabajar, ya que ello depende demuchos factores. Por ello, la más idónea sea seguramente la más cercana a cadaprogramador particular: un programador Web se puede ver cómodo con lasbibliotecas del lado cliente si no conoce Java, mientras que a un programadorJava le puede resultar complicado aprender Javascript en un principio por lascarencias 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 vidamuchísimo al programador. Los mejores de ellos o los que intentan captar másal desarrollador tienen demostraciones en la misma página Web, con el códigofuente para que pueda apreciarse rápidamente la filosofía y “facilidad” de uso.

Page 181: Ajax y Xhtml

A este respecto, uno de los que más impresiona es “ZS” en el que el código esrealmente mínimo, pudiendo programar con sus etiquetas tipo HTML; también“GWT” o Google Web Toolkit es muy tentador, ya que intenta hacerlo todocon Java.

Se ha de ser conscientes de que se encuentra en un momento en el quela industria intenta captar usuarios (muchos de los Toolkits y Frameworksson 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 eltiempo dirá cuáles prevalecen y cuáles se dejan de actualiza.

Page 182: Ajax y Xhtml

Capítulo 9

Herramientas Utilizadas parala Aplicación

9.1 Introducción

Las herramientas utilizadas para el desarrollo de la Aplicación Web con AJAXfueron las siguientes:

• DB2 Express-C9 v9.1.0.356.

• WebsPhere Studio integrado a Rational Software Architect V6.0 paraWindows.

• Apache Tomcat.

A continuación se hará una breve descripción de las características másimportantes 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

Page 183: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN169

C en DB2 Express-C significa Comunidad. Una comunidad de usuarios DB2Express-C que se juntan para ayudarse unos a otros, tanto en línea como fuerade ella. La comunidad DB2 Express-C consiste en una variedad de personasy compañías que diseñan, desarrollan, implementan o utilizan soluciones debase de datos, como:

• Desarrolladores de aplicaciones que requieren un software de base dedatos de estándar abierto para construir aplicaciones standalone, cliente-servidor, Web y empresariales.

• ISVs, vendedores de hardware, vendedores de infraestructura de pila yproveedores de otros tipos de solución que quieran incluir o empotrar uncompleto 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 dehabilidades, evaluación y prototyping.

• Startups, pequeñas y medianas compañías que necesitan un servidor dedatos 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, proyectose 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. DB2Express-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 cualquiercantidad de núcleos y de memoria. No tiene ningún requerimiento especialde almacenamiento o de configuración del sistema que sean especiales. DB2Express-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 lasfunciones que necesitan al precio correcto. Figura 9.1 de la página 170 ilustralas diferentes ediciones de productos DB2.

Page 184: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN170

Figura 9.1: Servidores DB2.

Como se muestra en la figura 9.1, DB2 Express-C es igual que DB2 Expresssolo 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 DB2Express-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. Estotambién significa que una aplicación desarrollada para una edición trabajará,sin ninguna modificación, en otra edición. Y cualquier habilidad aprendida enuna edición aplicará a las otras ediciones.

9.2.2 Clientes DB2 y Controladores

Un cliente DB2 incluye las funcionalidades necesarias para conectarse a unservidor DB2, sin embargo, un cliente no siempre tiene que ser instalado. Porejemplo, una aplicación JDBC Type 4 puede conectarse directamente a unservidor DB2, previsto del correcto controlador ya cargado. Los clientes DB2vienen en diferentes formas:

• Cliente Servidor de Datos IBM (IBM Data Server Client): el más com-pleto, incluye herramientas GUI, controladores.

Page 185: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN171

Figura 9.2: Clientes DB2 y Controladores Disponibles.

• Cliente de Tiempo de Ejecución de Servidor de Datos (IBM Data ServerRuntime 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 comoparte 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 controladoresson mostrados. Aunque todos los clientes DB2 incluyen sus controladoresrequeridos, a partir de DB2 9 se proveen controladores individuales también.Todos los clientes DB2 y controladores son gratis y disponibles para descargardesde el sitio Web de DB2 Express-C. Los clientes y controladores pueden serusados para conectarse a un servidor DB2 en Linux, UNIX o Windows. Para

Page 186: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN172

conectarse a servidores DB2 para z/OS R© o DB2 para i5/OS R© es necesarioir a través de un servidor DB2 Connect (mostrado en el medio de la Figura9.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-Cson:

• 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:

Page 187: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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.

Page 188: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN174

• DB2 Warehouse Editions.

• WebSphere R© Federation Server.

• WebSphere Replication Server.

9.2.5 Características Incluidas con la Licencia de Suscripciónde 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 queel producto fue liberado. Con una licencia de suscripción, la corrección depaquetes 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 defiabilidad 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í comoparciales. Un ambiente HADR generalmente consiste en dos servidores dedatos, 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 esalmacenada y accesada por aplicaciones de clientes.

Como las transacciones son procesadas sobre la base de datos primaria, losregistros de la base de datos automáticamente son transportados al servidorsecundario a través de la red. El servidor secundario tiene una copia clonadade la base de datos primaria, por lo general creada por el back-up de la basede datos primaria y restaurándolo sobre la base de datos secundaria. Cuandolos registros de la base de datos primaria son recibidos ellos son reproducidosde nuevo y aplicados a la base de datos secundaria.

Por la repetición continua de los registros, la base de datos secundariamantiene una réplica en sincronización de la base de datos primaria que puedeasumir si la base de datos primaria falla.

Page 189: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN175

Una solución completa de DB2-supported HADR nos da lo siguien-te:

• Capacidad rápida de solución ante fallas, con transparencia completapara 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 delsistema.

Réplica de Datos

Esta característica permite la réplica de datos entre un servidor fuente dondelos cambios de datos con capturados, y un servidor objetivo donde el cambio dedatos son aplicados. La figura 9.3 de la página 176 proporciona una descripciónde 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 hechoen la base de datos. En el servidor objetivo, un programa Apply aplica loscambios de la base de datos replica. La réplica es útil para una variedad depropósitos que requieren replica de datos, incluyendo alivio de capacidad, sos-teniendo el data warehouse y el mercado de datos, revisando el historial decambios. Usando las características de la réplica SQL puedes replicar datosentre DB2 Express-C y otros servidores DB2, incluyendo aquellos en otrossistemas 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.

Page 190: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN176

Figura 9.3: Réplica de SQL.

Page 191: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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. Estopermite a la base de datos ser extendido a través de múltiples particiones loscuales pueden estar alojados en varias computadoras. DPF está basado enuna arquitectura shared-nothing. Cada computadora, como es añadido al gru-po de partición, trae el poder adicional de procesamiento de datos con suspropias CPUs y memoria. DPF es en particular útil en ambientes de servidorde datos grandes como data warehouses donde las sentencias de los sistemasde apoyo de decisión (DSS) son controlados.

Concentrador de Conexión

El concentrador de conexiones es una característica que permite el soporte deun largo número de usuarios conectados simultáneamente. Previamente, todaconexió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, permitiendoun 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 inteligenciade negocios y egovernment que requieren un análisis de localización geográficamucho más sencillo. DB2 Geodetic Extender puede construir un globo mun-dial virtual a cualquier escala. La mayoría de información de localizaciónes tomada usando sistemas worldwide, por ejemplo el sistema de satélites deposicionamiento global (GPS), y puede ser representado en coordenadas delatitud/longitud (geocódigo). Los datos de negocios, como direcciones, pue-den ser convertidos a geocódigo con DB2 Geodetic Extender y aplicaciones anivel empresarial trabajan mejor cuando mantienen los datos en esta forma sinproyección, saliendo las proyecciones del mapa (tierra a mapa plano) dondeellos pertenecen, en la capa de presentación, para mostrar e imprimir mapas.

Page 192: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN178

Workload Management (WLM)

Maneja cargas de trabajo en una base de datos en base a prioridades de unusuario 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 talmanera que consultas importantes y de alta prioridad pueden corer inmediata-mente, y , and previene consultas espontáneas que no tienen buen rendimientode 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 lascaracterísticas de las herramientas Query Patroller y del DB2 Governor queeran 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 requeridocuando la conexión ocurre en la dirección opuesta: cuando se conecta desdeDB2 para z/OS o i5/OS hacia DB2 para Linux, UNIX o Windows. DB2Connect viene en dos ediciones principales dependiendo de las necesidades deconexió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 debase de datos; significando que puedes correr consultas de base de datos quepuedan trabajar con objetos de diferentes sistemas de base de datos relacional.Por ejemplo, con WebSphere Federation Server, se puede correr la siguienteconsulta:

SELECT *

FROM Oracle.Table1 A

DB2.Table2 B

Page 193: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN179

Figura 9.4: DB2 Connect.

Page 194: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 WebSphereFederation 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 enregistros de base de datos cuando servidores de datos que no son de IBMestán involucrados. Esto también incluye una característica conocida comoQ-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-Cen 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 deDB2 Express-C, u ordenar el Discovery Kit DVD que incluye la imágendel 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 dondese encuentran los archivos de instalación que se han descomprimido.

Page 195: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN181

Figura 9.5: WebSphere Federation Server.

Page 196: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN182

4. Correr el Launchpad. Ejecutar el DB2 Launchpad haciendo doble clicen el archivo setup.exe. En Linux, ejecutar el commando db2setup comoroot. En el Launchpad, clic en la opción Install Product en el panelizquierdo de la ventana.

5. Correr el DB2 setup wizard. El DB2 setup wizard revisa si cumple todoslos 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 paracontinuar.

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ónbásica, mientras la opción Custom permite personalizar la configuraciónespecí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 enel 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 dePrograma\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 comoServicios del Sistema. Estos servicios requieren una cuenta del sistemaoperativo 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 especificaruna cuenta existente, pero esa cuenta debe tener los permisos de admi-nistrador local. Se recomienda usar las opciones sugeridas. Asegurarsede especificar el password para la cuenta. En Linux se usa el UserID pordefecto db2inst1 (dueño de la instancia), db2fenc1 (usuario para rutinaslimitadas) y dasusr1 (usuario del DB2 Administrator Server, DAS). Clicen el botón Next para continuar.

10. Configurar la instancia DB2. Pensar en el concepto de instancia DB2como un contenedor para bases de datos. Una instancia debe existirantes de que una base de datos pueda ser creada dentro de ella. En una

Page 197: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 conexionesTCP/IP en el puerto 50000. El protocolo por defecto y el puerto puedenser 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 acopiar los archivos a la carpeta destino de instalación. DB2 tambiénrealizará 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énpuede ser arrancada con el comando db2fs.

13. La base de datos SAMPLE es una base datos que se puede usar paraprobar DB2. Esta es creada automáticamente luego de la instalación deDB2. Verificar que la base de datos exista abriendo la herramienta DB2Control 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 puedeiniciar el Control Center con el comando db2cc.

14. Si la base de datos SAMPLE se muestra en el Control Center, se puedesaltar al paso 16. Si no se muestra, seleccionar el item Refresh del menuControl Center View para asegurar que se puede ver toda la informaciónrefrescada. Si la base de datos SAMPLE sigue sin aparecer, es porque noha sido creada. Habrá que crearla manualmente del First Steps. Elegirdonde dice Database Creation, y luego guiarse con el Wizard para crearla base de datos SAMPLE. Asegurarse que los objetos XML y SQL ylas opciones de datos son seleccionados, y luego clic en OK. Esta últimaopción creará una base de datos UNICODE el cual fue requerido en laversion 9 para soportar XML puro (pureXML), pero no es necesario enDB2 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 procedimientopuede tomar algunos minutos). Cuando la base de datos es creada, clicen el botón OK y cerrar la herramienta First Steps.

Page 198: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN184

Figura 9.6: Ventana de Progreso en DB2.

1. Regresar al Control Center y verificar que la base de datos SAMPLEaparezca 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 mencionadoen la documentación oficial de instalación DB2, se recomienda reiniciarel sistema (si es posible, por lo menos en Windows) para asegurarseque todos los procesos comiencen satisfactoriamente y limpien cualquierrecurso de memoria que no han sido eliminados correctamente. Esto esOPCIONAL.

9.2.9 Herramientas de DB2

En este apartado, se describirán algunas de las herramientas que se puedenusar con DB2.

La elipse roja en la figura 9.7 de la página 185 muestra el área en la quese centra este apartado.

La figura 9.8 lista todas las herramientas disponibles en el menú de iniciode 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 parainiciar algunas de las herramientas más populares tanto en Linux o Windows.

Page 199: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN185

Figura 9.7: Herramientas DB2.

Herramienta Comando

Editor de Comandos db2ceCommand Line processor db2Ventana de Comandos db2cmd

Control Center db2ccTask Center db2tc

Health Center db2hcConfiguration Assistant db2ca

First Steps db2fs

Tabla 9.1: Comandos para Iniciar algunas herramientas DB2..

Page 200: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 centralizadaque 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 dela 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 losobjetos relacionados, como por ejemplo, todas las tablas asociadas con la basede datos SAMPLE. Si se selecciona una tabla en la parte alta del panel, en laparte baja del lado derecho del panel se proveerá información más específicaacerca de esa tabla.

Page 201: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 seprefiere usar. La elección de la vista determina qué tipo de opciones y objetosde 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, opcionesy 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

Page 202: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 herramientasde cualquier otra herramienta gráfica de DB2

• Desde el icono DB2 en Windows como se muestra en la figura 9.10 (Daclic sobre el icono verde DB2 y seleccionar la opción Central de Controlde DB2 )

El Editor de Comandos DB2

Usando el Editor de Comandos DB2 (editor de comandos), se pueden ejecutarcomandos DB2, sentencias SQL y XQuery, analizar el plan de ejecución de unasentencia, 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 unaconexión a la base de datos para devolver sentencias SQL, sin embargo, unade esas sentencias puede ser una sentencia de conexión.

Page 203: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN189

Figura 9.11: Editor de Comandos.

Page 204: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 asistentepara generar código SQL, el SQL Assist Wizard está disponible en el Editorde Comandos para ayudarte. Como se muestra en la figura 5.11, invócalodesde el Editor de Comandos dando clic sobre le último icono con el símboloSQL.

Su uso es bastante claro. Primero indica el tipo de sentencia SQL para lacual se necesita asistencia (SELECT, INSERT, UPDATE, DELETE). Depen-diendo de que sentencia se haya elegido, diferentes opciones aparecerán. Enla parte baja de la ventana mostrará cómo la sentencia SQL es construida apartir de diferentes elecciones en el asistente.

El Botón Show SQL

La mayoría de las herramientas gráficas y los asistentes en DB2 permitenrevisar el comando actual o la sentencia SQL que es creada como resultado deusar la herramienta para realizar tal acción. Para ver esto, da clic en el botónShow SQL en la herramienta en la que se está trabajando, como lo muestra lafigura 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 paraaprender sintaxis SQL, y para guardar comandos o sentencias para su posterioruso. También se puede construir scripts re usando esos comandos y sentenciasgenerados.

Page 205: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 desitios Web y aplicaciones destinadas al comercio electrónico.

• WebSphere posee una amplia gama de servidores y aplicaciones paraproporcionar todo tipo de capacidades de negocio y ayuda al desarrollode las aplicaciones.

Page 206: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN192

Figura 9.14: Plataforma de WebSphere.

• La Plataforma de Software WebSphere está compuesta por un conjuntode 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, comenzandodesde 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 alos visitantes del sitio de la Web.

Provee servicios a cliente de calidad superior y mejor desempeño del sitio

Page 207: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN193

Web.

El extraordinario crecimiento de la Web ha hecho que una infraestructurafiable, 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 laWeb que sea capaz de proporcionar excelentes tiempos de respuesta de formaconsistente, tratar flash crowds (multitud de visitas rápidas) y reconocer losclientes leales con tratamiento preferente.

La plataforma de software WebSphere proporciona una completa gama dehabilidades que permiten a los clientes la entrega de altos niveles de servicioa todos los visitantes del sitio en la Web. Administra cargas pico en losservidores Web, mantiene la disponibilidad del sitio en la Web, y reconocecontenido de solicitudes de la Web para calidad-de-servicio mejor. Tambiénpermite la diferenciación de niveles de servicio con base en el tipo de cliente.

Bases y Herramientas para Construir, Diseminar y Hacer Crecer ele-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 altodesempeño.

El ambiente de TI del e-business debe ser construido sobre una sólida Basey 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 unriesgo real para el negocio. Este riesgo se multiplica debido a la diversidad delos ambientes de TI.

Corporaciones de mayor porte pueden tener amplia diversidad dentro desu propia empresa. Corporaciones de menor porte encontrarán diversidad aldividirse más allá de las fronteras de su empresa hacia el resto de su cadenade valor. El software IBM WebSphere ayuda a reducir este riesgo del negocio.

Page 208: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 estrechamenteintegrados y racionalizados.

• Procesos eficientemente conectados en toda la compañía y con las desocios 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 bienplanificada, 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 delWebSphere 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.

Page 209: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 comercializarrá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. Elequipo debe poseer las más actualizadas habilidades de programación paraacompañar el ciclo de vida del e-business.

Se necesita una plataforma completa, escalable y flexible que proporcionesoporte a la construcción y diseminación de aplicativos de e-business. Lassoluciones de software WebSphere ofrecen las herramientas necesarias paraalcanzar los objetivos de e-business.

Al proporcionar un banco de trabajo abierto que integre y simplifiquediferentes tareas, roles y herramientas, el software WebSphere ayuda a que elequipo 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 quetodos utilicen el mismo ambiente y reduciendo costes de entrenamiento.

• Proporciona código pre-construido, pre-testeado.

• Proporciona herramientas especializadas para página Web y desarrollode módulos migrables.

Adicionalmente, servicios basados en estándares Web permiten mezclar ycombinar componentes funcionales de diferentes orígenes de tal forma que sepuede 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 condiversos recursos de negocios. Empieza dejando a la medida los ambientesde usuarios para sus necesidades específicas, integrándolo entonces con otrosusuarios para permitir colaboración en tiempo real, y con los diversos ambien-tes de TI.

Page 210: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN196

Todo esto permite que las personas trabajen en conjunto de forma másproductiva mientras actúan sobre la información que necesitan. La capacidaddel portal de negocios es proporcionada por la familia WebSphere Portal y lafamilia WebSphere Commerce es un conjunto de soluciones eficaces del lado deventas para tratar los desafíos encontrados en ambientes de clientes y socioscomerciales [1].

Al expandir el ambiente de usuario para permitir que las personas accedana la información y actúen en cualquier lugar, en cualquier momento, usandosu elección de dispositivos y mecanismos de interacción significa acceso ondemand y las familias WebSphere Everyplace y WebSphere Voice, son softwarepara expandir aplicaciones de e-business a dispositivos móviles, permitiendointeracción de voz natural con aplicaciones y datos.

WebSphere for Commerce - Soluciones B2B

Hoy, el e-commerce consiste en realizar negocios con sus clientes, proveedoresy contratistas comerciales sin encontrar dificultades de tiempo, limitacionesorganizacionales o fronteras geográficas.

Con el software With WebSphere Commerce, se establecen relaciones másestrechas, más productivas con sus clientes y contratistas comerciales en todoslos puntos de contacto. Impulsa los procesos existentes reduzciendo sus costes.Facilita que sus clientes y contratistas comerciales hagan negocios hoy y quecontinúen mañana.

Con el IBM WebSphere Commerce Business Edition, se puede optimizarprocesos 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 menorcoste y el ROI más rápido, fortalece las relaciones de negocios con clientes ycontratistas, 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 onlinea los consumidores.

Crea campañas de marketing dinámicas, fija como objetivo diferentes seg-mentos de mercado, elabora promociones de producto personalizadas, y mejo-

Page 211: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN197

ra el servicio a clientes. Esta solución ayuda a crear rápidamente y mantenereficientemente 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 contratistasa través de la agrupación de requisitos y del proceso de selección delproducto.

• Herramientas de cooperación online y de formación de equipo virtualpara mejorar la eficacia de contratistas comerciales, canal y clientes.

• Administración integrada de contrato para soportar contratos complejosy 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 quelas 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, loque 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 empresastambién aumentan la eficiencia de interacciones con clientes y contratistas, loque 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,

Page 212: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN198

aplicativos, procesos y personas, que son esenciales para construir portalesexitosos para el B2B y B2C .

Con el portal habilitado para el comercio, se puede crear un ambientepersonalizado 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 largode 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 yfácilmente.

WebSphere for Commerce-Soluciones Digital Media

Empresas de medios con volúmenes crecientes de activos digitales -fotos, vídeoclips, archivos en audio, ilustraciones e imágenes animadas- enfrentan nuevasexigencias reguladoras y el desafío de colocar esos activos disponibles online.El software IBM WebSphere permite administrar estos activos digitales máseficazmente, 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 activosdigitales, alcanzando clientes en todo el mundo por la Web. Esta nueva ofertade servicio de e-commerce combina el software WebSphere Commerce aproba-do por la industria con las capacidades del IBM Content Manager, reforzadopor la tecnología Java.

WebSphere Commerce para Medios Digitales permite enriquecer la expe-riencia del consumidor y la interfase de compra B2B, creando nuevas relacionescon clientes al mismo tiempo en que fortalece las existentes y ayudando a ge-nerar y aumentar ganancias así como sus márgenes de beneficios.

Page 213: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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.

Page 214: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN200

Application Server

La plataforma de alto desempeño y extrema escalabilidad para diseminaraplicativos dinámicos de e-business, WebSphere Application Server, Versión4.0, proporciona las funciones esenciales de e-business de manipulación detransacciones y ampliación de datos back-end del negocio y aplicativos para laWeb. La plataforma ayuda a construir aplicativos que ejecutan esas funcionescon 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 servidoresde aplicaciones, cada uno de ellos ejecutándose en su propia Máquina VirtualJava (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 adelanteconocidos como enterprise beans. Es un proceso de servidor que maneja peti-ciones para beans de sesión y beans de entidad.

Page 215: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓ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 deejecució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, elcontenedor gestiona el almacenamiento y la recuperación de datos para losbeans que contiene. Un solo contenedor puede gestionar más de un archivoJAR de EJB.

Contenedor Web

Los servlets y los archivos JSP (Java Server Pages) son componentes delservidor que se utilizan para procesar peticiones de clientes HTTP como, porejemplo, navegadores Web. Se encargan de la presentación y el control dela interacción del usuario con los datos de aplicación subyacentes y la lógicaempresarial. También pueden generar datos formateados, como XML, paraque 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 motorde servlets. Cada contenedor Web contiene automáticamente un único gestorde sesiones.

Cuando se manejan los servlets, el contenedor Web crea un objeto depetició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 corresponday 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 normalmenteen un sistema de sobremesa con una interfaz gráfica de usuario (GUI) . Tienenacceso 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

Page 216: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN202

(JDBC) y las colas de mensajes de Java Message Service. El programa Clientede aplicaciones J2EE se ejecuta en las máquinas cliente.

Este programa sigue el mismo modelo de programación Java que otrosprogramas Java; no obstante, el cliente de aplicaciones J2EE depende deltiempo de ejecución del cliente de aplicaciones para configurar su entorno deejecución, y utiliza el espacio de nombres JNDI (Java Naming and DirectoryInterface) para acceder a los recursos.

Contenedor de Applets

Un applet es una clase Java de cliente que se ejecuta normalmente en unnavegador Web, pero que también se pueden ejecutar en otros dispositivos yaplicaciones de cliente.

Los applets se utilizan a menudo junto con páginas HTML para mejorarla experiencia de usuario que ofrece el navegador Web. También se puedenutilizar para pasar parte de la carga de trabajo de proceso del servidor alcliente.

El contenedor de applets maneja applets de Java incorporados en docu-mentos HTML (HyperText Markup Language) que residen en una máquinacliente remota respecto al servidor de aplicaciones. Con este tipo de cliente,el usuario accede a un bean enterprise en el servidor de aplicaciones medianteel applet de Java en el documento HTML.

Sistema Principal Virtual

Un sistema principal virtual es una configuración que permite que una únicamáquina de sistema principal parezca varias máquinas de sistema principal.Los recursos asociados con un sistema principal virtual no pueden compartirdatos con recursos asociados con otro sistema principal virtual, incluso si lossistemas 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áquinaque ejecuta la aplicación.

Page 217: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN203

Arquitecturas de Tres Niveles

WebSphere Application Server proporciona la capa de la lógica de aplicaciónen una arquitectura de tres niveles, lo que permite a los componentes de clienteinteractuar 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ónentre 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 usuarioreside en los componentes del primer nivel. Estos componentes decliente permiten al usuario interactuar con los procesos del segundonivel de forma segura e intuitiva. WebSphere Application Server dasoporte a varios tipos de clientes.

— Los clientes no acceden directamente a los servicios del tercer nivel.Por ejemplo, un componente de cliente proporciona un formularioen el que el cliente solicita los productos.

— El componente de cliente entrega este pedido a los procesos delsegundo nivel, que comprueban las bases de datos del producto yrealizan 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 lacapa de la lógica de aplicación. Estos procesos gestionan la lógicaempresarial de la aplicación y pueden acceder a los servicios deltercer nivel.

Page 218: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN204

— La capa de la lógica de aplicación es donde se produce la mayorparte del trabajo de los procesos.

— Varios componentes de cliente pueden acceder simultáneamente alos procesos del segundo nivel, por lo que esta capa de la lógica deaplicació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 debedeterminar quién tiene derecho a ese artículo, actualizar la basede datos para reflejar la compra e informar a los otros clientes deque el artículo ya no está disponible. Sin una capa de la lógica deaplicación, los componentes de cliente acceden a la base de datosdel producto directamente.

— La base de datos es necesaria para gestionar sus propias conexiones,normalmente bloqueando un registro que se está procesando. Elbloqueo se puede realizar simplemente cuando un artículo se colocaen un carro de compra, para evitar que los demás clientes considerenla posibilidad de compra.

— La separación del segundo y el tercer nivel reduce la carga en losservicios del tercer nivel, puede mejorar el rendimiento general dela red y permite una gestión de conexiones más elocuente.

Tercer nivel:

— Los servicios del tercer nivel están protegidos del acceso directo delos componentes de cliente al residir en una red segura.

— La interacción debe producirse a través de los procesos del segundonivel.

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óncomo, por ejemplo, Java o C++, y se puedan ejecutar en cualquier sistemaoperativo, 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 consultarlasy manipularlas. La clave de esta arquitectura es la capa de la lógica de apli-cación.

Page 219: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN205

Familias del Producto

El ambiente operativo principal debe ser una base confiable que permita deforma segura, transacciones e implementaciones de servicios en la Web de for-ma abierta. En otras palabras, debe ser una infraestructura abierta, basadaen servicios, como la proporcionada por la familia del WebSphere ApplicationServer, 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, estasnecesitan ser creadas de forma que capturen el conocimiento de negocio deforma eficaz, y construidas para integrarse, de manera que se ajusten rápida-mente al ambiente existente, y a impulsarlo. Esta capacidad de desarrollo deaplicaciones es proporcionada por la familia WebSphere Studio [1].

Las inversiones existentes en sistemas y aplicaciones, tan dispares cuantopuedan ser, deben ser utilizadas por el e-business para bajar costos y preservarinversiones. Esta capacidad de modernización de la empresa es proporcionadapor herramientas especializadas de desarrollo de la familia WebSphere Studioy a través de la familia WebSphere Host Integration, que es software destinadoa 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 Weby 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 propiosaplicativos 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 IBMWebSphere Host Integration Solution permite rápida y flexiblemente integrardatos críticos de la empresa la Web [9].

El WebSphere Host Publisher proporciona la manera más rápida, más fácilpara implementar e-business mediante la ampliación del alcance de aplicativosa los usuarios de browsers en la Web y nuevos aplicativos WebSphere, sin al-teraciones a aplicativos existentes. Amplio soporte a aplicativos preexistentesy escalabilidad, seguridad, y características de disponibilidad, hacen del HostPublisher la solución ideal para diseminaciones de nuevos e-business. Tantosi su objetivo es coste menor o mayores ganancias a través de diseminacionesWeb-to-Host o a través del desarrollo de nuevos aplicativos para e-business.

Page 220: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN206

Las características clave son:

• Proporciona integración Web con Terminal Virtual 3270, 5250(VT), JavaDatabase Connectivity (JDBC) y aplicativos Java host sin necesidad decambios al propio aplicativo existente.

• Permite la fácil consolidación de múltiples aplicativos en un aplicativocompuesto único o página Web para presentación a usuarios de la Web.

• Se integra con la Edición Avanzada del WebSphere Application Servere incluye el WebSphere Studio para proporcionar una solución completapara la entrega de datos del host a usuarios de la Web y para nuevosaplicativos WebSphere para e-business.

• Opera con el Websphere Transcoding Publisher para extender datos delhost a tecnologías penetrantes como los dispositivos SmartPhone y asis-tentes digitales personales.

• Proporciona una amplia gama de opciones de acceso al Host: HTML abrowsers de la Web, XML Gateway para aplicativos Java, y Host Pu-blisher Integration Objects reutilizables para aplicativos de Java appletsaplicativos.

• Ayuda a impulsar la inversión en Host Publisher utilizando objetos deintegración basados en estándares abiertos de la industria que se puedenreutilizar en nuevos aplicativos de e-business, reduciendo el coste y losriesgos 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 seanejecutados en el servidor Host Publisher para ser accedido por aplicativoscon 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 formatoXML.

• El 3270/5250 HTML Mapper proporciona un emulador HTML de nivelde entrada load-and-go dentro de una ventana de browser de la Web.

Page 221: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN207

La familia de Herramientas WebSphere Studio

WebSphere Studio proporciona un conjunto de herramientas para facilitar eldesarrollo de aplicaciones Web. Posee un entorno visual para la distribución delos 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ónentre WebSphere Studio, Java VisualAge, y WebSphere Application Servershace 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 WebSphereStudio presenta el mismo entorno de desarrollo integrado (IDE) y una basecomú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ándisponibles en cada configuración.

WebSphere Studio es un único entorno de desarrollo completo diseñadopara satisfacer todas las necesidades de desarrollo, desde interfaces Web aaplicaciones del lado del servidor, desde el desarrollo individual a desarrollosavanzados en equipo, desde el desarrollo Java a la integración de aplicaciones.

Con varias configuraciones disponibles, así como extensiones de IBM y deterceros, 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 paralos grandes equipos que construyan aplicaciones Web avanzadas, la familia

Page 222: Ajax y Xhtml

CAPÍTULO 9. HERRAMIENTASUTILIZADAS PARA LAAPLICACIÓN208

WebSphere Studio proporciona herramientas y asistentes para simplificar lastareas 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ñadoresWeb novatos crear y publicar sitios Web al tiempo que incorpora lo último entecnología Web, incluyendo Java Script, HTML dinámico y hojas de estilo encascada.

El entorno completo y fácil de utilizar de la familia WebSphere Studiopermite construir aplicaciones Java, adaptadores de aplicaciones y serviciosWeb. También puede integrar la aplicación con sistemas de fondo utilizan-do herramientas visuales para crear adaptadores de aplicaciones y desarrollarcomponentes de GUI Java (Swing y AWT ) mediante el Editor visual paraJava.

Para construir aplicaciones J2EE complejas y escalables con una calidadhomogénea en menor tiempo, la familia WebSphere Studio proporciona confi-guraciones para el desarrollo rápido de aplicaciones que utilizan el poder de laautomatización de lógica empresarial para proporcionar sistemas de empresaaltamente configurables y escalables con una codificación manual mínima.

Esta familia de productos ofrece un entorno de desarrollo integrado queabarca todos los cometidos de desarrollo de e-Business: desarrollador Web,desarrollador Java, programador de empresa, analista de gestión y arquitectode sistemas.

9.4 Apache Tomcat

9.4.1 Descripción

Tomcat (también llamado Jakarta Tomcat o Apache Tomcat) funciona comoun contenedor de servlets desarrollado bajo el proyecto Jakarta en la ApacheSoftware Foundation. Tomcat implementa las especificaciones de los servletsy 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 unservidor de aplicaciones, como JBoss o JOnAS. Incluye el compilador Jasper,

Page 223: Ajax y Xhtml

que compila JSPs convirtiéndolas en servlets. El motor de servlets de Tomcata menudo se presenta en combinación con el servidor Web Apache.

Tomcat puede funcionar como servidor web por sí mismo. En sus iniciosexistió la percepción de que el uso de Tomcat de forma autónoma era sólorecomendable para entornos de desarrollo y entornos con requisitos mínimosde velocidad y gestión de transacciones. Hoy en día ya no existe esa percepcióny Tomcat es usado como servidor Web autónomo en entornos con alto nivelde 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.

Page 224: Ajax y Xhtml

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 estudiode un nuevo acercamiento a las aplicaciones Web. Es un proyecto pensadopara demostrar que AJAX no es solo técnicamente importante, sino tambiénpráctico para aplicaciones en el mundo real.

Los mayores desafíos al crear aplicaciones AJAX no son técnicos. Lastecnologías centrales son maduras, estables y bien conocidas. En cambio, losdesafíos son para los diseñadores de estas aplicaciones: olvidar las limitacionesde 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 naturalezaarrancar-frenar- arrancar-frenar de la interacción en la Web introduciendoun intermediario -un motor AJAX - entre el usuario y el servidor. Esto sumauna capa a la aplicación, pero no la retorna menos reactiva como se verá acontinuación.

La aplicación desarrollada es un sitio Web para la empresa “BateríasRAC”, 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

Page 225: Ajax y Xhtml

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 mismaposee el acceso a todos los módulos y secciones del sistema.

Los diferentes módulos con sus correspondientes secciones se explicarán endetalle 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 puedevisualizar 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

Page 226: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 212

Figura 10.2: Sección Productos.

Page 227: Ajax y Xhtml

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 queson:

• Catálogo: visualiza una lista de los productos que ofrece la empresa. Lapágina se puede observar mediante la figura 10.3 de la página 213 .

• Videos: muestra una lista de videos informativos acerca de los procesosde fabricación utilizados por la empresa. La página se puede observarmediante la figura 10.4 de la página 214.

• ¿Cuál es su Batería?: visualiza una serie de opciones para permitir alusuario 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 yevolución. La página correspondiente se visualiza en la figura 10.6 de la página

Page 228: Ajax y Xhtml

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 permitedetallar sus inquietudes, sugerencias y solicitudes. El mismo permite enviarvía e-mail la información a la empresa. La misma se muestra en la figura 10.7de la página 217.

Sección Ubicación

En esta sección se utilizan las facilidades ofrecidas por una de las aplicacionesmás famosas del mundo Web que se caracteriza por el uso de tecnologíasbasadas en Ajax. Esta aplicación es la del Google Maps. Se puede visualizarmediante la figura 10.8 de la página 218.

Page 229: Ajax y Xhtml

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 ybaterías correspondientes.

Agregar Videos

Esta sección permite dar de alta los videos que luego visualizará el usuario enla sección videos.

Page 230: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 216

Figura 10.6: Sección Historia.

Page 231: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 217

Figura 10.7: Sección Contacto.

Page 232: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 218

Figura 10.8: Sección Ubicación.

Page 233: Ajax y Xhtml

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 lassecciones 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 paratal 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.

Page 234: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 220

Figura 10.10: Estructura de la Base de Datos.

Page 235: Ajax y Xhtml

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.11de 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 delusuario.

— CLAVE: campo del tipo VARCHAR que contiene la clave del usua-rio.

• ANIO: contiene los datos correspondientes a los años. Se puede visualizarsu contenido en la figura 10.12 de la página 10.12 y su estructura de

Page 236: Ajax y Xhtml

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 almacenalos 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ágina223 y su estructura de campos es la siguiente:

— COD_COMBUSTIBLE: campo de datos del tipo INTEGER quecontiene valores autogenerados. Representa la clave primaria de latabla.

Page 237: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 223

Figura 10.13: Tabla COMBUSTIBLE.

— DESC_COMBUSTIBLE: campo de datos del tipo VARCAHARque 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 224y su estructura de campos es la siguiente:

— COD_MARCA: campo de datos del tipo INTEGER que contienevalores 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 delas marcas.

Page 238: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 224

Figura 10.14: Tabla MARCA.

Page 239: Ajax y Xhtml

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ágina225 y su estructura de campos es la siguiente:

— COD_MODELO: campo de datos del tipo INTEGER que contienevalores 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 delas marcas.

• BATERIA: posee los datos correspondientes al producto que ofrece laempresa, 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 lafigura de la página.

Page 240: Ajax y Xhtml

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 semuestran en el gráfico 10.17 de la página 227.

• VIDEO: posee los datos correspondientes a los videos que contienenimá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>

Page 241: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 227

Figura 10.17: Definición de Claves de la Tabla BATERIA.

Page 242: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 228

Figura 10.18: Estructura de Campos de la Tabla VIDEO.

Page 243: Ajax y Xhtml

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;

Page 244: Ajax y Xhtml

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

Page 245: Ajax y Xhtml

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”

Page 246: Ajax y Xhtml

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>

Page 247: Ajax y Xhtml

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

Page 248: Ajax y Xhtml

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>

Page 249: Ajax y Xhtml

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”

Page 250: Ajax y Xhtml

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

{

Page 251: Ajax y Xhtml

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(‘. ’);

Page 252: Ajax y Xhtml

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)

{

Page 253: Ajax y Xhtml

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>

Page 254: Ajax y Xhtml

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

Page 255: Ajax y Xhtml

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

Page 256: Ajax y Xhtml

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

Page 257: Ajax y Xhtml

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

Page 258: Ajax y Xhtml

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

Page 259: Ajax y Xhtml

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><IMGborder=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”);

Page 260: Ajax y Xhtml

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

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

Page 261: Ajax y Xhtml

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

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

Page 262: Ajax y Xhtml

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 equiposelé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 normalmentefalla del regulador de voltaje.<br>”);

out.println(“ <br>”);

out.println(“ <IMG border=0 src=imagenes/flechita.gif>Mantenga los extremosde 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 queposean, tenga en cuenta que deberá”);

out.println(“ reactivarlos después de colocar la batería.<br>”);

out.println(“ <br>”);

out.println(“ </marquee></TD>”);

Page 263: Ajax y Xhtml

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=2align=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>” );

Page 264: Ajax y Xhtml

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

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><IMGborder=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>”);

Page 265: Ajax y Xhtml

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: suparticipación ”);

out.println(“es muy importante para que podamos, a cada dia, ofrecer una mejortecnologí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 otrabajo, 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>”);

Page 266: Ajax y Xhtml

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

Page 267: Ajax y Xhtml

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 equiposeléctricos”);

out.println(“ están apagados ( aire acondicionado, faros, Stereo, amplificador, etc.

Page 268: Ajax y Xhtml

CAPÍTULO 10. APLICACIÓN WEB 254

)<br>”);

out.println(“ <br>”);

out.println(“ <IMG border=0 src=imagenes/flechita.gif>Evite que los equiposelé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 normalmentefalla del regulador de voltaje.<br>”);

out.println(“ <br>”);

out.println(“<IMG border=0 src=imagenes/flechita.gif>Mantenga los extremosde 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 casode 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>”);

Page 269: Ajax y Xhtml

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

Page 270: Ajax y Xhtml

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

Page 271: Ajax y Xhtml

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

Page 272: Ajax y Xhtml

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=0cellspacing=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>”);

Page 273: Ajax y Xhtml

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

Page 274: Ajax y Xhtml

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 creael objeto XmlHttpRequest, conformando el motor Ajax que maneja toda laaplicació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();

}

Page 275: Ajax y Xhtml

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

Page 276: Ajax y Xhtml

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

Page 277: Ajax y Xhtml

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

}

Page 278: Ajax y Xhtml

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

}

Page 279: Ajax y Xhtml

Capítulo 11

Conclusiones

11.1 Respecto del Futuro de AJAX

Como se ha visto AJAX no genera nuevos problemas realmente, en cambiosolventa problemas de interactividad y el de las cookies ya que no es necesariocambiar de página, no necesita plugins pero, en cambio, tiene que estar biensoportado por todos los navegadores y ser compatible. Es algo nuevo pero conuna esperanza de vida grande ya que hay multitud de pequeñas comunidadesy 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étodoGET 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 muyimportante.

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

Page 280: Ajax y Xhtml

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. DB2Express-C es un servidor de datos híbrido, sin costo, sin límites, y capazde manejar tanto datos XML como datos relacionales sin problemas. Sincosto significa que DB2 Express-C es gratis para bajar, gratis para desarrollaraplicaciones, gratis para desplegar en producción, y gratis para distribuir consu aplicativo. DB2 no pone límites artificiales en el tamaño de la base dedatos, 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 driversde 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 dehabilidades que permiten a los clientes la entrega de altos niveles de servicioa todos los visitantes del sitio en la Web. Administra cargas pico en losservidores Web, mantiene la disponibilidad del sitio en la Web, y reconocecontenido de solicitudes de la Web para calidad-de-servicio mejor. Tambiénpermite 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 ventajasdel 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 utilizandocriptografía con AJAX.

Page 281: Ajax y Xhtml

• Ampliar las posibilidades del Administrador del sitio, en cuanto a losniveles de actualización de datos.

• Implementar un sistema de compra basado en el “carro de compras”.

Page 282: Ajax y Xhtml

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íaRá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 Web2.0 Primer. ISBNU13: 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 BusinessIntegration 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

Page 283: Ajax y Xhtml

Índice de Materias

.NET, 165

abort, 110ActionScript, 6ADMIN, 221

INTEGER, 221VARCHAR, 221

AJAX, iii, 1, 210APPLET, 6Applets

contenedor de, 202applets, 206archivo, 133archivos, 122arquitecturas

tres niveles de, 203ASP, 3

B2B, 198B2C, 198bases y herramientas

para su e-business, 193Baterías RAC, iii, 210BATERIA, 225Berners-Lee, 1Blueprint, 164botón, 139browsers, 205

código fuente, 226cliente, 133contenedor

cliente de aplicaciones de, 201EJB de, 200Web, 201

CSS, 2

DB2 Express C9, 219default, 133tilde no, 192DHTML, 3, 207digitales

activos, 198documento, 77download, 198DTD, 19

e-business on demandintegración en el, 194

e-commerce, 196Eclipce, 162enterprise beans, 200estructuras de datos, 219eventos, 139

false, 126filas, 139firebug, 90flash crowds, 193framework, 160

GET, 116Google, 139Google Maps, 214GUI, 201

269

Page 284: Ajax y Xhtml

ÍNDICE DE MATERIAS 270

Hacker, 153HTML, 1, 206

IDE, 207Internet Explorer, 1

Javascript, 3JDBC, 202, 206JNDI, 202Jscript, 3JSP, 3, 201jsp, 116JSPs, 207JVM, 200

librería, 130

método, 116MARCA, 223Microsoft, 3MODELO, 225Mozilla Firefox, 3

Netbeans, 162Netscape, 1nick, 127

objeto, 116objetoAjax, 97Outlook, 8

petición, 119, 133PHP, 3plataforma, 194

de software, 195Plug-in, 6POST, 118producto

familias del, 205Prototype, 163

RIO, 206

robots, 151

Scriptaculus, 163sección, 77Server

Application, 200servidor, 129

de aplicaciones, 200servlet, 116servlets, 201setTimeout, 129SmartPhone, 206sourceforge, 107

tabla, 133tidy, 113toolkit, 160true, 126

URL, 115UTF-8, 116

VIDEO, 226virtual

sistema principal, 202VT, 206

WebSphereStudio, 191

WebSphere Commerce, 196WebSphere Everyplace, 196WebSphere for Commerce

soluciones de portal, 197soluciones digital media, 198

WebSphere for commercesoluciones B2B, 196soluciones B2C, 196

WebSphere Host Integration, 205WebSphere Host Publisher, 205WebSphere Portal, 196WebSphere Studio, 205

Page 285: Ajax y Xhtml

ÍNDICE DE MATERIAS 271

la familia de herramientas, 207WebSphere Transcoding Publisher,

206WebSphere Voice, 196Widgets, 162wizard, 206Word Wide Web, 1

XHTML, 2XML, 2, 206XMLHttpRequest, 7, 113