Atualizado em 18 de Outubro de 2013

Atualizar parte do Site sem Refresh na Página inteira com Javascript

Olá pessoal,

Certa vez o leitor Acacio me pediu ajuda em um código que fosse possível atualizar parte do site sem dar refresh na página inteira, para isso precisamos da ajuda de duas tecnologias muito utilizadas na web: Javascript e PHP.

O javascript faz a função de solicitar ao servidor às informações que serão retornadas pelo PHP sem ter que atualizar a página inteira.

Em nosso exemplo vamos utilizar três arquivos. Um é o que contém os códigos javascript, o segundo é o que tem a página HTML própria mente dita, o terceiro e ultimo é o arquivo PHP que vais retornar as informações na qual escolhemos para serem mostradas.

Vamos ao exemplo: No HTML pedimos ao usuário para digitar o nome dele, após clicar no botão Enviar Nome a mensagem de boas vindas e atualizada sem dar refresh na página.

Arquivo funcoes.js



// Função que verifica se o navegador tem suporte AJAX
function AjaxF()
{
var ajax;

try
 {
  ajax = new XMLHttpRequest();
 }
catch(e)
 {
  try
  {
   ajax = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e)
  {
   try
   {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch(e)
   {
    alert("Seu browser não da suporte à AJAX!");
    return false;
   }
  }
 }
return ajax;
}

// Função que faz as requisição Ajax ao arquivo PHP
function AlteraConteudo()
{
var ajax = AjaxF();

 ajax.onreadystatechange = function(){
  if(ajax.readyState == 4)
  {
   document.getElementById('conteudo').innerHTML = ajax.responseText;
  }
 }

// Variável com os dados que serão enviados ao PHP
var dados = "nome="+document.getElementById('txtnome').value;

 ajax.open("GET", "retorna_informacoes.php?"+dados, false);
 ajax.setRequestHeader("Content-Type", "text/html");
 ajax.send();
}

Arquivo index.php



<!DOCTYPE html>
<html>
<head>
 <title>
Testes do Blog</title>
 <script
type="text/javascript" src="funcao.js"></script>
</head>
<body>

 Digite seu Nome:
<input id="txtnome" name="txtnome" type="text" />
 <br/>
 <button
onclick="AlteraConteudo()">Enviar Nome</button>
 <br />

 <div
id="conteudo">
  Olá anônimo, seja bem-vindo!!!
</div>
</body>
</html>


Arquivo retorna_informacoes.php



<?php
echo utf8_encode('Olá '.$_GET['nome'].', seja bem-vindo!!!');
?>

O código já esta bem comentado, mais em caso de dúvidas comentem!!!

Download dos arquivos Clique aqui.


Gostou da dica??? Continue por dentro das dicas de programação!!! Assine a newsletter.


Até a próxima pessoal.

Comentários

Sua foto do perfil

Manoel Pereira dos Santos

estou montando um sistema onde preciso mostrar uma serie de eventos assim que são gerados no banco de dados, até ai tudo bem.
Usei o seu exemplo para recarregar a pagina a cada 5 segundos para testes, o que executa a query no banco e exibe os eventos 100%, o problema é que estes eventos precisam ser tratados, e para isso eu abro uma janela modal para dá os tratamentos, mas ae a pagina atualiza e perco tudo kkkkk

Conhecem alguma forma de fazer o processo de mostrar novos eventos, mas que não interfira nos que já estão aparecendo.

Testei atualização da pagina sem refresh, com ajax, mas não consigo escrever em input text também, o conteudo sempre é apagado, estou a quase uma semana nisso...

Resumindo, preciso mostrar sempre que chegar uma informação no banco e preciso de uma forma de poder escrever em um input text na mesma pagina sem perder o conteudo do input.

Na imagem em anexo, mostra os botões, ao clicar em um deles, abre uma janela modal, mas no tempo do refresh da pagina (com ajax) a mesma se fecha.

Já montou algo semelhante ou tem ideia de como montar?

Imagem dos eventos gerados, coloquei um input na tela principal para ter uma ideia

https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/12654571_960039777415062_8191735511309330532_n.jpg?oh=4cf115eeb6714dc4389c080c4f72f9b9&oe=57330601&__gda__=1463874411_1c3f18e3cd8b7d63af9ebb340f7b307f

Este link tosco ae é porque usei um link que postei no facebook

29 de Janeiro de 2016 - 01:05

Sua foto do perfil

Mauricio Programador

Olá Manoel,

Em seu caso você vai ter que alterar um pouco o código deste post para adaptar no seu, mas e tranquilo.

Primeiro você vai ter que carregar somente o que for atualização, para que ele não tenha que estar escrevendo todos os elementos novamente.

Segundo nesta linha:

document.getElementById('conteudo').innerHTML = ajax.responseText;

Você vai ter que alterar para:

document.getElementById('conteudo').innerHTML += ajax.responseText;

Observe que o que muda e um sinal de +, onde ele deixa o que ja tem na div e coloca o que teve de retorno que deve ser apenas a atualização.

Teste assim, qualquer coisa comenta aí.

Abraço.

03 de Fevereiro de 2016 - 14:30

Sua foto do perfil

Paulo Victor

Boa Tarde,
Muito com o post, porém eu estou com um problema, dentro dessa div que eu atualizo eu preciso usar um botão com o javascript e ele não funciona!

11 de Janeiro de 2016 - 14:42

Sua foto do perfil

Mauricio Programador

Olá Paulo,

Deixa eu ver se entendi, dentro desta div onde vem o novo conteúdo, tem um botão que chama alguma função JavaScript e isso? Se for não tem problema nenhum, pois se a chama desse JavaScript esta fora da div e não foi removida com o conteúdo antigo desta div não tem problema.

Verifique se a chamada desta função existe mesmo depois de atualizar o conteúdo da div.

Abraço.

13 de Janeiro de 2016 - 15:25

Sua foto do perfil

Felipe Martins

Mauricio, montei um site com um banner no topo que troca as propagandas e um menu logo abaixo.
Quando clico no menu ele envia um GET para o index.php e este dá um include na pagina correspondente, então o site recarrega a pagina e as propagandas do banner voltam na primeira, tem como eu recarregar apenas a parte de baixo após o menu e dar um include sem recarregar as propagandas, ou como eu faço para o banner não voltar no inicio.

29 de Novembro de 2015 - 10:57

Sua foto do perfil

Mauricio Programador

Olá Felipe,

Tem, mas você não vai poder fazer isso enviando um GET, pois sempre que você faz um link enviando um GET ele atualiza toda a pagina fazendo assim com que ele recarregue os banner também.

Você pode usar o método acima para fazer isso que deseja, e para cada link que você quiser abrir cria uma função para chamar o conteúdo que deseja.

Ficaria assim:

Você cria as função AlteraConteudo1(), AlteraConteudo2() e etc.

Daí dentro da função você diz para ele chamar o arquivos que deseja.

Abraço.

23 de Dezembro de 2015 - 10:45

Sua foto do perfil

Julio Cesar Rocha

Ola Mauricio
Muito bem este post.
Aqui temos a ação de disparar/chamar a função apos escrever e clicar em altera nome.
Mas como faço para ter conteudo sempre atualizado sem ter que clicar em nada, tipo o facebook que sempre esta atualizado mesmo que façamos nada.
peguei seu codigo e coloquel a função window.setInterval(AlteraConteudo,1000) a cada 1 segundo , mas isso gera alto processamento do cpu do servidor .
Como faço para ter minha pagina atualizada sem precisar ter minha ação (Lembrando que usei seu ensino para criar este codigo para mostrar imagens cadastradas)?

10 de Setembro de 2015 - 01:00

Sua foto do perfil

Mauricio Programador

Olá Julio,

Obrigado, é realmente se você chamar a função que carrega os dados sempre (no seu caso AlteraConteudo), ele vai consumir muito do seu servidor.

Mas o processo e este do setInterval, porém terá que fazer de uma forma mais sutil, como usamos quando criamos um chat para verificar se tem nossas mensagem para exibir.

A tática e mais ou menos assim (Vamos pegar o exemplo do Facebook):

Dentro da tabela que tem os post tem o timestamp da data que foi postado, então quando o usuário entra primeira vez na pagina ele coloca o conteúdo na timeline e grava em uma variável JavaScript o timestamp atual.

Depois ele fica dando o setInterval, mas apenas verificando se tem post com o timestamp mais atual do que foi pesquisando da ultima vez.

Então se ele não achar nada o processamento e quase mínimo, mas se ele achar ele retorna os dados.

Espero que esta explicação lhe ajude.

Abraço.

15 de Setembro de 2015 - 10:50

Sua foto do perfil

Roni

Mauricio, muito bom esse seu post, era justamente o que eu estava precisando. Fiz aqui e funcionou direitinho, mas inspecionando a página eu vi que aparece uma mensagem dizendo que o uso do XMLHttpRequest não é recomendado, mas fora isso deu tudo certo.

14 de Agosto de 2015 - 10:51

Sua foto do perfil

Mauricio Programador

Olá Roni,

este e um dos métodos mais usados não sei porque deu esta mensagem. Porém para proteger o seu sistema tudo que vem do lado do usuário deve ser validado no seu PHP. Este e o único método seguro de proteger o seu sistema.

Grande abraço.

17 de Agosto de 2015 - 10:45

Sua foto do perfil

ARLENN DIAS PEREIRA

Obrigado você me salvou aqui....

07 de Junho de 2015 - 17:46

Sua foto do perfil

Marcos Marcelino

Parabéns pelo post Mauricio,

Me ajudou muito !

Obrigado

12 de Abril de 2015 - 14:51

Sua foto do perfil

Thiago

Mauricio, meus mais sinceros parabens! Um código extremamente simples porem de uma utilidade inenarravel. Seu metodo de explicação é otimo. Tenha a certeza que me ajudou muito!

Muito obrigado e muito sucesso para vc!

03 de Abril de 2015 - 00:16

Sua foto do perfil

DANIEL DE SA

Ola mauricio...sou novo no ajax porem estou com um projeto de criar um bate-papo em tempo real....a parte de enviar as infromacoes pro servidor sem atualizar a pagina eu ja sei...porem estou com problema para capturar a resposta do outro usuario sem dar refresh na pagina...

15 de Dezembro de 2014 - 11:05

Sua foto do perfil

Mauricio Programador

Olá Daniel,

Da mesma forma que você envia as informação para o servidor sem atualizar a página você fará para pegar, usando o exemplo acima na pagina retorna_informacoes.php você irá colocar uma busca no banco de dado para ele pegar o que o outro usuário digitou e mostrar.

Abraço.

16 de Dezembro de 2014 - 08:46

Sua foto do perfil

Franco

Olá Mauricio, gostei do seu artigo esclarecendo como criar uma conexão assincrona. Gostaria de saber se o Sr. pode me auxiliar em algum comentário quanto à um código que estou fazendo, porém ele é mais complexo por que busca o valor pego no select junto ao banco de dados e trás outro valor como resposta para outro <input>.entei fazer mas ele está dando que XMLHttpRequest é um objeto indefinido. Não sei resolver o problema.

09 de Novembro de 2014 - 21:54

Sua foto do perfil

Mauricio Programador

Olá Franco,

Claro que posso, mas coloquei o que você precisa para que eu possa responder melhor a sua dúvida.

Abraço.

10 de Novembro de 2014 - 10:24

Sua foto do perfil

Franco V. Morales

Ola Mauricio, espero que tudo esteja bem. Falei com o Sr, outro dia, mas acabei nao respondendo tao prontamente por que fiquei dedicado a outro projeto e estava esperando o momento mais oportuno pra dar continuidade no problema do Ajax
SEgue o codigo HTML
#################################
<label>Produto.:<label>
<select name="Produto" id="Produto" onchange="alteraConteudo()"/>
<?php
$produto = "SELECT merMercadoria, merTotal FROM mercadoria ORDER BY merMercadoria";
$item = mysql_query($produto);

if(!$item)
{
$erro = "Erro, nao encontrou cliente!";
} else{
//$numero_registros = mysql_num_rows($resultado);
while($valor = mysql_fetch_array($item))
{ ?>
<option><?php print $valor['merMercadoria']; ?></option>
<?php } } ?>
</select>
## - ele esta colhendo a informacao nesta select que vem do DB. Quando seleciona o item ela busca o item relacionado no DB e manda pra outro campo. - Segue
##
<label>Valor.:<label>
<input type="text" name="valor" id="valor" size="8" maxlength="8" value="<?php ?>"/> <br/><br/>
..... Meu problema nisto tudo ai e o seguinte. Eu nao sei dizer se ele esta pegando e em que ponto ele esta parando. Pela ferramenta do Chrome, ele diz que a XMLREsquest nao esta declarada. Por isso me perdi
############################
// Funcao para verificar se o navegador suporta AJAX
function AjaxF()
{
var ajax;
try
{
ajax = new XMLHttpRequest();
}
catch(e)
{
try
{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Seu browser nao suporta ajax!");
return false;
}
}
}
return ajax;
}

//Funcao que faz a Requisicao Ajax ao arquivo
function alteraConteudo()
{
var ajax = AjaxF();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4)
{
document.getElementById('valor').innerHTML = ajax.responseText;
}
}
//Variavel com os dados que serao enviados ao PHP
var dados ="nome="+document.getElementById('Produto').value;
ajax.open("GET","retorna_informacao.php?"+dados, false);
ajax.setRequestHeader("Content-Type","text/html");
ajax.send();
}
################# Finalmente o PHP

<?php
print utf8_encode('Ola'.$_GET['nome']);
?>

13 de Janeiro de 2015 - 08:56

Sua foto do perfil

Mauricio Programador

Olá Franco,

Primeiro o seu select ta faltando a propriedade value para que o javascript possa pegar o valor dele.

Ex.: ...option value="...

Depois so para teste de retorno altere o código:

if(ajax.readyState == 4)
{
document.getElementById('valor').innerHTML = ajax.responseText;
}

Para:

if(ajax.readyState == 4)
{
alert(ajax.responseText);
document.getElementById('valor').innerHTML = ajax.responseText;
}

So para ver o retorno que esta vindo do arquivo PHP.

Testa ai e comenta novamente com o retorno.

Abraço.

13 de Janeiro de 2015 - 08:57

Sua foto do perfil

Franco V. Morales

Ola Mauricio, fiz o que o Sr. me disse e deveras me apontou o erro. O bichinho ta funcionando aqui.... porem ele nao pega o valor da variavel que traz do DB o valor que eu quero. Fiz de tudo, alterei, trasnformei de php para javascript de javascript pra php e nao pega o valor nem a pau.
Quando eu clico sobre o item selecionado ele vem com a mensagem de alerta e printa o nome da variavel no value, mas nnunca o conteudo. Segue abaixo:
############################
<select name="Produto" id="Produto" onchange="alteraConteudo()"/>
<?php //Aqui e a base de dados que traz os dados da tabela apontada
$produto = "SELECT merMercadoria, merTotal FROM mercadoria ORDER BY merMercadoria";
$item = mysql_query($produto);

if(!$item)
{
$erro = "Erro, nao encontrou cliente!";
} else{
//$numero_registros = mysql_num_rows($resultado);
while($valor = mysql_fetch_array($item))
{ ?>
<option value="pega_produto" id="pega_produto"><?php print $valor['merMercadoria']; ?></option> //Ali no value que esta o problema, esta "undefined" por que nao ha nenhum valor nela. Nao pega de jeito nenhum
<?php } } ?>
</select>
<label>Valor.:<label>
<input type="text" name="valor" id="valor" size="8" maxlength="8" value="<?php ?>"/><br/><br/> //E aqui e o input que recebe do arquivo de resposta PHP. Aqui ele imprime a resposta certinho, porem no alert();
###### TRECHO JS
//Funcao que faz a Requisicao Ajax ao arquivo
function alteraConteudo()
{
var ajax = AjaxF();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4)
{
alert(ajax.responseText);
document.getElementById('valor').innerHTML = ajax.responseText;
}
}
//Variavel com os dados que serao enviados ao PHP
var dados ="nome="+document.getElementById('pega_produto').value;
ajax.open("GET","retorna_informacao.php?"+dados, false);
ajax.setRequestHeader("Content-Type","text/html");
ajax.send();
}

