Carregar uma Página dentro de uma DIV com AJAX

Ted k' · Dezembro 10, 2008

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!!!!

Jonathan Queiroz · Dezembro 10, 2008

Boa !

Volta e meia aparece um membro com dúvida sobre AJAX...

Eu sempre procurava algo e não achava nunca achava um script pronto (já estava pensando em postar alguma coisa aqui)

Essa área está pouco movimentada...

Vou começar a postar mais scripts aqui

Ted k' · Dezembro 10, 2008

Duvidas de AJAX, estou ai, hehehe!

Vou começar a postar mais de ajax aqui, movimentar mais!!!

Valeu ai!!!

victormartins · Janeiro 8, 2009

Só foi aqui ou as páginas não carregam com CSS?

KaKarotto · Janeiro 9, 2009

Nossa, eu postei duas soluções para ajax =/

A segunda foi aperfeiçoamento da primeira, Cross-browser... :mellow:

Só usar ajax(objeto).load('pagina.htm')...

Só foi aqui ou as páginas não carregam com CSS?

O ajax, só carrega conteúdo. O Css deve carregar da tela que puxa o ajax.

Kayzen Hayama · Maio 4, 2009

Adorei seu script porém não estou conseguindo passar um valor via get usando seu script

Eu preciso carregar uma lista de produtos que vem do banco de dados e para buscar os produtos preciso passar a (id).

Ex: ( ultimos_produtos_categoria.php?id=98 )

Pode me ajudar?

vigote · Maio 14, 2009

Esse script me ajudou muito .... massssssssssssss ....

estou com um probleminha nele no internet explorer ....

Qunado temos mais de um link, o script acaba funcionando apenas em um dos links ... alguém tem a solução pra isso ?

No FF funciona show de bola ...

Abraço

Editado Maio 14, 2009 por vigote

Carlos Renan · Maio 28, 2009

to com um problema parecido com o do kayzen, tenho um arquivo de config mas não conssigo carregar as informações dele no ajax...

(o config me conecta com o banco de dados)

então não conssigo retornar valores como por exemplo <? echo $dados[usu_nome];?>

alguém sabe como resolver isso?

falou galera...

axo q resolvi o meu problema e o do Kayzen Hayama, no meu caso fiz o seguinte, coloquei um include do config.php na pagina q tava carregando...

o meu config no caso é o arquivo q me conecta com o bd, se você não tiver esse arquivo tenta colocar o conect do bd na pagina que você vai carregar....

alguém ae sabe se tem como ele funcionar sem o include?

4rc4njo · Fevereiro 24, 2010

Esse script me ajudou muito .... massssssssssssss ....
estou com um probleminha nele no internet explorer ....
Qunado temos mais de um link, o script acaba funcionando apenas em um dos links ... alguém tem a solução pra isso ?
No FF funciona show de bola ...
Abraço

Qual a versão do seu I.E véinhu porque o meu aqui é 8 e ta show de bola

Editado Fevereiro 24, 2010 por 4rc4njo

dudesigner · Maio 3, 2010

Olá galera, estou com um problema semelhante a este...

No meu caso, o menu funciona, mas o formulário não ou pelo menos está abrindo em uma nova página.

funcoes.js

