So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S

J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

Uso de AJAX en el desarrollo

de aplicaciones web con Java y Php
Use of AJAX in Web Application Development
with Java and Php

Sonia Alexandra Pinzón Núñez*1

Fecha de recepción: 1 de agosto de 2012

Fecha de aceptación: 3 de septiembre de 2012

Resumen

El desarrollo web se ha multiplicado de forma que existen aplicaciones para rea-

lizar cualquier función, desde una simple página con un servi-
cio que activa una calculadora o un programa de conversiones
hasta aplicaciones que muestran nuestra ubicación por medio
de GPS en el caso de Google Maps (Servicio de Google).

Estas aplicaciones permiten que un usuario pueda hacer uso

de dicha funcionalidad desde cualquier computador. El pro-
ceso es sencillo: solo se utiliza un navegador para ingresar a
la página requerida que se encuentra alojada en un servidor y
activar la función que necesite para que se genere la respuesta
correspondiente. Pero en ocasiones los tiempos de respuesta
son altos y si el usuario activa varias solicitudes este proceso
puede ser una molestia ya que se debe recargar la página cada
vez que haya una solicitud. Para dar solución a este tipo de
inconvenientes se han agrupado varias tecnologías que permi-
ten ejecutar la mayoría de los procesos desde el cliente (recurso
del usuario que hace la solicitud al servidor) y solo ejecutar
las funciones más relevantes en el servidor, disminuyendo los
tiempos de respuesta. Esto se hace utilizando AJAX (Asynchro-
nousJavaScript +XML).

* Ingeniera de Sistemas y especialista en Multimedia Educativa, Universidad Antonio Nariño de Bogotá. Especialista
en Educación en Tecnología, Universidad Distrital. Magíster en Ciencias de la Información y las Telecomunicaciones,
Universidad Distrital. Docente investigadora del grupo Metis, adscrito a la Facultad Tecnológica de la Universidad
Distrital Francisco José de Caldas. spinzon@[Link] 155
155

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

En el presente artículo se describen las características y tecnolo-

gías que integra AJAX y se presentan dos ejemplos de su uso en
los lenguajes de programación Java y Php, los cuales son muy
utilizados en la implementación de aplicaciones web como una
alternativa para el mejoramiento de la funcionalidad e interac-
ción para los usuarios.

Palabras clave: aplicaciones cliente servidor, multicapa, comu-

nicación asíncrona, JavaScript.,

Abstract

Web develop has been multiplied in such way so that nowadays it

exist applications to performed any function, from a simple page
with a service to activate a calculator or a program conversion to
applications that shows our location over the earth by using GPS
as in the case of Google Maps (Google Services).

These applications allow users to do use of those functionalities

from any computer. The whole process is quite simple, it is just
necessary a browser to access the require web page, which is host-
ed in a server and activates the function which is request so that
the answer could be generated. However, in some occasions, time
response is high and also it is also troublesome when the user re-
quire many functions at the same time because the web page has
to be reloaded whenever there is a request.

So that we can solve this kind of problems several technologies

have been grouped, which allow execute most of the processes in
the client side (user resource that makes the server request) and
execute the most relevant functions in the server side, decreasing
response times, the process described below is possible by imple-
menting AJAX (AsynchronousJavaScript +XML).

This paper describes the features and AJAX integration technol-

ogies and is also presented two different examples of how it is
apply using Java and Php programming languages, which are
widely used in the implementation of Web Applications as an al-
ternative to enhance functionality and interaction for the users.

Key words: Client server applications, asynchronous communica-

tions, JavaScript, multilayer.

156
156

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

1. Introducción mejorar el uso de los recursos que se encuen-

tran en internet.
Desde su creación, el objetivo de internet
ha sido intercambiar información rápida- 2. Tecnologías que integran
mente. Este objetivo se ha transformando de AJAX
tal modo que los usuarios no solo buscan o
transfieren información, sino que también AJAX es el resultado de la unificación de
pueden realizar varias tareas, como compar- varias especificaciones y tecnologías que se
tir, publicar, comunicarse con otros usuarios han definido a partir de los estándares que el
e incluso poner a disposición aplicaciones en consorcio W3C ha planteado para el diseño
áreas específicas, lo cual se ha mejorado me- web; estas integran elementos como lengua-
diante el desarrollo de sitios web y de las tec- jes que permiten crear las páginas web, por
nologías asociadas. ejemplo HTML y XHTML, el conjunto de re-
glas de estilo que permite mejorar y separar
Normalmente el proceso que realiza el usua- la apariencia de estas páginas de su conteni-
rio cuando accede a una página es activar o do usando hojas de estilo CSS, lenguajes que
seleccionar opciones o elementos que produ- facilitan la incorporación de metadatos como
cen una respuesta, que es generada por un XML y XSLT, elementos que permiten ha-
servidor al ejecutar acciones de forma trans- cer la transferencia asíncrona de datos entre
parente para dicho usuario. Inicialmente el cliente y el servidor por medio del objeto
esta tarea no tenía ningún problema ya que XMLHttpRequest y el uso de los scripts que
las operaciones que debían ser ejecutadas no agregan la funcionalidad requerida para eje-
eran tan complicadas, pero actualmente las cutar las peticiones por medio de JavaScript.
aplicaciones web son más robustas y utilizan En la figura 1 se describen brevemente algu-
gran cantidad de recursos que permiten pro- nas características de dichas tecnologías.
cesar bastante información y poner a dispo-
sición múltiples servicios, lo que en algunas
ocasiones hace que el usuario tenga que es- Figura 1. Tecnologías que integran AJAX
perar a que el servidor procese la solicitud
y genere la respuesta. Esta espera constituía
una desventaja, hasta que apareció AJAX, un
conjunto de tecnologías que usa el lenguaje
JavaScript incorporando metadatos por me-
dio de XML, cuya integración hace que la eje-
cución se realice en el cliente: manteniendo
una comunicación asíncrona con el servidor
facilita que los procesos se ejecuten más rápi-
do sin necesidad de recargar las páginas, me-
jorando así la funcionalidad y los tiempos de
respuesta de estas [1]. Fuente: elaboración propia.

Existen muchos lenguajes que son utiliza- XHTML eXtensible Hyper Text Markup Lan-
dos por los desarrolladores para implemen- guage (lenguaje extensible de marcado de hiper-
tar aplicaciones web, entre ellos Java y Php, texto): es un lenguaje de etiquetas que sirve
los cuales pueden hacer uso de AJAX para para crear páginas web, aunque mejora la 157
157

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

estructura que se ha definido en el lengua- DOM Document Object Model (Modelo de Ob-
je HTML. jetos del Documento): el W3C: “define la es-
tructura lógica de los documentos y el modo
Como ya se conoce, todas las páginas es- en que se accede y manipula” [3]; es un API
tán hechas en lenguaje HTML (HyperText (Interfaz de Programación de Aplicaciones)
Markup Language), pero dado el desarrollo que permite a los desarrolladores web rea-
del diseño web y la necesidad de cubrir nue- lizar operaciones sobre una página también
vos requerimientos de los usuarios, las en- llamada documento, para agregar, modificar
tidades que definen las pautas en esta área, o eliminar cualquier objeto o contenido que
como el consorcio W3C, pretenden crear pá- contenga esta.
ginas con significado, es decir que las pági-
nas no solo sean un conjunto de elementos, Por lo general la estructura de los objetos
como texto, imágenes y vínculos, sino que es- dentro de la página está definida por una
tén asociadas a un significado y además per- jerarquía de objetos que tienen relaciona-
mitan separar claramente las características das características y funciones que hacen
que definen la apariencia y la información más fácil su uso desde cualquier lenguaje de
que se va a presentar. Por lo cual se desarro- programación.
lló el estándar XHTML, que es una adapta-
ción de HTML agregando las capacidades XML y XSLT XML Stylesheets Language for
del lenguaje XML, el cual permite que las pá- Transformation (Lenguaje de Estilo Extensible):
ginas contengan elementos con una estructu- es una especificación del W3C que permi-
ra bien definida y se puedan configurar para te definir una plantilla para transformar do-
ser presentarlas desde cualquier dispositivo cumentos XML en otro tipo de documentos,
o navegador haciéndolas más flexibles. como páginas Web en HTML y XHTML. Con
este lenguaje se pueden crear plantillas que
CSS Cascading Style Sheets (hojas de estilo en contienen un conjunto de reglas de transfor-
cascada): este estándar, también definido por mación aplicadas al documento XML, que
el W3C, está muy relacionado con los len- también se llaman reglas de estilo XSLT; es-
guajes HTML y XHTML, ya que se encarga tas luego son analizadas por un procesador
de definir el estilo o apariencia de la pági- de XSLT, el cual hace la transformación para
na web; permite manipular los formatos de generar el archivo correspondiente para vi-
los elementos teniendo en cuenta caracterís- sualizarlo en un dispositivo específico [4].
ticas como color, posición y fuentes y mejora Este tipo de transformaciones favorece sepa-
la presentación de la información que contie- rar el contenido de la presentación.
ne la página de acuerdo con el tipo de dispo-
sitivo donde se va a visualizar, por lo cual es XML HttpRequest (Extensible Markup Langua-
fácil acceder a las páginas desde un teléfono ge/Hypertext Transfer Protocol): es un objeto
celular, una tableta o un computador perso- que permite hacer peticiones al servidor de
nal sin que la presentación se altere [2]. forma asíncrona y sin tener que actualizar las
páginas en las que se hacen dichas peticiones
Las hojas de estilo facilitan el mantenimien- [5]. Este objeto está definido en todos los na-
to de las páginas web ya que se definen de vegadores para realizar las acciones de trans-
forma independiente y separada de la estruc- ferencia de datos.
tura de estas y se convierten en una buena
158
158 práctica para el desarrollo web.

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

JavaScript: es un lenguaje basado en script de- 3. Funcionamiento de AJAX

sarrollado por Netscape y Sun Microsystems, respecto a los tiempos
que permite agregar funcionalidad y hacer de respuesta
más dinámicas las páginas web. Los scripts
se pueden insertar en el código HTML y este Como ya se indicó, el objetivo principal de
es interpretado por cualquier navegador, por AJAX es que el usuario pueda disponer del
lo cual se dice que JavaScript se implementa contenido de una página sin que los tiempos
y ejecuta del lado del cliente, pero también se de respuesta hagan que la página esté inacti-
puede usar del lado del servidor como Ser- va por mucho tiempo. En la figura 2 se puede
ver-side JavaScript o SSJS. Aunque su nom- observar la línea de tiempo que muestra los
bre hace que se relacione con el lenguaje de tiempos de uso, procesamiento y respuesta
programación Java, no son lo mismo, su sin- que se generan cuando el usuario realiza una
taxis es similar al lenguaje C y permite de- solicitud desde el navegador hacia el servi-
finir prototipos de objetos sin necesidad de dor, los cuales varían cuando las aplicaciones
definir tipos de datos [6]. web implementan, o no, AJAX.

Figura 2. Línea de tiempos de aplicaciones con AJAX

Fuente: elaboración propia.

En el caso en que el usuario accede a una aplicación que no utiliza AJAX, esta es enviada des-
de el servidor al navegador donde el usuario puede visualizar y manipular los elementos de
la o las paginas (tiempo de uso de la página en el navegador), y cuando el usuario activa una
acción que requiera ser ejecutada por el servidor, este deberá actualizar la página nuevamente
159
159

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

hasta que se genera la nueva respuesta (tiem- 4. Implementación de AJAX

po de procesamiento del servidor). Este pro- en el desarrollo de
ceso incluye el momento en el que se envía aplicaciones web
la solicitud hasta que la página completa es
visualizada nuevamente en el navegador y Para explicar cómo se puede implementar
depende del tipo de operación que deba re- AJAX en una aplicación web se desarrolla-
solver el servidor, lo que genera un tiempo rá un ejemplo que permita mostrar y consul-
de inactividad en el navegador en el cual el tar registros de una base de datos en Mysql
usuario no recibe ninguna información y se que contiene datos de vehículos cuyo crite-
mantiene una página en blanco (tiempo inac- rio de búsqueda es la marca, utilizando los
tivo en el navegador); es en este tiempo cuan- lenguajes Php y Java para presentar las dos
do se presentan las demoras que disminuyen perspectivas.
la eficiencia de este tipo de aplicaciones.
4.1. Arquitectura de la aplicación
Por otra parte, cuando se implementan apli- web
caciones con AJAX, este proceso tiene al-
gunas variaciones. Inicialmente el servidor Inicialmente se deberá definir la arquitectura
también envía la página completa y el usua- de la aplicación; por lo general la arquitectu-
rio puede actuar sobre esta, de la misma ma- ra de capas es una buena alternativa para la
nera que en el caso anterior, pero cuando implementación de aplicaciones cliente-ser-
el usuario activa una o varias acciones, es- vidor, ya que permite separar los elementos
tas se realizan con peticiones asíncronas al que acceden a los datos de la lógica y a la
servidor generando un proceso que se pue- vez de la presentación que corresponderá a
de decir que se ejecuta en paralelo, es decir, los elementos que el usuario visualizará en
mientras el servidor se encarga de procesar la página web. Adicionalmente, el desarrollo
la parte de la página que requiere ser actua- se hará bajo el paradigma orientada a obje-
lizada, en el navegador se mantiene el resto tos dado que los lenguajes Java y Php per-
de la página para que el usuario pueda se- miten este tipo de programación y es lo más
guir usando la aplicación. Cuando se obtiene recomendable si se piensa realizar aplicacio-
la respuesta del servidor se podrá actualizar nes robustas y de calidad.
la sección de la página que mostrará los re-
sultados; este proceso es implementado en La capa de presentación estará definida por
Javascript, el cual permite activar un mane- la incorporación de una hoja de estilo que
jador de eventos que verifica cuándo se ha definirá la apariencia de los elementos que se
generado dicha respuesta para realizar la ac- visualizarán en la página HTML y la defini-
tualización. Este proceso hace que el tiempo ción del objeto XMLHttpRequest para el uso
de procesamiento en el servidor no interfiera de AJAX que permitirá realizar las peticiones
con el tiempo de uso de la página en el nave- desde el cliente al servidor; se podría decir
gador, por lo cual hace más rápidos los tiem- que esta capa se ejecutará en el cliente y en
pos de respuesta. el servidor, dado que en el servidor es donde
estará alojada la aplicación, y cuando el na-
vegador solicita la página, esta es descarga-
da completamente (figura 3).

160
160

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

Figura 3. Arquitectura de la aplicación web

Fuente: elaboración propia.

La capa lógica contendrá las clases que incor- La estructura de la base de datos definida
poran la funcionalidad para realizar los pro- para el ejemplo se puede importar del si-
cesos de filtrado y consulta de la aplicación. guiente código en formato SQL, donde se
define el nombre de la base de datos como
La capa de persistencia contendrá la cone- empresa que contiene una tabla llamada
xión a la base de datos que permitirá la ges- vehiculos cuyos campos son idVehiculo, pla-
tión de la información que será manipulada ca, marca y modelo; además se agregaron
por la aplicación. Para ello el uso de Mysql varios registros inicialmente para que se pre-
puede ser una buena opción ya que es un senten en la página al ser mostrada por pri-
manejador de base de datos libre y tiene un mera vez en el navegador (figura 4).
buen soporte de datos.

161
161

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

Figura 4. Vista de archivo SQL, estructura

de la base de datos de la aplicación

Fuente: elaboración propia.

4.2. Capa de presentación

