Buscar en este blog

miércoles, 21 de noviembre de 2007

AJAX. ejemplo básico.

Mediante AJAX podemos recargar solo una parte del contenido de un documento html.

Este ejemplo es una versión minimamente modificada de un código que me encontré en internet.
Siento no hacer referencia a ese sitio pero no me acuerdo de la url.
/* codigo javascript */
// Documento JavaScript

// llamamos a que se recarge el contenido del div con ese id_contenedor
// mediante la llamada a la url
function mostrarNuevoContenido(url, id_contenedor) {
var Ajax = new AJAX(url, id_contenedor);
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina (pagina_requerida, id_contenedor)
{
if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1))
document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
}

function AJAX(url, id_contenedor) {
var XMLHttp = false;
if (window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
XMLHttp = new XMLHttpRequest ();
} else if (window.ActiveXObject)
{
// pero si es IE
try
{
XMLHttp = new ActiveXObject ("Msxml2.XMLHTTP");
}
catch (e)
{
// en caso que sea una versión antigua
try
{
XMLHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else
return false;
XMLHttp.onreadystatechange = function ()
{
// función de respuesta
cargarpagina (XMLHttp, id_contenedor);
}
XMLHttp.open ('GET', url, true); // asignamos los métodos open y send
XMLHttp.send (null);
}

/* documento html */

<div style="float: left; width: 175px;">
<a href="javascript: mostrarNuevoContenido('dameContenido.php','contenido');">
mostrar
</a>
</div>
<div id="contenido" style="float: left;">
AJAX mediante objeto javascript
</div>

// La url dameContenido.php podría ser cualquier documento html que contenga el contenido que queremos cargar en el div

1 comentario:

jan dijo...

Buen post, sencillo pero muy util.