Anónimo
Contenido Central dinámico
Mi problema es que con struts y jsp puedo usar Tiles para decirle a mi web que me mantenga el header, footer y demás fijo y que me cambie sólo el centro de mi página según le doy a los botones del menu.
Mi pregunta es sencilla, ¿cómo se hace esto en PHP?. Es decir, como hago con PHP que me mantenga por ejemplo la cabecera siempre la misma (sin que la tenga que recargar) y todo el contenido lo vaya cargando en otro DIV, por ejemplo un div central.
Simplemente me haría falta un empujoncito de como hacerlo y luego pues ya es ir mirando por internet, pero he buscado y no encuentro como hacerlo.
Con AJAX se que es epuede cargar un contenido de lo que sea en un div y luego mostrar ese div, ¿pero no hay una forma mejor que no sea con AJAX?
Mi pregunta es sencilla, ¿cómo se hace esto en PHP?. Es decir, como hago con PHP que me mantenga por ejemplo la cabecera siempre la misma (sin que la tenga que recargar) y todo el contenido lo vaya cargando en otro DIV, por ejemplo un div central.
Simplemente me haría falta un empujoncito de como hacerlo y luego pues ya es ir mirando por internet, pero he buscado y no encuentro como hacerlo.
Con AJAX se que es epuede cargar un contenido de lo que sea en un div y luego mostrar ese div, ¿pero no hay una forma mejor que no sea con AJAX?
1 Respuesta
Respuesta de lamek
1
Pues la forma más sencilla y fácil es con ajax.
Mira, un ejemplo:
Y el div en el que se cargara el contenido tiene que ser:
<div id="ContTabul"></div>
Ahi se cargara el contenido, y en los enlaces o botones, puedes hacer esto:
<a href="javascript:void(0)" onclick="ObtenerDatos('WEB.html','ContTabul');"
>Internet</a>
Así es muy sencillo hacerlo.
Mira, un ejemplo:
<script>
var peticion = false;
var cargador = false;
if (window.XMLHttpRequest) {
peticion = new XMLHttpRequest();
} else if (window.ActiveXObject) {
peticion = new ActiveXObject("Microsoft.XMLHTTP");
}
function ObtenerDatos(datos,divID) {
String.prototype.tratarResponseText=function(){
var pat=/<script[^>]*>([\S\s]*?)<\/script[^>]*>/ig;
var pat2=/\bsrc=[^>\s]+\b/g;
var elementos = this.match(pat) || [];
for(i=0;i<elementos.length;i++) {
var nuevoScript = document.createElement('script');
nuevoScript.type = 'text/javascript';
var tienesrc=elementos[i].match(pat2) || [];
if(tienesrc.length){
nuevoScript.src=tienesrc[0].split("'").join('').split('"').join('').split('src=').join('').split(' ').join('');
}else{
var elemento = elementos[i].replace(pat,'$1','');
nuevoScript.text = elemento;
}
document.getElementsByTagName('body')[0].appendChild(nuevoScript);
}
return this.replace(pat,'');
}
if(peticion) {
var obj = document.getElementById(divID);
peticion.open("GET", datos);
peticion.onloadstart = function(){
document.getElementById(divID).innerHTML = "<center style='margin-top: 30px;'><br /><img src=\"images/8-0.gif\" /></center>";
}
peticion.onreadystatechange = function() {
if (peticion.readyState == 4) {
obj.innerHTML = peticion.responseText.tratarResponseText();
}
}
peticion.send(null);
}</script>Y el div en el que se cargara el contenido tiene que ser:
<div id="ContTabul"></div>
Ahi se cargara el contenido, y en los enlaces o botones, puedes hacer esto:
<a href="javascript:void(0)" onclick="ObtenerDatos('WEB.html','ContTabul');"
>Internet</a>
Así es muy sencillo hacerlo.