Passeios
377 palavras
2 páginas
Carregamento simples de uma página dentro de uma DIV usando AJAXPrimeiro criamos o arquivo onde fazemos a solicitação do browser, para saber se o navegador suporta ou não “Msxml2.XMLHTTP”
ajax.js
CODE
function GetXMLHttp() { if(navigator.appName == "Microsoft Internet Explorer") { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { xmlHttp = new XMLHttpRequest(); } return xmlHttp;
}
var xmlRequest = GetXMLHttp();
No arquivo “instrucao.js” terá as informações necessárias para fazer a ação
instrucao.js
CODE
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='loader.gif'>"; }
return url;
}
function mudancaEstado(){ if (xmlRequest.readyState == 4){ document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText; }
}
Criamos a página Index.html para recerber as informações
Index.html
CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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('Conteudo.html');">Clientes</a></div> <br><br> <div id="conteudo_mostrar"></div>
</body>
</html>
E finalmente criamos a página Conteudo.html que será exibida dentro da DIV “conteudo_mostrar”
Conteudo.html
CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clientes</title>