Javascript Menu by Deluxe-Menu.com
Algunas veces esto es un slogan o alguna frase célebre, aunque también la mayor parte de las veces simplemente no lo es...
ya conoces Samplx?

SamplxJS, Ajax sin ActiveX simple y elegante

Desde que se escucha hablar de la Web 2.0 (o cómo inflar globos de feria con gas hilarante), se escuchan todos los beneficios de Ajax y las enormes posibilidades que se nos abren ante este "nuevo" descubrimiento.
Todo aquello que antes no se podía hacer (sic), ahora está al alcance de la mano de cualquier desarrollador, tanto novel como veterano, y permítanme que desinfle los globos para poder esbozar alguna que otra sonrisa.

Todas esas cosas excepcionales que supuestamente no se podían hasta la "aparición" de Ajax, se vienen utilizando desde mediados de los 90, lógicamente sin componentes ActiveX e implementando algunos trucos que simplemente realizan el mismo trabajo.

Para el caso de las cargas de contenidos en determinadas partes de nuestras páginas, es algo tan simple cómo reemplazar su contenido actual por otro contenido diferente, hacer este trabajo no tiene más misterio que el de leer el código del objeto que deseamos insertar (a través de innerHTML), y estamparlo directamente en el objeto que deseamos que tenga el antiguo contenido.

Para realizar dicha acción utilizamos nuestra pequeña librería en Javascript SamplxJS, y simplemente llamamos a la función correspondiente ("samplx.pushSome") que sólo contiene dos argumentos.

El primero argumento es el ID del objeto cuyo contenido deseamos que se actualice.

El segundo argumento (o parámetro) es el nombre de la página que deseamos cargar dinámicamente.

Ejemplo:

Tenemos nuestra página HTML con el siguiente código y deseamos que en el contenido central se carguen nuestros artículos dinámicamente.


<html>
<head>
</head>
<body>
<div id="menu">
<a href="articulo1.htm">Articulo 1</a>
</div>
<div id="lateral"></div>
<div id="central"></div>
<div id="pie_pagina"></div>
</body>
</html>

Para lograr el efecto deseado, simplemente agregamos el archivo externo de javascript SamplxJS, y en los enlaces usamos lo siguiente:

<html>
<head>
</head>
<body>
<div id="menu">
<a href="articulo1.htm" onclick="samplx.pushSome('central',this.href);return false;">Articulo 1</a>
</div>
<div id="lateral"></div>
<div id="central"></div>
<div id="pie_pagina"></div>
<script language="javascript" type="text/javascript" src="http://samplx.enterprisedreams.net/js/">
</body>
</html>

Por último, en nuestra página "articulo1.htm" escribimos al final de la misma el siguiente código:

 <script language="javascript">
parent.document.getElementById('central').innerHTML=document.getElementById('central').innerHTML;
</script>

Y ya está, se ha cargado dinámicamente el código que deseábamos en nuestro contenedor, simple no?

© 2007 - Juan C. Barreiro
Web Engineer Developer


Total tiempo OnLine Sitio Web © 2004-2007 - EnterpriseDreams Solutions