Carregando conteudo com ajax, trocando URL
Opa!
Fiz esse script tem um tempo, porém ainda não tinha postado aqui no blog.
Trabalhando com âncoras, resolvi a questão de termos links para ‘páginas internas’ de um site, carregado com ajax.
<html>
<head>
<script type="text/javascript">
function id( el ){
return document.getElementById( el );
}
function pega_arq( url ){
var file = url.split('#');
return ( file[1] ) ? file[1]+'.html' : 'home.html';
}
function getHTTPObject(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
for(var i = 0; i < prefixes.length; i++){
try {
return new ActiveXObject(prefixes[i] + ".XMLHTTP");
} catch (e) {}
}
}
}
var xmlHttp = getHTTPObject();
function abre( arq ){
xmlHttp.open("GET", arq,true);
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
id('content').innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send( null );
}
window.onload = function(){
var as = document.getElementsByTagName('a');
for( var i=0; i<as.length; i++ ){
as[i].onclick = function(){
abre( pega_arq( this.href ) );
}
}
abre( pega_arq( document.location.href ) );
}
</script>
</head>
<body>
<a href="#contato">Contato</a>
<a href="#missao-valores">Missão, Valores</a>
<div id="content">
</div><!-- /content -->
</body>
</html>