Vea esta aplicación en Acción.
La librería Prototype es una colección robusta de funciones JavaScript diseñadas para facilitar la integración de AJAX en una aplicación. Su distribución es libre y puede ser obtenida en la siguiente dirección : http://prototype.conio.net/ . Prototype hace las veces del proceso de diseño descrito anteriormente : La vinculación entre la aplicación de servidor y XMLHttpRequest.
En este sentido, Prototype es un simple archivo .js, mismo que debe ser declarado en el documento principal para tener acceso a sus atajos y agilizar el desarrollo de AJAX. El contenido de Prototype es una librería JavaScript basada en principio de objetos, lo cual le otorga una gran flexibilidad e inter-operabilidad en distintas circunstancias y Navegadores que se deseen emplear AJAX.
Ahora que conoce que es Prototype y cual es su función, procedamos con el proceso de diseño descrito anteriormente, pero ahora con código.
Definición de elementos <div>
A continuación puede observar la interfaz que será utilizada para esta aplicación AJAX :
 |
El código HTML/XHTML y la respectiva hoja de estilo (CSS) que genera este despliegue es el siguiente :
| Documento Principal | Hoja de Estilo (CSS) |
|---|---|
<html>
<head>
<link href="hojaestilo.css" rel="stylesheet"
type="text/css"></link>
</head>
<body>
<table align="center"><tr><td>
<div id="menu">
<table border="0" align="center">
<tr>
<th align="center"colspan="2">
Menu
</th>
</tr>
</table>
</div>
<!-- INICIA DIV DE CONTENCION -->
<div id="contencion">
<div id="seccionx">
Estado original seccion X
</div>
<div id="secciony">
Estado original seccion Y
</div>
</div>
<!-- TERMINA DIV DE CONTENCION -->
</td></tr></table>
</body>
</html>
|
#menu {
float:left;
width:400px;
height:400px;
background-color:#babeff;
overflow:hidden;
padding-top:100px;
}
#contencion {
float:left;
width:180px;
height:500px
}
#seccionx {
float:left;
width:180px;
height:150px;
background-color:#a8a8b2;
overflow:hidden;
padding-top:150px;
padding-left:20px;
}
#secciony {
float:left;
width:180px;
height:125px;
background-color:#08b783;
overflow:hidden;
padding-top:75px;
padding-left:20px;
}
|
El documento HTML/XHTML utiliza varios elementos <div> en su estructura, mientras la hoja de estilo (CSS) aledaña, define el posicionamiento y características de dichos elementos. Fuera de estas declaraciones, no existe mayor detalle que la declaracion de la hoja de estilo (CSS) en la parte superior del documento y el uso de una tabla interna.
Definición de aplicaciones de servidor.
El proceso para definir una aplicación de servidor en un diseño AJAX, varía según sus necesidades de información. Debido a esto, no ilustraremos ninguna aplicación compleja que requiera conectarse a una Base de Datos o interactuar con otros componentes, simplemente, se utilizarán las aplicaciones mas básicas sobre diversas tecnologías en servidor, mismas que puede ser observadas en la siguiente tabla.
| Aplicación JSP/Servlet | Aplicación ASP |
|---|---|
<% String texto = "AJAX via Java!"; %> <b><%= texto %></b> |
<%
response.write("<b>AJAX via ASP!</b>")
%>
|
| Aplicación PHP | Texto Simple (Aplicación) |
<?php echo '<b>AJAX via PHP!</b>'; ?> |
<b>AJAX via texto! </b> |
Nótese que al ser procesada cada aplicación, se produce un resultado en texto simple, así como el elemento <b> HTML/XHTML. La colocación en producción de estas aplicaciones debe ser realizada como cualquier otra de su tipo, esto es, el JSP debe ser alojado en un servidor Java -- como Tomcat -- la aplicación PHP en un servidor habilitado con este modulo, el ASP en IIS ("Internet Information Server"), y el fragmento de texto en cualquier servidor de paginas.
Una vez preparadas las aplicaciones de servidor, tome nota de los URL's de acceso, y realice pruebas directamente de un Navegador/"Browser" para cerciorarse que no existe ningún error. Confirmado este proceso, puede proseguir con su diseño AJAX.
Vincular aplicación de servidor con XMLHttpRequest
A través de Prototype, el proceso de vinculación entre las aplicaciones de servidor y el objeto JavaScript XMLHttpRequest resulta sumamente simplificado. La declaración que debe hacer para tener acceso a Prototype en su aplicación, es idéntica a cualquier otra librería JavaScript, y se ilustra a continuación :
<head> <script src="prototype.js" type="text/javascript"></script> </head> |
La librería .js es pequeña (27Kb aproximadamente), lo cual causa demoras minimas en la descarga de la aplicacion -- como un grafica GIF o JPEG. Una vez declarada la libreria, tendremos acceso a las provisiones para ligar eventos JavaScript facilmente a las llamadas a realizarse via AJAX.
Ligar eventos JavaScript a funciones que emplean XMLHttpRequest
El primer paso que realizaremos en esta área es : la definición de los elementos HTML/XHTML que activarán los eventos JavaScript. A continuación, se muestra el documento principal con una tabla de menús que ha sido agregada para este propósito.
<table border="0" align="center">
<tr>
<th align="center"colspan="2">
Menu
</th>
</tr>
<tr>
<td align="center" colspan="2">
Acciones onclick
</td>
</tr>
<tr>
<td align="center">
<a href="" onclick=""> Actualizar Seccion X </a>
</td>
<td>
<a href="" onclick=""> Actualizar Seccion Y </a>
</td>
</tr>
<tr>
<td align="center" colspan="2">
Acciones onmouseover
</td>
</tr>
<tr>
<td align="center" href="" onmouseover="">
Actualizar Seccion X
</td>
<td align="center" onmouseover="">
Actualizar Seccion Y
</td>
</tr>
</table>
|
En esta tabla existen cuatro elementos de importancia: dos ligas/"links" (<a>) definidas con el evento JavaScript onclick, y dos celdas (<a>) definidas con el evento JavaScript onmouseover. Estos elementos, representan los puntos donde serán activadas las acciones correspondientes de AJAX en JavaScript.
Las declaraciones anteriores de onclick y onmouseover aun no están ligadas a ningún código JavaScript, estas corresponderían a llamadas realizadas directamente de funciones encontradas en Prototype. Ahora ilustremos el contenido que debe ser incluido en cada evento JavaScript y sus respectivas llamadas AJAX :
onclick="new Ajax.Updater('seccionx','aplicaciones/llamada.jsp', {asynchronous:true});return false;"
onclick="new Ajax.Updater('secciony','aplicaciones/llamada.asp', {asynchronous:true});return false;"
onmouseover="new Ajax.Updater('seccionx','aplicaciones/llamada.php', {asynchronous:true});return false;"
onmouseover="new Ajax.Updater('secciony','aplicaciones/llamada.txt', {asynchronous:true});return false;"
|
A simple vista, debe ser evidente que existe una relación entre todas estas llamadas AJAX. La declaración new Ajax.Update es una parte central de la librería Prototype, dicha función recibe tres parámetros para realizar actualizaciones vía AJAX. El primer parámetro de esta función representa el id del elemento <div> que será actualizado, mientras el segundo parámetro representa el URL -- o dirección de Internet para la aplicación de servidor -- cuyos resultados serán colocados en el elemento <div>, finalmente, el tercer parámetro -- {asynchronous:true} -- representa una opción estándar para Prototype , que por razones de espacio no ilustraremos sus variantes.
De esta manera, tomando como ejemplo la primer declaración, al momento que un usuario de un clic sobre la liga correspondiente, el contenido del elemento <div id="seccionx"> será actualizado con la información obtenida de la aplicación de servidor que reside en aplicaciones/llamada.jsp. Entre las consideraciones que debe tomar en estas declaraciones: Todas las aplicaciones de servidor emplean una ruta relativa al directorio en su definición, mismas que pudieron haber sido declaradas como rutas absolutas de servidor, y como ya se había mencionado anteriormente, al no encontrarse cualquiera de estas aplicaciones, AJAX desplegaría el error obtenido del servidor.
Con esto terminamos nuestra aplicación AJAX ! Y a su vez, nuestra exploración de esta tecnología que le permite realizar aplicaciones con una interfaz ágil para ambientes web.