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
Funcionou ateh um certo ponto, o meu problema é o seguinte….
criei um home.php, que eu carrego no body do meu index.php ou quando clico no link home…
mais na pagina home.php tem um banner em flash, e naum tah aparecendo…
tah tudo certo menos o bendito do flash carrega…
Muito bem… gostei… fiz uns testes e funcionou perfeitamente.
Mas pintou uma dúvida.
tenho a seguinte situação:
MENU (index) -> LISTA -> CADASTRO
O index contem MENU.PHP que abre a LISTA.PHP. Esta contém uma relação de produtos, onde neste mesmo arquivo tenho um link que abre um formulario CADASTRO.PHP para cadastrar novos produtos.
Após finalizar o CADASTRO, gostaria que voltasse a LISTA.PHP, ou seja, o index carregando o MENU já com a LISTA ABERTA…
deu pra entender? é possivel???
COMO RESOLVER GALERA!?
SEI Q ESTE POST É ANTIGO, MAIS ESTOU PRECISANDO DESTA RESPOSTA.
“Muito bem… gostei… fiz uns testes e funcionou perfeitamente.
Mas pintou uma dúvida.
tenho a seguinte situação:
MENU (index) -> LISTA -> CADASTRO
O index contem MENU.PHP que abre a LISTA.PHP. Esta contém uma relação de produtos, onde neste mesmo arquivo tenho um link que abre um formulario CADASTRO.PHP para cadastrar novos produtos.
Após finalizar o CADASTRO, gostaria que voltasse a LISTA.PHP, ou seja, o index carregando o MENU já com a LISTA ABERTA…
deu pra entender? é possivel???”
Desde já grato,
Christian Matola
Olá, bom dia. Eu usei o código e fiz algumas alterações para meu aplicativo. No entanto as páginas que são abertas/incluídas na DIV não funcionam bem com javascript/AJAX. Tem alguma solução para isso?
Como assim não funcionam bem, pode explicar melhor?
Olá!
Eu instalei em um projeto, o ajax funciona, porém ao navegar por outros conteudo e voltar para a página inicial, ele não carrega as funções javascript…. qual seria a solução para isso?
Christian Matola
tenta usar isso no final do seu script de inserção de produtos
isso vai mostar um alerta na tela informando que deu certo a inclusão
echo “alert(‘Incluido com Sucesso’)” ;
isso direciona para o endereço desejado.
echo ” location.href = ‘index.php?link=7′” ;
Boa tarde.
Configurei este script em meu site, ele funciona com um link. Quando tento abrir outro link ele não funciona. No link está assim:
O contato abre normalmente, já o link artes não.
Obrigado.
Já testei Centenas de scripts , todos eles funcionam até um certo ponto
muito bem, o Problema é quando dentro destas paginas carregadas tem outros js
Uma esperiencia amarga que tive foi quando tinha que carregar dentro uma pagina
de cadastro uma combo cidade e bairro a combo não carregava de jeito nenhum!!
somente fora da chamada!!
Simples e Objetivo!
Mto bom, meus parabéns!