+4

Usando XMLHttpRequest

criado por Bruno Kühnen Meneguello em 17/05/2005 9:39am
O objeto XMLHttpRequest permite a comunicação assíncrona de um script (JavaScript) com qualquer página web. Ele, em síntese, faz uma requisição HTTP sem ter que iniciar uma nova janela ou recarregar os dados da janela atual.

Este objeto implementa os métodos save e load do modelo DOM. Com ele, portanto, é possível enviar e receber variáveis (ou mesmo textos inteiros) entre páginas, sem que todo o conteúdo desta tenha que ser recarregado. Para usálo adequadamente, é necessário algum conhecimento em DOM e JavaScript. De DOM, pelo menos o createElement(), createTextNode(), getElementById e o atributo innerHTML.

Como eu já disse, o XMLHttpRequest é um objeto. Mas no IE, este objeto é um ActiveX, no Mozilla e no Safari, ele é um objeto nativo. Então a chamada para ele é diferente nestes navegadores. Sendo assim:

Chamada no IE:
var req = new ActiveXObject("Microsoft.XMLHTTP");

Chamada no Mozilla/Safari:
var req = new XMLHttpRequest();

Os métodos deste objetos são:

abort():
Pára a requisição atual.

getAllResponseHeaders():
Retorna todos os cabeçalhos (labels e valores) como uma string.

getResponseHeader("headerLabel"):
Retorna o valor de um único label do cabeçalho.

open("metodo", "URL"[, asyncFlag[, "userName"[, "password"]]]):
Define a página a ser aberta, o método (GET | POST), a URL, o marcador de "assíncrono", e, se a página requerer login, o nome de usuário e a senha.

send(content):
Envia a requisição, opcionalmente pode ser uma string ou até um objeto DOM.

setRequestHeader("label", "valor"):
Define um par label + valor para ser enviado com o cabeçalho da requisição atual.

E as propriedades:

onreadystatechange:
(!) Método a ser invocado quando o estado (definido em readyState) mudar. (!)

readyState:
Inteiro representando o estado da requisição:
0 = não inicializado
1 = carregando
2 = carregado
3 = modo interativo
4 = completado

responseText:
Versão em string dos dados retornados pela requisição.

responseXML:
Objeto DOM retornado pela requisição

status:
Código numérico do estado da requisição retornado pelo servidor. O conhecido 404 "Not Found" e o menos conhecido, mas mais importante 200 "Ok"

statusText:
A string que acompanha o código de estado acima ("Not Found", "Ok", etc)

Comentários:

Mostrando 1 - 10 de 64 comentários
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)

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)

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)

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)

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)

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)

Olha só, tentei usar o código postado Por Canibald, mas tb não funcionou.
27/03/2006 6:43am (~19 anos atrás)

Novo Comentário:

(Você pode usar tags como <b>, <i> ou <code>. URLs serão convertidas para links automaticamente.)