cargar 1 solo div sin regargar toda la pagina

rutanga · #1 (**permalink**) 26/01/2011, 13:22

Hola a todos..

tengo 3 div, y necesito recargar solo 1. busque en el foro de php
pero decian que en ajax podia encontrar la solucion
algun me podria dar un ejemplo de ocmo se hace esto

saludos y muchas gracias

luisal2908 · #2 (**permalink**) 28/01/2011, 10:22

Hola,
Vamos a empezar con el archivo index.html que contiene las 3 capas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/ajax.js"></script>
<style type="text/css">
#contenedor{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
width:530px;
margin:auto;
}
#cabecera{
width:528px;
border:#CCCCCC 1px solid;
margin:0 0 5px 0;
}
#principal{
width:528px;
border:#0000FF 1px solid;
height:150px;
margin:0 0 5px 0;
}
#foot{
width:530px;
border-top:#999999 1px solid;
}
</style>
</head>

<body>
<div id="contenedor">
<div id="cabecera">Este es el contenido de la cabecera de tu pagina donde incluyo los enlaces que cargarán el contenido en capa "principal"<br/>
<ul>
<li><a href="#" onClick="cargarContenido('contenido1.html','princi pal')">Cargar contenido1</a></li>
<li><a href="#" onClick="cargarContenido('contenido2.html','princi pal')">Cargar contenido2</a></li>
<li><a href="#" onClick="cargarContenido('contenido3.html','princi pal')">Cargar contenido3</a></li>

</ul>
</div>
<div id="principal">En esta div aparece el contenido que cambiará sin recargar toda la pagina</div>
<div id="foot">Este es el pie de tu página</div>
</div>
</body>
</html>

Segundo, debes tener en una carpeta llamada js el archivo ajax qye se encargará de cargar el contenido en la capa principal sin recargar la pagina

Archivo ajax.js

// Creación del objeto XMLHttpRequest.
function nuevoAjax(){

try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

// Función para cargar los contenidos de forma asíncrona.
// + pagina: fichero cuyo contenido queremos cargar.
// + identidicador del elemento en el que se cargará el nuevo contenido.
function cargarContenido(pagina,destino){
var contenedor;
var ajax;

contenedor = document.getElementById(destino);
ajax = nuevoAjax();
ajax.open("GET", pagina, true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText;
}
}
ajax.send(null);
}

la funcion cargarContenido tiene como parémetros: 'pagina' que es el contenido que va a cargar en la capa 'principal' y el parámetro 'destino' que es el nombre de la capa a donde voy a cargar el contenido (contenido1.html, contenido2.html y contenido3.html).

Guardas en un archivo llamado contenido1.html el siguiente código:

<div style="color:#0066FF">Este es el contenido de la pagina contenido1 que debe aparecer en la parte central de la pagina sin recargar toda la página</div>

Guardas en un archivo llamado contenido2.html el siguiente código:

<div style="color:#CC3366">Este es el contenido de la pagina contenido2 que se carga en la capa "principal" sin recargar toda la página</div>

Guardas en un archivo llamado contenido3.html el siguiente código:

<div style="color:#FFFFFF; background-color:#CCCCCC">Este es el contenido de la pagina contenido3 que se carga en la capa "principal" sin recargar toda la página</div>

El ejemplo es sencillo pero espero te sirva.

Saludos,
Luis

cabeto_1972 · #3 (**permalink**) 01/04/2017, 19:58

Excelente y muy sencillo!