Usando XMLHttpRequest

criado por Bruno Kühnen Meneguello em 17/05/2005 9:39am

Bom, agora, pondo na prática, vamos criar um script que busque as notícias no arquivo news.php e exiba em uma div da página index.html:

<html>
...
<script language="javascript" type="text/javascript" src="script.js">
</script>
...
<div id="news"></div>
...
</html>

script.js:

var req;

function loadXMLDoc(url)
{
    req = null;
    // Procura por um objeto nativo (Mozilla/Safari)
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    // Procura por uma versão ActiveX (IE)
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    }
}

function processReqChange()
{
    // apenas quando o estado for "completado"
    if (req.readyState == 4) {
        // apenas se o servidor retornar "OK"
        if (req.status == 200) {
            // procura pela div id="news" e insere o conteudo 
            // retornado nela, como texto HTML
            document.getElementById('news').innerHTML = req.responseText;
        } else {
            alert("Houve um problema ao obter os dados:\n" + req.statusText);
        }
    }
}

function buscarNoticias()
{
    loadXMLDoc("http://localhost/news.php");
}

// Recarrega a cada 60000 milissegundo (60 segundos)
setInterval("buscarNoticias()", 60000);

news.php:

<?php
// Faça aqui a conexão correta ao banco de dados.
$conn = mysql_connect(...);
$sql = "SELECT `titulo`,`desc`,`hora`,`id` FROM news ORDER BY `hora` DESC LIMIT 5";
$query = mysql_query($sql);
while ($res = mysql_fetch_array($query,MYSQL_ASSOC)) {
    echo "<h1>".$res['hora']." - ".$res['titulo']."</h1>";
    echo "<p>".$res['desc']."</p>";
    echo "<a href=\"news_long.php?id=".$res['id']."\">leia mais</a>";
}
?>

Bom, é isso então.

Creio ter deixado bem claro como o objeto XMLHttpRequest é útil para tornar suas páginas bem dinâmicas.

Os usos que eu ainda posso sugerir para este são vários:
- Menu cujos sub-menus sejam carregados dinamicamente.
- inputs no estilo País -> Estado -> Município -> Bairro(!) -> Rua(!) - Casa(!) totalmente dinâmico, sem sobrecarregar a página.
- Salas de bate-papo sem refresh.
- Validações diversas.

Enfim, dá para fazer, e com este objeto, fica fácil facil.

Obrigado.

por Bruno, o Kühnen.

Páginas: 1 2

Comentários:

Página seguinte »

Mostrando 1 - 10 de 64 comentários

Antonio Fiumari disse:

Prezado Bruno:
O JavaScript abaixo não roda através do navegador Firefox. Será que VC poderia me ajudar alterando algum(s) parâmetros ? Agradeço desde já = Fiumari:
<script language="JavaScript"> var ultimo=-1, dBanner;
function carrega(x) {dBanner=x;Banners()}
function Banners()
{ var MNews = new Array();
MNews[0]= '<iframe " name="_blank" scrolling="no" src="http://www.finet.com.br/google.htm" width="100%" frameborder="0" target="_blank" height="350" BORDER="0"></iframe><a href="http://www.finet.com.br/google.htm" target="_blank">CLIQUE => E ABRA O SITE AMPLIADO</a>';
MNews[1]= '<iframe " name="_blank" scrolling="no" src="http://www.finet.com.br/google2.htm" width="100%" frameborder="0" target="_blank" height="350" BORDER="0"></iframe><a href="http://www.finet.com.br/google2.htm" target="_blank">CLIQUE => E ABRA O SITE AMPLIADO</a>'
while((Numero = parseInt(Math.random()*MNews.length))==ultimo);
dBanner.innerHTML=MNews[Numero];
setTimeout("Banners()",15000);
} </script>

03/09/2007 11:01am (~17 anos atrás)

Carlos Sica disse:

desculpem:
<body onLoad="loadXMLDoc(www.teste.com.br,document.form.news.id)">

11/10/2006 6:24pm (~18 anos atrás)

Carlos Sica disse:

preciso passar o campo div como parâmetro para tornar a função processReqChange() genérica mas não consigo fazer isto porque a chamada dela não utiliza parâmetros:
req.onreadystatechange = processReqChange;
tentei colocar os parâmetros mas tudo para de funcionar.
mudanças:
loadXMLDoc(url,campo)
...
req.onreadystatechange = processReqChange(campo);
...
<body onLoad="loadXMLDoc(www.teste.com.br,document.form.campo.id)">
...
<div id="news"></div>
...

11/10/2006 6:22pm (~18 anos atrás)

Renato Alexandre Costa Freitas disse:

existem alguma possibilidade? ou alguém já tentou criar um em que seja validado cpf/cnpj, e-mail após o campo do form perder o foco?

24/08/2006 2:26pm (~18 anos atrás)

Alex disse:

Ola,,,

Tem como fazer isso!

Clicou no botao processar aparece um alert com o "aguarde", ao termino do processamento ele retira o alert e exibi um resultado!

Alguem tem um exemplo.

To tomando uma surra!

Obrigado

21/08/2006 12:28pm (~18 anos atrás)

Ícaro Scherma disse:

Oi, alguém poderia disponibilizar o texto necessário para criar as tabelas do SQL ?
Fiz uma aki, funcionar funcionou, mas queria ver como seria o mais correto...
Thanks ^^

19/08/2006 7:49am (~18 anos atrás)

Lauro Assis Lima de Brito disse:

eu consegui resolver o erro do manipulador e agora ele checa antes de enviar o formulario.

24/05/2006 11:16pm (~18 anos atrás)

Lauro Assis Lima de Brito disse:

Agora a minha dúvida é o seguinte:
Eu adaptei um pequeno site com esse recurso e achei excelente mas ta dando pau nos formulários pois dentro dessa chamada ele não consegue localizar o manipulador do form pra checagem antes do submit.
Se eu chamo a pagina por fora vai normal, dentro do site e dá um erro de java, informando a falta do objeto.

24/05/2006 11:05pm (~18 anos atrás)

Laurimar Pereira de Souza disse:

Ok, Pessoal o script funcionou ok, só não estava atualizando aqui, mas já está ok.
agora, quero saber o seguinte,
Quero carregar a noticia clicada, no mesmo arquivo,
tipo:

Noticia Clicada,

noticia 1...
noticia 2...
noticia 3.....

Grato por ajuda.

27/03/2006 7:16am (~19 anos atrás)

Laurimar Pereira de Souza disse:

Olha só, tentei usar o código postado Por Canibald, mas tb não funcionou.

27/03/2006 6:43am (~19 anos atrás)

Usando XMLHttpRequest

Comentários:

Novo Comentário: