Actualizar una parte de la página con AJAX.

El siguiente ejemplo esta compuesto por los archivos mencionados a continuación:

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

Página1.html.

<html>
<head>
<title>
Ejemplo</title>
<script
src="funciones.js" language="JavaScript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1
>Mensajes de Acuerdo al link</h1>
<div
id="menu">
<p>
<a id="enlace1" href="pagina1.php?cod=1">U.Católica</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">U.Chile</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Colo Colo</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cobreloa</a></p>
</div>
<div
id="detalles">Seleccione su equipo.</div>
</body>
</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;
}

Funciones.js.

addEvent(window,’load‘,inicializarEventos,false);

function inicializarEventos()
{

var ob;
for(f=1;f<=4;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);
cargarEquipo(url);
}

else
if (e)
{
e.preventDefault();

var url=e.target.getAttribute(href);
cargarEquipo(url);
}
}

var conexion1;
function cargarEquipo(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;
}

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<=4;f++)
{
ob=document.getElementById(‘enlace’+f);
addEvent(ob,’click’,presionEnlace,false);
}
}

En esta función registramos el evento clic para los  cuatro enlaces de los equipos de futbol, luego dentro de un for rescatamos la referencia a cada enlace y registramos el evento clic indicando que se debe llamar a la función presionEnlace.

La función presión enlace:

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’);
cargarEquipo(url);
}
}

Primero detecta que navegador se trata y procede a desactivar el evento por defecto para el hipervínculo, luego llama a la función cargarEquipo pasándole como referencia la url que contiene el hipervínculo.

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

Previo a la definición de esta función definimos una variable global llamada conexion1 que será utilizada en esta y la siguiente función.

La función recibe como parámetro la url a la que debe hacer la petición de datos. Lo primero que verificamos que el parámetro no llegue vacío, en caso de estar vacío salimos con el comando return.

El siguiente paso es llamar a la función crearXMLHttpRequest que crea y retorna un objeto de la clase XMLHttpRequest(este objeto nos permite comunicarnos con el servidor de forma asincrónica):

conexion1=crearXMLHttpRequest()

Esta función tiene por objetivo retornar un objeto de la clase XMLHttpRequest.

La creación del objeto de la clase XMLHttpRequest se implementa separada en otra función porque depende del navegador que se trate la sintaxis cambia:

function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}

En la función cargarEquipo y veamos que hacemos con el objeto de la clase XMLHttpRequest que acabamos de crear:

conexion1=crearXMLHttpRequest()
conexion1.onreadystatechange = procesarEventos;
conexion1.open("GET", url, true);
conexion1.send(null);

La propiedad onreadystatechange se inicializa con la referencia de una función que será la encargada de procesar los datos enviados por el servidor.

Seguidamente llamamos al método open que tiene tres parámetros:

  • Primero el método de envío de datos (GET o POST) Recordemos que si los datos se envían como parámetros (como es nuestro ejemplo) debemos indicar que utilizamos el método GET
  • El segundo parámetro es la url y la página que procesará los datos que le enviemos.
  • El tercer parámetro indicamos si se procesarán los datos de forma asíncrona (true) o síncrona (false)

Por último nos falta llamar al método send para que comience el proceso:

conexion1.send(null);

La función procesarEventos que se ejecuta cada vez que el objeto conexion1 de la clase XMLHttpRequest cambia de estado. Tengamos en cuenta que los estados posibles de este objeto son:

  • 0 No inicializado.
  • 1 Cargando.
  • 2 Cargado.
  • 3 Interactivo.
  • 4 Completado.

Para conocer el estado del objeto debemos acceder a la propiedad readyState que almacena alguno de los cinco valores que enunciamos.

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

Página1.php.

Pero todavía nos queda la página que contiene el programa en el servidor, en nuestro caso empleamos el lenguaje PHP (tener en cuenta que podemos emplear otro lenguaje de servidor para esto).

Veamos el código de esta página:

<?php

if ($_REQUEST['cod']==1)
echo "<strong>U. Católica:</strong> La fecha oficial de fundación es el 21 de abril de 1937, como culminación de las inquietudes deportivas que se registraban en algunas facultades de la Casa de Estudios.
El himno del club, basado en una melodía que entonaba la hinchada del Manchester United inglés, fue escrito por Alberto Buccicardi y Charles Bown, quienes jugaron por el equipo en Primera División y –además- oficiaron de redactores en la prestigiosa y desaparecida revista Estadio.
";
if ($_REQUEST['cod']==2)
echo "<strong>U. Chile:</strong>Su fecha de fundación fue notariada el 29 de octubre de 1928. Fue el punto cúlmine de la unión de clubes estudiantiles tales como el Universitario de Fútbol, formado por alumnos del INBA y de la U, y el CD Universitario.
El equipo azul estuvo 25 años sin celebrar un campeonato nacional –incluyendo una estadía en Segunda División-. Dicha sequía finalizó en 1994, iniciando en los últimos ocho años una racha que considera cuatro títulos nacionales, más una semifinal de Copa Libertadores (1996).
";
if ($_REQUEST['cod']==3)
echo "<strong>Colo Colo:</strong>Fundado el 19 de abril de 1925 por un grupo de disidentes –liderados por David Arellano- del club Magallanes, que proponía una mayor profesionalización del fútbol en la institución carabelera.
Denominado como el equipo más popular del país, su palmarés contabiliza 24 campeonatos nacionales, una Copa Libertadores (1991), una Recopa Sudamericana (1992) y una Copa Interamericana (1992).
";
if ($_REQUEST['cod']==4)
echo "<strong>Cobreloa:</strong>Fundado el 7 de enero de 1977, teniendo como base el club Deportes Loa. Sólo ese año estuvo en Segunda División, ya que por vía de la Liguilla de Promoción ascendió a Primera, de la que fue campeón por primera vez sólo tres años después, teniendo en la víspera (1978 y 1979) sendos subcampeonatos.
Este destacable registro en sus inicios se condimentó notablemente con las dos finales en Copa Libertadores (1981 y 1982), en las que no pudo ceñirse el título.
";

?>

About these ads

2 comentarios en “Actualizar una parte de la página con AJAX.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s