Figura 5. Vista de página web ejemplo
La propuesta de visualización para la página consulta de vehículos
de ejemplo se muestra en la figura 4; simple-
mente contendrá una caja de texto para in-
gresar el criterio de filtrado y el botón buscar
que activará la solicitud de ejecución. Para
el diseño de esta se usará el lenguaje HTML
el cual permite utilizar un conjunto de capas
o contenedores para agrupar los elementos
con el fin de mejorar la visualización, a las
cuales se les definirán las reglas de estilo por
medio de CSS (figura 5).

162
162 Fuente: elaboración propia.

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

Hoja de estilo: para que la página tenga la apa- #vistaConsulta{

riencia que se muestra en la figura 5 se pue- float: left;
den definir varias reglas de estilo; algunas de width: 100%;
estas se proponen a continuación. Cada una padding: 2em 0 0 0;
define la ubicación y formato de los elemen- margin: 0 0 0 2em;
tos dentro de la página. Para ello se han de- text-align: left; }
terminado tres clases que se definen en capas img{float: left;
tipo div: margin: 0 2em 0 2em; }
h1{ font-size: 1.4em; }
#encabezado es la clase que define el forma- h2{ font-size: 1.1em; }
to que agrupa la imagen de AJAX y el título h1, h2 {
Consulta BD con AJAX. font-weight: normal;
margin: 1em 0 2em 0;
#contenido es la clase que define los formatos line-height: 100%;
de la capa que contiene la etiqueta “Digite font-family: ‘Oxygen’, sans-serif; }
la marca”, la caja de entrada donde el usua- #vistaConsulta table {
rio digitará el criterio de búsqueda y el botón margin: 0 0 1em 2em;
que activará la acción de filtrado. border:1px solid #0000ff;
width:80%;
Y finalmente la clase llamada #vistaConsulta }
que implementa el formato de la capa donde th { font-weight: bold; }
se mostrará la tabla con el conjunto de regis- th, td {
tros que genera la consulta. Esta es la capa o border: 1px solid #181e23;
parte de la página que será actualizada por font-size: 1em;
medio de AJAX. padding: 0.5em;
}
/* Hoja de estilos CSS para ejemplo AJAX */ label, button, input {
font-size: 1.125em;
body { margin: 0 0.5em 0 0;
font-size: 0.875em; width:6em;
font-weight: normal; }
font-family: Tahoma, Arial, Helvetica,
Verdana, sans-serif; Página principal: corresponde a la vista; es el
background: #edeae8; componente que le permite al usuario inte-
color: inherit; ractuar con la aplicación. Por lo general esta
} página tiene el nombre de índex y su exten-
#encabezado, #contenido{ sión depende del lenguaje en que se ha de-
float: left; sarrollado (*.php, *.jsp, *.aspx, entre otros).
width: 100%; Básicamente el código utilizado para imple-
text-align: left; mentar esta página es el HTML. En la figura
} 6 se presentan los códigos que pueden im-
#contenido{ plementarse en los lenguajes Php y Java que
float: left; permiten generar una página con la interfaz
margin: 0 0 0 2em; que se ha definido en la figura 5.
} 163
163

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

Figura 6. Vista de código archivo [Link]

Fuente: elaboración propia.

Código en lenguaje Php: este código se almace- da como id=vistaConsulta, en la línea 25, en
na con el nombre de [Link] e incorpora las la cual se mostrará siempre el resultado de
reglas de estilo que se plantearon previamen- la función enviar(), la que permite visualizar
te en un archivo llamado [Link], tal como los datos generados por las consultas hechas
se observa en la línea 8. Adicionalmente se por el usuario.
agrega un script de Java llamado [Link] en la
línea 9, que contiene el código para crear el Código de un servlet en Java: se puede crear un
objeto XMLHttpRequest y la función enviar() servlet con el nombre [Link], se puede uti-
que será activada por el usuario desde el bo- lizar el mismo código de Php, ya que, como
tón Buscar o al cargar la página, como se ob- se ha dicho, esta página es en HTML; solo se
serva en las líneas 19 y 26. agrega la línea 7 para importar la ruta del ar-
chivo que contiene la lógica de la aplicación
Como se indicó, se están usando capas div y se modifica la línea 11 para cambiar el títu-
para agrupar elementos de la página; una lo de la página (figura 7).
de las más importantes es la div identifica-

164
164

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

Figura 7. Vista código archivo [Link]

Fuente: elaboración propia.

Archivo del script AJAX: el archivo [Link] es Dado que el objeto fue creado por Micro-
el script que se agrega en la página principal soft para la versión 5.0 del Internet Explo-
y, como ya se ha indicado, contiene la defini- rer utilizando un objeto ActiveX [7, p. 114],
ción de las funciones de JavaScript que per- el cual permite crear objetos que pueden ser
miten realizar las siguientes tareas: usados en internet de forma independiente
de un lenguaje de programación, se usa el
• Definir el objeto XMLHttpRequest. objeto [Link] para obtener el
XMLHttpRequest en versiones menores de
• Definir la función para enviar la informa- Internet Explorer 7.0, como se observa en las
ción al servidor. líneas 3 y 4 del código.

• Validar y obtener la información en el Por otra parte, para crear el objeto XML-
cliente. HttpRequest en navegadores como Firefox,
Opera, Safari, Opera, versiones de Internet
Definición objeto XMLHttpRequest: este obje- Explorer superiores a 7.0, entre otros, se uti-
to permite generar las peticiones asíncronas liza la forma nativa del mismo con el objeto
desde la página, aunque se obtiene de forma [Link] [8] empleado en las
diferente en cada tipo de navegador, por lo líneas 5 y 6.
cual es necesario validar la creación de este.
En la figura 8 se muestra el código que co-
rresponde a un formato estándar para reali-
zar dicho proceso.

165
165

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

Figura 8. Vista del código función

objetoAjax del archivo [Link]

Fuente: elaboración propia.

5. Definir la función para enviar la información al servidor

La función enviar ejecuta varios métodos del objeto AJAX que permiten hacer la petición al
servidor y enviar la información necesaria para realizar el proceso que el cliente ha solicita-
do (figura 9).

Figura 9. Vista del código función

enviar del archivo [Link].

Fuente: elaboración propia.

Inicialmente se obtiene el contenedor o capa en este caso el criterio de búsqueda que se

donde se presentarán los resultados del pro- encuentra en el control llamado marca dentro
ceso de consulta y filtrado cuyo nombre es de la página; este también es manipulado con
vistaConsulta; para ello se utiliza el DOM el DOM. Dicho contenido se asigna a una va-
donde se accede al arreglo de objetos de la riable llamada marcaV con la instrucción que
página. De esta forma se puede asignar a se observa en la línea 16, luego se invoca la
un objeto dentro de la función llamado di- función que crea el objeto AJAX en la línea 17
vConsulta, tal como se observa en la línea 14; y posteriormente se abre la conexión desde la
adicionalmente se obtienen los datos o infor- página y el archivo [Link] que procesa-
166
166 mación que será procesada por el servidor, rá la solicitud; para ello se utiliza el método

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

open() del objeto XMLHttpRequest, tal como questHeader utilizados para obtener el estado
aparece en la línea 18; este método requiere de la petición [9] y definir el formato de la
como mínimo dos parámetros: el primero co- cabecera de la petición [10], respectivamente.
rresponde al método de envío de los datos y Por último se ejecuta el método send que en-
el segundo contiene el URL del archivo con vía los datos a la URL con la que se estableció
el que se desea establecer la conexión, en este la conexión utilizando el método open.
caso [Link]. El parámetro true se agrega
para especificar que la conexión se hará de 6. Validar y obtener
modo asíncrono, aunque por defecto se reali- la información en el cliente
zan este tipo de peticiones.
El proceso de validación evalúa el estado
En Java la línea 18 cambia por la siguiente de la petición por medio de las propieda-
instrucción, la cual puede ser un servlet que des readyState y status del objeto XMLHtt-
procesa los datos de la petición: pRequest. La propiedad readyState permite
identificar si la petición se ha enviado satis-
[Link](“POST”, “Logica/ factoriamente y se encuentra cargada en el
consulta”,true); servidor, en este caso tendrá el valor 4, y la
propiedad status identifica si la respuesta del
Después de activar la conexión se ejecuta el servidor es correcta cuando tiene el valor 200
evento onreadystatechange y el método setRe- [11]. El código que se puede utilizar para rea-
lizar este proceso se incluye en la función va-
lidaEnvio que se muestra en la figura 10.

