Un ejemplo con AJAX.

admin · por **admin** » Jue Oct 15, 2009 7:29 am

Confeccionaremos un ejemplo donde veremos que aparecen muchos conceptos, no se preocupe si no los comprende en su totalidad ya que los mismos se verán en forma detallada a lo largo de este curso.

La idea fundamental de este ejercicio es conocer como debemos estructurar nuestras páginas y ver que introduce de nuevo el empleo de AJAX.

Confeccionaremos un problema muy sencillo, imaginemos que tenemos una lista de hipervínculos con los distintos signos del horóscopo y queremos que al ser presionado no recargue la página completa sino que se envíe una petición al servidor y el mismo retorne la información de dicho signo, luego se actualice solo el contenido de un div del archivo HTML.

Este problema se puede resolver muy fácilmente si refrescamos la página completamente al presionar el hipervínculo, pero nuestro objetivo es actualizar una pequeña parte de la página y más precisamente el div que debe mostrar los datos del signo seleccionado.

Si bien nuestra página solo contendrá los hipervínculos a los distintos signos en un caso real la página puede contener muchos otros elementos HTML con imágenes, otros hipervínculos etc. los cuales no deberán sufrir cambios (ni parpadeo) ya que solo se modificará el elemento div respectivo mediante DHTML.

Esta actualización parcial de la página tiene muchas ventajas:

•Reducimos el ancho de banda requerido al no tener que recuperar toda la página.
•Agilizamos la actualización de la página.
•Reducimos el parpadeo de la página.
•Hacemos más natural la navegación del sitio.
La mayoría de los problemas requieren los siguientes archivos como mínimo:

1.El archivo HTML (es la página que se ve en el navegador)
2.El archivo JS (contiene todas las rutinas JavaScript que permiten actualizar dinámicamente la página HTML (mediante DHTML) y las rutinas que permiten comunicarse con el servidor para el envío y recepción de información.
3.La hoja de estilo, es decir el archivo CSS
4.La página que contiene el script que se ejecuta en el servidor(en nuestro caso emplearemos el lenguaje PHP)
Comencemos a presentar los distintos archivos para resolver este problema:

pagina1.html<html>
<head>
<title>Problema</title>
<script></script>
<link>
</head>
<body>
<h1>Signos del horóscopo.</h1>
<div>
<p><a>Aries</a></p>
<p><a>Tauro</a></p>
<p><a>Geminis</a></p>
<p><a>Cancer</a></p>
<p><a>Leo</a></p>
<p><a>Virgo</a></p>
<p><a>Libra</a></p>
<p><a>Escorpio</a></p>
<p><a>Sagitario</a></p>
<p><a>Capricornio</a></p>
<p><a>Acuario</a></p>
<p><a>Piscis</a></p>
</div>
<div>Seleccione su signo.</div>
</body>
</html>
Esta página contiene HTML puro. Es importante notar que debemos incorporar los dos archivos externos .css y .js mediante los elementos HTML respectivos:

<script></script>
<link>
La hoja de estilo solo tiene el objetivo de mejorar la presentación en la página de los doce hipervínculos de los signos del horóscopo. Puede probar de eliminar el archivo .css mediante el borrado del elemento link del archivo HTML y el problema debería continuar funcionando, por supuesto con una presentación mucho más pobre.

Podemos observar que cada hipervínculo solicita la misma página al servidor pero pasándole como parámetro un valor distinto, con esto podremos detectar en el servidor que signo a elegido el operador.

El segundo archivo contiene las reglas de estilo que se definen para el archivo HTML:

estilos.css#menu {
font-family: Arial;
margin:5px;
}

#menu p {
margin:0px;
padding:0px;
}

#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}

#menu a:link, #menu a:visited {
color: #f00;
text-decoration: none;
}

#menu a:hover {
background-color: #369;
color: #fff;
}

#detalles {
background-color:#ffc;
text-align:left;
font-family:verdana;
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}
No haremos un análisis de estas reglas ya que corresponden al tema 28 del curso de CSS Ya "Creación de un menú vertical configurando las pseudoclases", puede refrescar los conceptos allí. Inclusive si todavía conoce poco de CSS y no quiere estudiarlo por ahora puede anular el archivo no incorporándolo en la página HTML suprimiento el elemento link.

Ahora viene uno de los puntos claves donde debemos prestar más atención, esto se encuentra en las rutinas JavaScript que debemos implementar para comunicarnos con el servidor, además de lo ya conocido de DHTML para añadir elementos HTML en forma dinámica.

Veamos el archivo en su totalidad y expliquemos en forma muy global (recuerde que a lo largo de este curso iremos profundizando todos estos conceptos de comunicación con el servidor):

funciones.jsaddEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
var ob;
for(f=1;f<=12;f++)
{
ob=document.getElementById('enlace'+f);
addEvent(ob,'click',presionEnlace,false);
}
}

function presionEnlace(e)
{
if (window.event)
{
window.event.returnValue=false;
var url=window.event.srcElement.getAttribute('href');
cargarHoroscopo(url);
}
else
if (e)
{
e.preventDefault();
var url=e.target.getAttribute('href');
cargarHoroscopo(url);
}
}

var conexion1;
function cargarHoroscopo(url)
{
if(url=='')
{
return;
}
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open("GET", url, true);
conexion1.send(null);
}

function procesarEventos()
{
var detalles = document.getElementById("detalles");
if(conexion1.readyState == 4)
{
detalles.innerHTML = conexion1.responseText;
}
else
{
detalles.innerHTML = 'Cargando...';
}
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}

function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
En este punto si es indispensable haber realizado el curso de DHTML Ya para entender como registramos los eventos para los doce hipervínculos. Recordemos que siempre llamaremos a la función addEvent (que se encuentra codificada en el mismo archivo) para hacer compatible nuestro código con el navegador IE (recordemos que no cumple los estándares referente a eventos).

Lo primero que se ejecuta es la llamada a la función inicializarEventos() inmediatamente luego que la página se a cargado por completo en el navegador:

function inicializarEventos()
{
var ob;
for(f=1;f</strong>
Mediante el vector asociativo $_REQUEST recuperamos el valor del parámetro cod y mediante una serie de if verificamos si almacena el valor 1 procedemos a generar un texto referente al signo Aries, si tiene un 2 generamos un texto referente al signo Tauro y así sucesivamente.

Hay que tener en cuenta que no se estará enviando una página HTML completa, por eso no tiene los elementos Head, Body etc. sino es más bien un archivo de texto que luego será añadido en forma dinámica al div de la página HTML.

Debe quedar claro que los datos se podrían haber rescatado perfectamente de una base de datos, pero por simplicidad hemos dispuesto estos 12 if y generado el texto respectivo. Veremos más adelante problemas que acceden a bases de datos.

Un ejemplo con AJAX.

Un ejemplo con AJAX.

¿Quién está conectado?