Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Gostaria da ajuda de vocês pra me dizer o que está errado neste código:
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="ajax.js" type="text/javascript" />
<script language="javascript" type="text/javascript">
function caller(n){
switch(n){
case 0: t="pagina1.html"; break;
case 1: t="pagina2.html"; break;
case 2: t="pagina3.html"; break;
case 3: t="pagina4.html"; break;
}
if(navigator.appName == "Microsoft Internet Explorer"){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttp = new XMLHttpRequest();
}
if(xmlHttp.readyState == 4){
document.getElementById('centro').innerHTML = xmlHttp.responseText;
}
xmlHttp.open("GET", t, true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:caller(0)">Página 1</a></li>
<li><a href="javascript:caller(1)">Página 2</a></li>
<li><a href="javascript:caller(2)">Página 3</a></li>
<li><a href="javascript:caller(3)">Página 4</a></li>
</ul>
<br />
<br />
<div id="centro" style="float:left; width:500px; min-height:400px;"></div>
</body>
</html>A idéia é que ao clicar no link, ele carregue a página que foi selecionada, mas ele não faz nada.
Desde já agradeço a atenção!
Talvez um refactory seja necessário... fiz e testei no IE6, Chrome e Firefox
<html>
<head>
<script type="text/javascript">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) {}
}
}
}
function abre( link, event ) if( event ) event.preventDefault();
if( link.rel=='externo' )
return window.open( link.href );
return carrega( link );
}
function carrega( link ) var url = link;
var lugar = 'conteudo';
}
else if( typeof( link )=='object' )
{
var url = link.href;
var lugar = ( link.rel!='' ) ? link.rel: 'conteudo';
}
else
return alert( 'Não suportado' )
var xmlHttp = getHTTPObject();
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
var retorno = xmlHttp.responseText;
document.getElementById( lugar ).innerHTML = retorno;
}
}
xmlHttp.open( 'GET', url, true );
xmlHttp.send( null );
}
function id( el ){
document.getElementById( el );
}
window.onload = function() var links = document.getElementsByTagName('a');
for( var i=0; i<links.length; i++ )
{
links[i].onclick = function( event )
{
abre( this, event );
return false;
}
}
carrega( 'pagina1.html' );
}
</script>
<style type="text/css">
#conteudo {
width: 400px;
border: 1px solid #ccc;
margin-right: 20px;
min-height: 400px;
float: left;
}
#outro_lugar {
width: 200px;
border: 1px solid #ccc;
min-height: 400px;
float: left;
} height: 400px;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="pagina1.html">Página Um</a></li>
<li><a href="pagina2.html" rel="outro_lugar">Página Dois</a></li>
<li><a href="pagina3.html">Página Três</a></li>
<li><a href="pagina4.html">Página Quatro</a></li>
</ul><!-- /menu -->
<div id="conteudo">
</div><!-- /conteudo -->
<div id="outro_lugar">
</div><!-- /outro_lugar -->
<br style="clear: both" />
<a href="[http://www.google.com.br"](http://www.google.com.br) rel="externo">Google</a>
</body>
</html> :lol:Realmente funciona no FF, testei no IE8 e não funcionou.
Vou dar uma analisada no seu código pra ver se consigo modificar algo pra funcionar em todos.
Eu tentei o seguinte aqui:
INDEX.HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Carregando Página em DIV / AJAX</title>
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="instrucao.js"></script>
</head>
<body>
<div id="menu">
<a href="#" onClick="abrirPag('pagina1.html');">Página 1</a><br/>
<a href="#" onClick="abrirPag('pagina2.html');">Página 2</a><br/>
<a href="#" onClick="abrirPag('pagina3.html');">Página 3</a><br/>
<a href="#" onClick="abrirPag('pagina4.html');">Página 4</a><br/>
</div>
<br><br>
<div id="conteudo_mostrar"></div>
</body>
</html>AJAX.JS
function GetXMLHttp() {
if(navigator.appName == "Microsoft Internet Explorer"){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
var xmlRequest = GetXMLHttp();INSTRUCAO.JS
function abrirPag(valor){
var url = valor;
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.open("GET",url,true);
xmlRequest.send(null);
if (xmlRequest.readyState == 1) {
document.getElementById("conteudo_mostrar").innerHTML = "<img src='loader.gif'>";
}
return url;
}
function mudancaEstado(){
if(xmlRequest.readyState == 4){
document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
}
}Com esse meu código, o FF ele substitui normalmente dentro da DIV as paginas quando eu clico nos links da INDEX, mas no IE8 ele só carrega a primeira página que eu clicar e se eu clicar em outro link pra carregar ele não substitui. :S
IE8 é bem ruinzinho ne?! ^_^
se você jogar a metatag, que faz ele emular o IE7, dá certo ?
qnto ao teu código atual, ainda acho que o instanciamento do AJAX está insuficiente.
Adicionei a metatag abaixo pra fazer o teste e continuou sem funcionar:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Testei no IE6 e FF funciona! :)
Mas no IE7 e 8 não! :(
Isso é uma vergonha funcionar no IE6 mas não nos posteriores! :angry:
O meu instanciamento está funcionando perfeitamente do IE6 ao 8 e FF. Agora somente no FF ele consegue substituir a pagina carregada no lugar de outra que ja esteja carregada. Mas nos IE não funciona desta forma, o que seria o meu objetivo!
O instanciamento do objeto AJAX está horrivel.. veja:
vou postar um codigo melhor para isso.