+4
Usando XMLHttpRequest
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:
script.js:
news.php:
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.
<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
desculpem:
<body onLoad="loadXMLDoc(www.teste.com.br,document.form.news.id)">
<body onLoad="loadXMLDoc(www.teste.com.br,document.form.news.id)">
11/10/2006 6:24pm
(~18 anos atrás)
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>
...
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)
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
(~19 anos atrás)
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
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
(~19 anos atrás)
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 ^^
Fiz uma aki, funcionar funcionou, mas queria ver como seria o mais correto...
Thanks ^^
19/08/2006 7:49am
(~19 anos atrás)
eu consegui resolver o erro do manipulador e agora ele checa antes de enviar o formulario.
24/05/2006 11:16pm
(~19 anos atrás)
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.
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
(~19 anos atrás)
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.
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)
Olha só, tentei usar o código postado Por Canibald, mas tb não funcionou.
27/03/2006 6:43am
(~19 anos atrás)
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>