Tags:Carregar uma página dentro de uma DIV com ajax!
em 11 de fevereiro de 2010 e possui 2.125 Visualizações
Carregamento bem simples de uma página dentro de uma DIV qualquer usando AJAX
Primeiro criamos o arquivo onde fazemos a solicitação do navegador, para saber se ele suporta ou não “Msxml2.XMLHTTP”
ajax.js
Abraço.
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
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:
<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
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Clientes</title> </head> <body> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </body> </html>Qualquer dúvida deixe um comentário. Registre-se galera, é grátis, post seus códigos
Abraço.
por Maykon
Como fasso para colocar um serto tempo, a carregar a pagina, exemplo de 2 seg ?
29 de maio de 2011