16

Carregar uma Página dentro de uma DIV com AJAX Por Ted k' 21 October 2008 as 1:50 pm

Carregamento simples de uma página dentro de uma DIV usando AJAX
Primeiro criamos o arquivo onde fazemos a solicitação do browser, para saber se o navegador suporta ou não “Msxml2.XMLHTTP”

ajax.js

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

Index.html

<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. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>
</html>

Qualquer dúvida postem!!
Abraços!!!!


Posts anteriores
Proximos posts
Enviar comentário

16 comentários : “ Carregar uma Página dentro de uma DIV com AJAX ”

  1. 1
    Peterson : 27 October 2008 as 11:11 am

    òtimo COnteudo

  2. 2
    Ted k' : 27 October 2008 as 5:53 pm

    Obrigado amigo, brevemente irei colocar funções usando jQuery para facilitar mais!

  3. 3
    Douglas : 30 October 2008 as 2:30 pm

    Cara Parabéns!… depois de muito procurar sobre o assunto, depois de muitos testes com varios códigos… finalmente achei este ques estava muito bem explicado…
    vlw

  4. 4
    Ted k' : 30 October 2008 as 4:39 pm

    Obrigado Douglas, mais a idéia é que seja fácil, programação não pode ser complicado, ficou feliz por ter encontrado o que procurava.

  5. 5
    Douglas : 03 November 2008 as 8:05 am

    Me surgiu apenas uma dúvida, eu coloquei mais um link que abrirá outra página na mesma div “conteudo_mostrar”, por exemplo: link1 | link2… quando eu clico no link1 funciona corretamente… mas quando eu estou no link1 e clico no link2 ele não muda a div ou pelo que eu entendi parece que uma camada fica por cima da outra… teria alguma forma de deixar uma camada do link1 ficar invisivel para aparecer a outra camada do link2 ?

  6. 6
    Douglas : 03 November 2008 as 8:38 am

    Ah esqueci de avisar que uso o internet explorer 6.0 não sei se isso pode influênciar em algo…

  7. 7
    Marcelo Coelho : 04 November 2008 as 9:39 am

    Bom exemplo, mas estou procurando como carregar JavaScript.
    Você teria algum exemplo sobre isso?

  8. 8
    Raphael Maquiné Marinho : 26 November 2008 as 11:32 am

    como faço isso com o prototype?

  9. 9
    Ted k' : 26 November 2008 as 11:39 am

    Prototype nunca usei, nunca tive experiências, mais esse exemplo que fiz, caso queira usar junto as suas aplicaçãoes em prototype, não terá dificuldades!

  10. 10
    Sergio : 07 December 2008 as 9:24 am

    Ted, fiz uma adaptacao do seu codigo. Tenho um menu que chama paginas php e carrega numa div de nome conteudo. No FireFox funciona perfeitamente, so que quando tento executar no IE7 não funciona legal. é como se o IE7 ficasse preso no if que tem o gif “carregando…” e nao sai dai.

    Parabens pelo codigo.

  11. 11
    Ted k' : 07 December 2008 as 7:05 pm

    Sergio, poderia colocar uma página hospedada com seu código para eu testar no IE7?

  12. 12
    Adão : 09 December 2008 as 11:48 am

    Estou com a mesma duvida do Douglas, alguma sugestão para nós ?

    “Me surgiu apenas uma dúvida, eu coloquei mais um link que abrirá outra página na mesma div “conteudo_mostrar”, por exemplo: link1 | link2… quando eu clico no link1 funciona corretamente… mas quando eu estou no link1 e clico no link2 ele não muda a div ou pelo que eu entendi parece que uma camada fica por cima da outra… teria alguma forma de deixar uma camada do link1 ficar invisivel para aparecer a outra camada do link2 ?”

  13. 13
    Ted k' : 09 December 2008 as 11:58 am

    Mais o seu caso é diferente, o que vc quer pode ser com javascript e css que é mostrar e ocultar divs

  14. 14
    Adão : 09 December 2008 as 4:59 pm

    Obg Ted !

  15. 15
    Kleber : 09 December 2008 as 6:13 pm

    Sergio, você poderia informar a adaptação que fez no codigo? Pois estou tendo problema no IE.
    Grato.

  16. 16
    Ted k' : 10 December 2008 as 10:47 am

    troquem a ordem dessa:
    xmlRequest.onreadystatechange = mudancaEstado;
    xmlRequest.open(”GET”,url,true);
    xmlRequest.send(null);

    para essa:
    xmlRequest.open(”GET”,url,true);
    xmlRequest.onreadystatechange = mudancaEstado;
    xmlRequest.send(null);

Envie um comentário