Boa noite, Encontrei esse script em um site que mostra como usar Ajax para carregar uma página dentro de um div dinamicamente: function abrirPag(valor){
var url = valor;
xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);
if (xmlRequest.readyState == 1) {
document.getElementById("conteudo_mostrar").innerHTML = "<img src='images/up.gif'>";
}
return url;
}
function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
}
}
onde xmlRequest é definido em outro arquivo chamado ajax.js:
function GetXMLHttp() {
if(navigator.appName == "Microsoft Internet Explorer") {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
var xmlRequest = GetXMLHttp();
Isso funciona perfeitamente. O arquivo é carregado a partir de OnClick():
<a href="#" onclick="abrirPag('Conteudo2.html');">Conteudo2</a>
<div id="conteudo_mostrar"></div>
Porém, eu tentei incrementar a função para que fosse possível rodar a página em um div definido na chamada da função:
function abrirPag(valor, target){
var url = valor;
xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);
if (xmlRequest.readyState == 1) {
document.getElementById(target).innerHTML = "<img src='images/up.gif'>";
}
return url;
}
function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById(target).innerHTML = xmlRequest.responseText;
}
}
E aí eu chamo usando:
<a href="#" onclick="abrirPag('Conteudo2.html', 'historico');">Historico</a>
<div id="historico"></div> Só que nessa hora, ele mostra apenas a imagem <img src='images/up.gif'>, e não carrega a página nunca. O que eu estou fazendo de errado?