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

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

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

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

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

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

07 de Junho de 2015 - 17:46

Sua foto do perfil

Marcos Marcelino

12 de Abril de 2015 - 14:51

Sua foto do perfil

Thiago

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

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