Figura 10. Vista del código función

validaEnvio() del archivo [Link]

Fuente: elaboración propia.

Cuando la respuesta del servidor es válida, simplemente se agrega al contendedor divConsulta

para que se muestre en la página. La respuesta se obtiene de la propiedad responseText en for-
mato de texto tal como se muestra en la línea 26, aunque también se puede usar responseXML
cuando se utilizan servicios que transfieren archivos XML.

167
167

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

6.1. Capa lógica Código Php archivo [Link]: este código re-
cibe los datos marca y función por el método
La implementación de la lógica solo requie- post. El parámetro función se utiliza para va-
re definir las funciones que permitirán obte- lidar qué función debe ser ejecutada, es decir,
ner los datos que se encuentran almacenados si se recibe el parámetro marca con el nombre
en la base de datos; para ello se crean las fun- de la función consultaMarca() se hace el corres-
ciones consultaTodos(), consultaMarca() y pondiente llamado, de lo contrario se ejecuta
mostrarDatos(). Cada una de estas funcio- la función consultaTodos(). Finalmente la fun-
nes manipula un objeto instanciado de la cla- ción mostrarDatos() manipula el conjunto de
se Vehiculo, el cual contiene los métodos de registros que se obtiene de cualquiera de las
conexión y ejecución de las consultas corres- funciones de consulta y lo visualiza dentro de
pondientes. A continuación se muestra el có- una tabla; este es el resultado que se presenta
digo propuesto para implementar dichas en el contenedor vistaConsulta de la página del
funciones con los lenguajes Php y Java. cliente (figura 11).

Figura 11. Vista del código archivo [Link]

Fuente: elaboración propia.

CódigoJava del servlet Consulta: este archivo no es muy diferente del archivo consulta Php, solo
incorpora las funciones necesarias para ejecutar la petición de servidor por medio de la fun-
168
168 ción processRequest. En las figuras 12, 13 y 14 se presenta el código correspondiente.

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

Figura 12. Vista del código función

processRequest del archivo [Link]

Fuente: elaboración propia.

Funciones consulta del servlet

Figura 13. Vista del código funciones

de consulta del archivo [Link]

Fuente: elaboración propia. 169

169

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

Función mostrarDatos del servlet

Figura 14. Vista del código función

mostrarDatos del archivo [Link]

Fuente: elaboración propia.

Definición de clases: como ya se indicó, cada rrespondiente. En el código que se presenta

método de consulta crea un objeto de tipo a continuación se hace el llamado directo a la
Vehiculo, por lo tanto es necesario definir conexión y a la función que ejecuta las sen-
la clase que contendrá la información y la tencias, aunque lo más aconsejable es utilizar
funcionalidad de dicho objeto que permiti- patrones de acceso a datos, entre ellos el pa-
rán hacer una conexión con la base de datos trón DAO (Data Access Objects) [13].
y luego ejecutar la sentencia de consulta co-

170
170

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

Clase Vehiculo en Php

Figura 15. Vista del código clase [Link]

Fuente: elaboración propia.

Clase Vehiculo Java

Figura 16. Vista del código clase [Link]

Fuente: elaboración propia.

171
171

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

6.2. Capa de persistencia

En esta capa se ha definido la clase ConexiónBD que conecta con MySQL y básicamente con-
tiene los métodos conectar() para establecer la conexión con la base de datos y consultar() para
ejecutar la sentencia MySQL que genera el conjunto de registros requeridos. En las figuras 17
y 18 se presenta el código propuesto de esta clase en Php y Java.

Clase Conexión BD en Php

Figura 17. Vista código clase [Link]

Fuente: elaboración propia.

172
172

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

Clase Conexión en Java

Figura 18. Vista del código clase [Link]

Fuente: elaboración propia.

7. Resultado de la ejecución nejador de base de datos MySQL; además

es fácil de activar desde Netbeans para la
Para ejecutar este tipo de aplicaciones es implementación.
necesario aclarar que se debe tener un ser-
vidor de aplicaciones dado que se están eje- Finalmente, al invocar el archivo index de
cutando aplicaciones web cliente-servidor; cualquier lenguaje, y agregar un criterio de
una propuesta es usar xampp, ya que provee búsqueda, para el ejemplo la marca Chevro-
el API de Php, el servidor Apache y el ma- let, el resultado será el que se presenta en la
figura 19.

173
173

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

A T U S O D E A J A X E N E L D E S A R R O L L O D E A P L I C A C I O N E S W E B C O N J A V A Y P H P

9. Referencias
Figura 19. Vista del resultado
de la ejecución consulta con AJAX [1] J. J. Garrett, Ajax: A New Approach
to Web Applications. Disponible en:
[Link]/ideas/
ajax-new-approach-web-applications
[2] Consorcio W3C, HTML y CSS. Dis-
ponible en: [Link]/standards/
webdesign/htmlcss
[3] P. Le Hégaret, L. Wood y J. Robie, ¿Qué
es el Modelo de Objetos del Documento?
Disponible en: [Link]/2005/03/
DOM3Core-es/[Link]
[4] Consorcio W3C, XSL Transformations
(XSLT)Version 1.0. Disponible en: www.
[Link]/TR/xslt.
[5] Consorcio W3C, XMLHttpRequest Le-
vel 2. Disponible en: [Link]/TR/
XMLHttpRequest
[6] Mozilla Developer Network, About Ja-
Fuente: elaboración propia. vaScript. Disponible en: [Link]
[Link]/en-US/docs/
8. Conclusión JavaScript/About_JavaScript.
[7] J. Eguiluz Pérez, Introducción a AJAX.
Para desarrollar aplicaciones web que le brin- Disponible en: [Link]
den al usuario una buena funcionalidad, es [Link]/introduccion-a-ajax-por-
necesario utilizar las tecnologías que se en- javier-eguiluz-perez/
cuentran a nuestro alcance, sin dejar de lado [8] W3schools, The XMLHttpRequest Object.
los estándares establecidos para su diseño e Disponible en: [Link]/
implementación. xml/xml_http.asp
[9] Consorcio W3C. l. cit. Disponible en:
AJAX es solo una de las múltiples formas de [Link]/TR/XMLHttpRequest/
proporcionar esta característica. Lo impor- #handler-xhr-onreadystatechange
tante es comenzar y una de las maneras de [10] Consorcio W3C, ibíd. Disponible en:
hacer nuevas aplicaciones es reutilizando el [Link]/TR/XMLHttpRequest/
código que ya está disponible. #the-setrequestheader-method
[11] W3schools, AJAX - The onreadystate-
change Event. Disponible en: www.
[Link]/ajax/ajax_xmlhttpre-
quest_onreadystatechange.asp

174
174

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175

 So n i a A l e x a n d r a Pi n z ó n Nu ñ e z V Í N C U L O S
J U L I O D E 2 0 1 2
VOLUMEN 9 NÚMERO 2

[12] W3schools, AJAX - Server Response. Dis- 9.1. Referencias adicionales

ponible en: [Link]/ajax/
ajax_xmlhttprequest_response.asp [Link], AJAX Introduction. Disponi-
[13] Sun MicrosystemsCore J2EE Patterns, ble en:
Data Access Object. Disponible en: [Link]/php/php_ajax_intro.
[Link]/technetwork/java/ asp
[Link] XMLHttpRequest Microsoft, XMLHttpRe-
quest Object. Disponible en: http://
[Link]/es-ES/library/
ie/[Link]
[Link], Introduction to Ajax for Java Web
Applications. Disponible en: [Link]
[Link]/kb/docs/web/ajax-quick-
[Link]

175
175

Revista Vínculos Vol. 9 Número 2, julio de 2012, pp. 155-175