# Curioso que neste aplicativo que estou fazendo ele ja apresentou dificuldade de pegar valores em variaveis do input quando fui fazer o ajuste para login. Nao pegava de jeito nenhum o valor onde estava contido o nome da logando. precisei dar uma volta no mundo pra conseguir dobrar o sistema. Agora este problema tambem bem caracteristico.
Segue o link do sistema.
http://www.automecanicacircao.com.br/ordemServico_a.php? orcData=&orcNome=&orcEndereco=&orcTelefone=&orcVeiculo= &orcVeiculo=&orcPlaca=

14 de Janeiro de 2015 - 09:12

Sua foto do perfil

Mauricio Programador

Franco,

Mas ainda tem alguns ajustes, por exemplo: O seu value tem que ser o id de referencia da busca no banco dados que irá procurar o valor.

Depois dele pegar este ID que esta no value, ele deve ir para pagina retorna_informacao.php e fazer a consulta e sesta por sua vez retornar somente o valor que vai ir para o campo valor.

Testa ai.

Fico no aguardo.

14 de Janeiro de 2015 - 09:17

Sua foto do perfil

Franco V. Morales

Isto sim, eu pensei isto que o Sr. esta comentando, que tao logo quando ele tiver a informacao, como ele saberia retornar o preco na tabela mercadoria do banco de dados? Este nao e o problema, o problema que ele nao pega a informacao no option. Eu ja enfrentei dificuldade de pegar dados nos inputs quando estava fazendo o sistema de login. Precisei da uma volta no mundo pra dobrar o sistema e levar a informacao do usuario. O problema aqui ta sendo pegar o valor da option. Nao estou conseguindo pega-lo. Preciso de alguma alternativa que o pegue pra conseguir fazer o resto. O sr. chegou a ver o sistema online? Muito obrigado ate o momento por ter me atendido

15 de Janeiro de 2015 - 09:17

Sua foto do perfil

Mauricio Programador

Franco,

eu vi o sistema online, mas como não tenho acesso aos arquivos PHP não adianta muito.

Vou colocar aqui um exemplo de um projeto meu que ta funcionando, dai você so adapta.

HTML

<select id="txtnome" name="txtnome">
<option value="1">1</option>
<option value="2">2</option>
</select>

O resto e exatamente como esta no post.

Teste aí.

15 de Janeiro de 2015 - 09:17

NEWSLETTER

Receba dicas de programação
em seu e-mail

TWITTER

Acompanhe tudo o que rola
com Mauricio Programador

NEWSLETTER