miércoles, 7 de enero de 2009

Actualizando divs en AJAX

Acá tenemos un útil código para poder actualizar paginas web adentro de los objetos div sin necesidad de ocupar frames muy útil pues solo recargamos una parte de la pagina con la información necesaria.

function generaPeticion(url) {
// objecto nativo
if (window.ActiveXObject)
{
obj = new ActiveXObject("Microsoft.XMLHTTP");
if (obj) {
obj.onreadystatechange = procesaRespuesta;
obj.open("GET", url, true);
obj.send();
}
}

else if (window.XMLHttpRequest)
{
// Obtener un nuevo objeto
obj = new XMLHttpRequest();
// Indicar la funcion de retorno
obj.onreadystatechange = procesaRespuesta;
// Método GET con la url; "true" para asincronica
obj.open("GET", url, true);
// null for GET with native object
obj.send(null);
// IE/Windows ActiveX object
}
else
{
alert("Su navegador no soporta AJAX");
}
}

function procesaRespuesta() {

if (obj.readyState == 4) {
/*if (obj.status == 200) {
*/ // Actualiza el contenido apoyándose en el método innerHTML
document.getElementById('cuerpo').innerHTML = obj.responseText;
/* } else {
alert("Ha ocurrido un problema en el retorno de datos");
}*/
}
}

Este sera el archivo .js a llamar des la pagina web.

Desde la pagina web solo aplicamos un evento OnClick para mandar a llamar la función generaPeticion('ejemplo.html'). Aquí cargaremos cualquier pagina web solo con su dirección es casi como utilizar un include de PHP.

por ultimo creamos en la pagina web un div con el ID='cuerpo'.

Muy bien eso es todo prueben y digan si les gusto estoy abierto a cualquier pregunta.

No hay comentarios.: