Agência OFF, desenvolvimento de soluções web para as Agências Digitais
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!!!!
Agência OFF, desenvolvimento de soluções web para as Agências Digitais
parabens pelo artigo..
so funciona no internet explorer e nos outros navegadores?
Funcionam em outros tbm amigo marcos, existe algum problema em outros navegados, se existir posta æ, esse script está meio antigo, preciso até da ajuda de vocês para atualiza-lo!
Ola Ted k,
Parabens pelo artigo, aqui funcionou perfeitamente, mas queria saber como eu faço pra funcionar a ação do onclick em um botao no flash.
Ja tentei essse metodo aqui:
on(press) {
getURL(“javascript:abrirPag(‘conteudo.html’)”);
}
A unica coisa que faz eh abrir em uma nova janela e no browser aparece apenas a palavra “conteudo.html”
Tens alguma solucao pra isso??
Como não trabalho com flash diretamente, desconheço a função, mais me diga qual versão do action.. pelo que estou vendo me parece ser a versão 2.0, irei procurar saber para ti e informo aqui mesmo..
isso mesmo ted’k eh o as2…
grato pela atenção
Cara realmente muito bom seu tutorial, se possível, gostaria que me ajudasse em 2 problemas que surgiram:
1º- os caracteres acentuados na página que carrega dentro da DIV aparecem com caracteres diferentes tanto Mozila quanto no Explorer
2º- como que faz para a página já carregar com o Home aberto por exemplo, para não ficar com um espaço em branco no local da DIV.
Muito grato por sua atenção…
bom quanto aos caracteres já resolvi, havia me esquecido que para evitar confitos com AJAX o ideal é salvar com codificação utf-8, para quem não souber vai ai tbm a dica, quando for salvar o arquivo que será carregado na DIV, altere a codificação de ANSI p/ utf-8, agora para já carregar a página ao iniciar com a DIV já carregada e não em branco ainda estou tentando….
cara muito bom esse artigo porem to com um poblema com html funciona legal mais em asp ja da erro
Tipo de erro:
Active Server Pages, ASP 0139 (0×80004005)
Uma marca de objeto não pode ser colocada dentro de outra marca de objeto.
como solucionar esse erro???
Melhor solução é você enviar para o fórum do iMasters:
http://forum.imasters.uol.com.br/index.php?/forum/2-asp/
Lá é melhor para te auxiliar!
Ted, seu script é excelente, mas tenho uma dúvida: se eu tenho uma página com um menu como o abaixo:
Item 1
Item 2
Item 3
Item 4
Cada item destes sendo uma página a ser aberta na div “conteúdo_mostrar”, e caso eu precise passar para alguém um link com a página principal (Index.html), e o “Item 3″, por exemplo, já aberto na div “conteudo_mostrar”, quais os parâmetros que devo utilizar para atingir tal objetivo?
Estou tendo uma certa dificuldade com isso.
Obrigado!
C.E.L.
Salve amigos. Eu uso outra função funciona parcialmente, acontece o seguinte: Tenho um menu em flash e abaixo uma div conteúdo onde abrem as páginas chamadas, porém uma destas páginas tem uma galeria de fotos jquery que não funciona de maneira alguma quando a página é chamada pelo ajax. OBS Ela só funciona se eu der um refresh somente na div e é ai que esta o problema o código que uso carrega a página sem dar refresh na página toda.. Segue a função e o linlk do botão em flash.
function abrirPag(url){
//Obtém o objeto HTML
objetoHTML=document.getElementById(“conteudo”);
//Exibe o loader
objetoHTML.innerHTML=”";
try{
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(ee){
try{
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
}catch(e){
try{
xmlhttp = new XMLHttpRequest();
}catch(E){
xmlhttp = false;
}
}
}
xmlhttp.open(“GET”,url);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4){
retorno=unescape(xmlhttp.responseText.replace(/\+/g,” “));
objetoHTML.innerHTML=retorno;
}
}
xmlhttp.send(null);
};
No botão flash eu coloco:
on(release){
getURL(‘javascript:abrirPag(“produtos.php”);’);
}
Não esta rodando no IE7…oq devo fazer
aki não funcionou nem no internet nem no ff, clico em clientes e não acontece nada estou salvando tudo certo, o que sera?
Cara, aqui nao tava funcionando no IE tambem, mas arrumei: tenta arrumar para permitir item bloqueado, pode ser que o IE ta bloqueando o conteúdo!!
olá, mto bom o artigo, funciona perfeitamente mas só estou com um problema.
estou chamando uma página que tem um formulário, mas nao está carregando.
fazendo uns testes, removi a tag e carregou a pagina e qdo coloco a tag novamente nao carrega.
pode me ajudar ?
obrigado
Cara esse exemplo Funciona perfeitamente mas gostaria de saber como faz para carregar duas divs com paginas diferentes, pois os meus testes que fiz ele só carrega uma delas.
Ela não carrega acentos, como eu corrijo esse problema ?
pro carinha que queria carregar a div assim que a página carregar.. aí vai o cód…
abrirPag(‘Conteudo.html’);
e eu tbm estou com um problema…
quero abrir uma página que está em um servidor web que não é o meu, e qdo eu substituo o nome da pág “Conteudo.html” pela URL.. não funciona…
alguém sabe como me ajudar?
abraço.
muito bom ,mas eu gostaria de au carregar a index que a home page ja estivese aberta ,se alguem puder postar essa parte do codigo fico grato
Velho gostei mt da função
+ cmo eupoderia usála nomeando a div a ser usada diretamente no link tipo
cmo eu posso fazer isso???? pq eu uso site q usa banco de dados e talz uso FORMs dentre outras coisas preciso q o ajax abra em várias divs por isso eu faço essa pergunta cmo eu posso faze-lo!?????
Oi Ted, parabens pelo tutorial.
No entato não funcionou no IE, sendo q nos outrso 2 FF Crome funciomou perfeitamente, vc sabe me dizer como fazer funcionar no IE?
Detalhes dos erros da página da Web
Mensagem: Acesso negado.
Linha: 6
Caractere: 4
Código: 0
URI: file:///C:/Documents%20and%20Settings/Mario/Meus%20documentos/Trabalhos_site/carregaga_pag/instrucao.js
Mensagem: Acesso negado.
Linha: 6
Caractere: 4
Código: 0
URI: file:///C:/Documents%20and%20Settings/Mario/Meus%20documentos/Trabalhos_site/carregaga_pag/instrucao.js
Muito bom o artigo. Vou utilizar num aplicativo que estou desenvolvendo!
Comigo funcionou perfeitamente tanto no IE quanto no Google Chrome. Mas me deparei com um problema. os botões voltar e avançar do navegador não funcionam para div. Para o botão voltar ele vai para pagina anterior e para o botão avançar ele passa para a pagina posterior. Será que existe alguma solução?
Eu gistaria que uma div atualizasse de 15 em 15 segundos, tem como com o AJAX?
Obrigado
Usa o setTimeout() e coloca a função dentro dele.
Oie,
to tendo o seguinte problema, na pagina q eu abro dentro da div não funciona nenhum js, tenho alguns efeitos com jQuery, se coloco na principal funciona normalmente.
vc está chamando um javascript dentro do outro, assim não irá funcionar, procura na internet, algumas pessoas já conseguiram “resolver” esse tipo de caso
Já tenho uma página conteudo pronta, quando clico para executar o Ajax, ou seja, chamar a outra página, este conteudo fica por cima da página atual…
porque…
Boa noite TedK, como faço para que o javascript dentro da página que abre na div, funcione?
Obrigado.
Como faço para que o qdo abrisse o conteúdo abrisse também um flash? Enra o texto mas não entra a animação do flash.
Vlw
Luciana – Não abre um javascript dentro de outro, mais você pode tentar usar o SWFObject, não tenho certeza de que vai funcionar!
Tenho um site assim porem não consigo passar os valores de um formulário para outra página Ex. pagina contato está abrido com ajax dai tem um formulário quando clico em enviar a proxima pagina que trata os dados pra enviar por email não recebe os valores dos campos.
Essa próxima pagina que recebe os dados está com ajax também?
Olá,
Estou com um problema relacionado a este post.
O meu está acontecendo o seguinte:
Depois de inserir, alterar ou deletar ao do banco ele é redirecionado para uma página, exemplo “noticias.php”. Mas quando ela é carregada o dado inserido ou alterado não aparece, sendo preciso carregar a página novamente…
Preciso fazer uma função para carregar os dados de dentro da , assim:
xmlRequest.onreadystatechange = function(){
id(“conteudo”).innerHTML = xmlRequest.responseText;
//colocar aqui a função que carrega a página…
}
Eae, Utilizei o scritp e funciona super bem, so que agora eu precisava dar um submit dentro da div “conteudo_mostrar”, e so dar refresh nela, alguem teria alguma ideia de como fazer????
Por favor, alguem sabe algum tipo de código que (seja para link, seja para botão) abra um determinado código (um embed de vídeo) em uma página semelhante a de popup? O código que procuro gera uma página com a url do site/página visitada, onde, invez de mostrar o conteúdo da página em questão, exibe o conteúdo do código que foi colocado dentro do comando se tornando uma espécie de popup. Procuro esse código para dificultar o uso da url de páginas com embed de vídeos.
0)
{
var ruta=document.botoes.codigo.value;
var ancho_v=500
var alto_v=500
ventana=”toolbar=yes, location=yes, directories=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes,top=100,left=100, width=”+ancho_v+”, height=”+alto_v
msg=open (“”, “NewWindow”, ventana)
msg.document.write (“”);
msg.document.write (ruta,”");
}
else alert(‘Insira o código para ter o que testar!’)
}
//–>
Esse foi o código que consegui (vc coloca código HTML dentro da caixa de texto e clica no botão testar, ele abre uma janela com o mesmo url da página com o conteúdo [não em códigos] gerado pelos códigos), no entanto procuro algo que possa ser colocado em um link: a href=”/” onclick=”javascript”… ou algo do tipo.
Se alguem souber de um código semelhante, me informe pelo e-mail: redecerebral@yahoo.com.br
Obrigado!
Olá Ted k’ gostaria do codigo no para carregar uma página automatico ao abrir o site! Obrigado e aguardo respostas.
Viva, 100% ok!
Abrir página junto com o site:
—–
Não está funcionando no IE8, alguém que conseguiu pode me informar a solução? zampavix2@gmail.com
Valeu…
Ops… não postei o código
body onload=”abrirPag(‘principal.htm’)”
AI AQUI TA DANDO REFRESH NA PAGINA TEM COMO FAZER PARA NAO DAR REFRESH?
para funcionar nos navegadores IE deve ser acrescentado isso na condição de estatos 1tambem “xmlRequest.onreadystatechange = mudancaEstado;”:
Ex:
if (xmlRequest.readyState == 1) {
document.getElementById(“palco”).innerHTML = “”;
xmlRequest.onreadystatechange = mudancaEstado;
}
E se na div index.html eu tiver textfield e eu tiver que passar os que foi digitado no textfield para a div conteudo. Como eu faço isso?
ola e para usar em links dinamicos? por exemplo: tenho uma pagina chamada “produtos_cat.php” e ela receberia os dados com a opção selecionada…uma especie de get ou post..mas não consigo por este arquivo em java script…
abraços
Galeeera, o script acima está funcionando corretamente no IE9 / Mozilla Firefox 4.0 / Google Chrome.
Detalhes importantes na hora de testar o script.
- Mozilla Firefox: Funcionando corretamente e teste pode ser feito off-line
- Internet Explorer 9: É necessário “permitir conteudo bloqueado” (ajax) para poder o ajax ser interpretado junto com o Javasript.
- Google Chrome: O teste so será efetuado se o script estiver hospedando na web, ou seja, teste on-line. Teste off-line não funcionará.
Sendo asssim, ficam as dicas.
Abraços.
Em breve: http://www.tiinfonews.webs.com/
TI INFO NEWS – O SEU PORTAL SOBRE TECNOLOGIA
olá… venho tentando fazer esse código rodar no IE8 e não estou conseguindo… ele funciona muito bem, porém quando clico em outro link ele não abre. Será que alguém poderia me ajudar.
Obrigada
ola amigo
parabens pelo artigo… sou leigo… em java
porem estou buscando um solucao para a seguinte situacao:
no seu exemplo para que o conteudo seja mosstrado a a necessidade de clicar sobre o link da palavra clientes. ok… o que necessito ~e uma solucao que ao carregar a pagina naohaja a necessidade de clicar em nada e que apareca direto o que esta dentro do arquivo conteudo.
eu tentei colocar a window.open… assim Clientes mas nao funciona… ficaria muito agradecido se vc dedicasse um minuto do seu tempo para me ajudar nesse problema…
grande abraco
obrigado!!!
Procurei muito e vc deixou bem simples, obrigada.
ola, gostaria de saber se teria como implementar, seus arquivos com um botão feito no flash.
E quais alterações teriam de serem feitas?
só não funcionou no google chrome
e como eu faço para o link abrir na mesma div?