La cosa che mi sono chiesta è stata: "Ma possibile che siti e portali che devono rispondere a centinaia di risposte simultanee devono,per ogni richiesta,ricaricare tutti i componenti fissi dell'interfaccia??? Perchè non fare in modo che gli elementi che non variano vengano caricati una volta sola piuttosto che ricaricarli ogni volta? "
Altra considerazione che ho fatto:
"Se non utilizzo frame o una loro simulaziome,dovrò riscrivere per ogni pagina web del mio sito sia header che footer,facendo praticamente copia e incolla di questi ultimi"
Che ne pensate ? Sono due fattori trascurabili ???
1) La maggior parte dei componenti più pesanti vengono memorizzati nella cache, quindi non pensare che ogni elemento venga riscaricato dal server ad ogni richista.
2) è una buona idea, il cui prezzo è rendere il sito pressochè inutilizzabile per tutti coloro che non hanno javascript attivato... salvo tu non crei il codice alternativo dentro i tags noscript, ma a questo punto ogni pagina peserà il doppio , e non son certo che in fin dei conti avresti un guadagno
3) i frame sono il male, evitali finchè puoi :)
4) puoi sempre crearti una sorta di template in php, che faccia gli include in automatico per ogni pagina, senza dover fare copia e incolla di header e footer per tutte le pagine
5) no, la tua idea è già stata proposta ed elaborata: sotto ti ho scritto sinteticamente un codice di esempio funzionante. Occhio che le pagine foo.htm, home.htm e via dicendo dovranno contenere non l'html di tutta la pagina, ma solo quello che conterrebbero dentro al div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
if ( typeof XMLHttpRequest == "undefined" ){
XMLHttpRequest = function(){
return new ActiveXObject(
navigator.userAgent.indexOf("MSIE 5") >= 0 ?
"Microsoft.XMLHTTP" : "Msxml2.XMLHTTP"
);
}
}
function req(a){
var txt = new XMLHttpRequest();
txt.open("GET", a, true);
txt.onreadystatechange = function(){
if ( txt.readyState == 4 ) {
document.getElementById("content").innerHTML = txt.responseText;
txt = null;
}
}
txt.send();
return false;
}
</script>
<style>
li{
display:inline;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="#" onclick="req('home.htm');">Home</a></li>
<li><a href="#" onclick="req('foo.htm');">foo</a></li>
<li><a href="#" onclick="req('bar.htm');">bar</a></li>
<li><a href="#" onclick="req('foo2.htm');">foo2</a></li>
<li><a href="#" onclick="req('bar2.htm');">bar2</a></li>
<li><a href="#" onclick="req('contacts.htm');">Contacts</a></li>
</ul>
</div>
<div id="content">Benvenuto</div>
<div id="footer"> copyright blablabla</div>
</body>
</html>
Ovviamente sul server devi avere le pagine foo.htm e cosi via