Atualizar sem "atualizar a página"

[neo_soro]

Boa noite p.*,

estou querendo desenvolver uma aplicação que receba mensagem, tipo como no gmail. Quando receber ser avisado. Vi um puglin jquery, que pegava o último tweet de alguém simplesmente colocando o nome do usuário. Ele faz com getJson(), mas somente quando atualizo a página que ele recebe o novo tweet. Queria saber se teria a possibilidade de conseguir fazer isso? Não precisa necessariamente ser com jQuery. Gostaria de saber por onde começar. Obrigado.

[Jonathan Queiroz]

Para isso você deverá utilizar as funções setInterval ou setTimeout para controlar o tempo e AJAX para receber os dados.

[neo_soro]

Para isso você deverá utilizar as funções setInterval ou setTimeout para controlar o tempo e AJAX para receber os dados.

Mas isso não poderia prejudicar o processamento da página? Quais seriam as implicações de usar estes métodos? E as conexões com o BD não seriam prejudicadas? Ficam em aberto? Obrigado.

[Jonathan Queiroz]

As conexões não ficariam abertas o tempo todo. A página que retorna os dados seria uma página como qualquer outra, sendo que essa irá escrever os dados seguindo um padrão para você separar isso via JavaScript.

[Matheus Matos]

opa neo_soro, vê se essa vídeo-aula pode te ajudar:

clica aqui

Vlw

Matheus Matos

[Danilo Moraes]

Olha neo_soro, uma coisa e certa: sempre existe 1000 maneiras de se fazer a mesma coisa na programacao! hehehehe

Bom, aki vai uma possivel maneira:

1 passo- Pensa assim, a linguagem no servidor, não pode dar um refresh na pagina... Esse refresh tem que vir do cliente mesmo, ou seja, tem que estar configurado para dar o refresh no proprio site que esta no cliente. Partindo dessa verdade, já sabemos que o refresh deve ser configurado pelo javascript ou qualquer linguagem que tu vá usar no cliente.

2 passo- Tu tem que escolher como o refresh vai acontecer: Vai ser um evento que vai ativalo? exemplo.. quando o usuario clicar no link caixa de entrada, ou quando o usuario mecher o mouse na tela, ou quando o usuario apertar uma tecla qualquer. Vai ser automatico esse refresh> exemplo... você pode configurar uma tag META pra dar refresh num iframe por exemplo(obviamente não faras isso porque tu já disse que quer usar ajax). Tu pode tambem usar uma funcao no javascript que sempre de tempos em tempos vai fazer uma requisicao ao servidor. Eu obviamente escolho a segunda opcao :P

Aqui vai uma maneira de fazer: Crie uma funcao que vai fazer o request no servidor. Exemplo:

//aki você instancia o objeto XMLHttpRequest() ou ActiveXObject(), dependendo do browser. Nesse caso instanciei o objeto com o nome de httprequest

function checaEmails(pagina, idElemento) {
  var elemento = document.getElementById(idElemento);//estou pegando o elemento pelo id que foi passado como parametro da funcao.
  httprequest.open("get", pagina, true);//aki você vai apenas abrir uma requisicao, para a pagina que for determinada como parametro da funcao.
  httprequest.onreadystatechange = function() {
    if(httprequest.readyState == 4){
       if(elemento.innerHTML != httprequest.responseText){//se o conteudo do elemento onde vao ser mostrados os emails for diferente do que veio do servidor então insere o conteudo no elemento "div"
          elemento.innerHTML = httprequest.responseText;
       }
     }
   }
}

Esse e um codigo bem chulo, porque estou com sono agora e sem tempo de fazer algo melhor e testar pra ti... Mas basicamente, no cliente seria isso... você testa se o conteudo que vem do servidor e igual ao que já esta na pagina. Se for diferente, ele insere o novo conteudo vindo do servidor. Isso basicamente checa se tem novos email. É uma maneira que eu acredito ser bem errada, mas e mais pra fins didaticos... :P Se eu foce fazer, obviamente faria testes por exemplo do tipo de dado que esta vindo do servidor, e receberia os dados via XML ou JSON... Bom, agora que tu já tem uma funcao que checa por conteudo diferente no servidor, basta apenas fazer com que essa funcao seja chamada de tempos em tempos. Eu faria de 30 em 30s mas ai depende de como você quer que fique. Para fazer essa requisicao de tempo em tempo, você pode usar o metodo setInterval(). Ele funciona basicamente assim: setInterval(funcao(), tempo em ms); Essa funcao vai executar uma funcao infinitamente a cada periodo indicado ali. Para validar se existe novos emails, criamos aquela funcao checaEmails() e para chamala a cada 30s, poderiamos fazer assim: setInterval(checaEmails("pagina.php", "divConteudo"), 30000); Onde 1000milisegundos = 1s então 30s = 30*1000ms = 30000 :P Bom, agora o ultimo passo e saber aonde colocar essa funcao... Ela pode ser largada em qualquer parte do codigo, mas aconselho a colocala para iniciar pelo evento onload, porque assim temos serteza de que so checaremos por novos emails assim que a pagina estiver toda carregada. Uma maneira de se fazer é:

<body onload="setInterval(setInterval(checaEmails("pagina.php", "divConteudo"), 30000)">

Obviamente esse é um codigo obstrutivo, ou seja, que esta preso ao HTML. Se preferir fazer um codigo mais flexivel, procure pelo google pelo metodo addEventListener().

Olha, não sei se foi de grande ajuda este post, não dei a solucao pronta, dei apenas uma ideia de como fazer. Se tiver mais alguma duvida, posta aki que tento ajudar de forma melhor. T+

Edit: Esqueci de falar, as conexoes não ficam abertas o tempo todo. Funciona assim: você faz um request ao servidor. Os dados serao processados e o servidor vai enviando por partes o codigo. Quando o codigo chegou por completo, a conexao é "fechada". Fechada no sentido de que não vai mais trafegar nenhum dado pela rede. Porem, aquele request que você abriu com o metodo httprequest.open() continua aberto. Ele so vai ser fechado quando você chamar denovo a funcao. Daí, os dados do request serao refeitos e reenviados. Mas acredito que sua pergunta era sobre o fato de continuar ocupando banda. Se for isso fique tranquilo porque a resposta é não. :D

Editado Agosto 17, 2009 por Danilo Moraes