// FUNÇÃO AJAX 
function GetXMLHttp(){ 
   var xmlHttp; 
   try{ 
      xmlHttp = new XMLHttpRequest(); 
   } 
   catch(ee){ 
      try{ 
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch(e){ 
         try{ 
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
         }catch(e){ 
            xmlHttp = false; 
         } 
      } 
   } 
   return xmlHttp; 
} 
var xmlRequest = GetXMLHttp(); 

// FUNÇÃO QUE PEGA OS LINKs DE CADA PÁGINA 
function Pag(url){ 
   xmlRequest.onreadystatechange = mostraPag; 
   xmlRequest.open("GET",url,true); 
   xmlRequest.send(null); 
   if(xmlRequest.readyState == 1){ 
      document.getElementById("conteudo").innerHTML = "<img src='../imagens/carregando.gif'>"; 
   } 
   return url; 
} 

// FUNÇÃO QUE FAZ COM QUE ABRA AS PÁGINAS NA DIV 'CONTEÚDO' 
function mostraPag(){ 
   if(xmlRequest.readyState == 4){ 
      document.getElementById("conteudo").innerHTML = xmlRequest.responseText; 
   } 
} 

// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <INPUTs> DOS FORMULÁRIOS 
function form2Qs(form_ajax){ 
   var form = document.getElementById(form_ajax); 
   var inputs = form.getElementsByTagName('input'); 
    
   var dados = ''; 
   for( var i=0; i<inputs.length; i++ ){ 
      dados += inputs[i].name+'='+inputs[i].value+'&'; 
   } 
   return dados; 
} 

// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <TEXTAREAs> DOS FORMULÁRIOS 
function form3Qs(form_ajax){ 
   var form = document.getElementById(form_ajax); 
   var textareas = form.getElementsByTagName('textarea'); 
    
   var dados = ''; 
   for( var i=0; i<textareas.length; i++ ){ 
      dados += textareas[i].name+'='+textareas[i].value+'&'; 
   } 
   return dados; 
} 

// FUNÇÃO QUE DA UM 'LOOP' PARA PEGAR O NOME E VALOR DE TODOS OS <SELECTs> DOS FORMULÁRIOS 
function form4Qs(form_ajax){ 
   var form = document.getElementById(form_ajax); 
   var selects = form.getElementsByTagName('select'); 
    
   var dados = ''; 
   for( var i=0; i<selects.length; i++ ){ 
      dados += selects[i].name+'='+selects[i].value+'&'; 
   } 
   return dados; 
} 

// FUNÇÃO QUE RECEBE TODOS OS NOMES E VALORES DE TODOS OS <INPUTs> E <TEXTAREAa> RECOLHIDOS DOS FORMULÁRIOS 
function f_ajx(){ 
   var url = id('form_ajax').action; 
   xmlRequest.open("POST", url, true); 
   xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
    
   var dados = '?'+form2Qs('form_ajax')+form3Qs('form_ajax')+form4Qs('form_ajax')+'&funcao='+document.getElementById('funcao').value; 
    
   xmlRequest.send(dados); 
   xmlRequest.onreadystatechange = function(){ 
      id("conteudo").innerHTML = xmlRequest.responseText; 
   } 
} 
function id(el){ 
   return document.getElementById(el); 
}

noticias.php

<?php 
$funcao = $_GET['funcao']; 

/***********************************************************/ 
/******************* INSERIR NOTÍCIAS **********************/ 
if($funcao == "inserir"){ 
        echo " 
                <form action=\"#\" id='form_ajax' method='post'> 
                        <input name='funcao' type='hidden' value='cadastrar' /> 
                        
                        <label>Título</label><br /> 
                                <input class='dados_resp' id='titulo' name='titulo' type='text' size='60' /><br /><br /> 
                                
                        <label>Chamada</label><br /> 
                                <textarea class='dados_resp' onkeyup='blocTexto(this.value)' name='chamada' style='width:46%' rows='4'></textarea><br /> 
                                <div class='exemplo' style='width:386px; text-align:right;'> 
                                        Caracteres restantes: <span id='cont'>200</span> 
                                </div><br /> 
                                          
                        <label>Reporter</label><br /> 
                                <input class='dados_resp' id='reporter' name='reporter' type='text' size='60' /><br /><br /> 
                        
                        <textarea class='dados_resp' id='texto' name='texto' style='width:98%' rows='10'></textarea><br /><br /> 
                        
                        <label>Status</label><br /> 
                                <select name='status' class='dados_resp'> 
                                        <option value=''></option> 
                                        <option value='sim'>Sim</option> 
                                        <option value='não'>Não</option> 
                                </select><br /> 
                        
                        <input class='formulario' onclick='f_ajx()' type='button' value='Cadastrar' /> 
                </form>"; 



if($funcao == "cadastrar"){ 
        $diretorio = '../xxxxx/xxxxx/noticias/'; 
        $pesoMax = '5000000'; //Corresponde a 10Mb 

        $imagem = $_FILES['img']; 
        if($imagem['size'] > $pesoMax){ 
                echo '<script type="text/javascript"> 
                                alert("Arquivo muito grande, o arquivo deve ter no máximo 5Mb"); 
                                history.back(); 
                          </script>'; 
                exit;                            
        }else{ 
                $caminho = $diretorio.$imagem['name']; 
                if(move_uploaded_file($imagem['tmp_name'], $caminho) == ""){ 
                        echo '<script type="text/javascript"> 
                                        alert("Selecione a imagem desejada!"); 
                                        history.back(); 
                                  </script>'; 
                }else{ 
                        $casas  = strlen($imagem['name']) -4; 
                        $extensao = substr($imagem['name'], -4, 4); 
                        $aqv = substr($imagem['name'], 0, $casas); 
                        $img = strtolower(remover($aqv).$extensao); 

                        $tabela_ = "xxxxx"; 
                        $campos_ = "empresa, coordenadoria, titulo, chamada, imagem, reporter, texto, status, ipcad, cadastradopor, datacad, horacad"; 
                        $valores_ = "'".$_SESSION['empresa']."', '".$_POST['coordenadoria']."', '".$_POST['titulo']."', '".$_POST['chamada']."', '".$img."', '".$_POST['reporter']."', '".$_POST['texto']."', '".$_POST['status']."', '".$ip."', '".$_SESSION['nome']."', '".$data."', '".$hora."'"; 
                        $alertap_ = "A notícia foi cadastrada com sucesso!"; 
                        $alertan_ = "Ocorreu um erro! Tente novamente mais tarde."; 
                        $redirecionar_ = "noticias.php"; 
                        
                        inserir($tabela_, $campos_, $valores_, $alertap_, $alertan_, $redirecionar_); 
                } 
        } 
} ?>

valeu galera...

consegui fazer mas ainda esta dando erro no retorno dos dados...

tudo certo!

valeu pela ajuda de vocês...

guibas · Outubro 5, 2010

tentei usar essa idéia mas não consegui....

to querendo carregar uma página .php que gera um pdf pra download

tem como fazer isso?

e tipo colocar um gif de progresso quando clica e sumir quando concluir?

Entrar

Carregar uma Página dentro de uma DIV com AJAX

Pergunta

Link para o comentário

Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns