O objeto XMLHttpRequest
Todos os navegadores modernos têm um objeto XMLHttpRequest integrado para solicitar dados de um servidor.
Todos os principais navegadores têm um analisador XML integrado para acessar e manipular XML.
O objeto XMLHttpRequest
O objeto XMLHttpRequest pode ser usado para solicitar dados de um servidor web.
O objeto XMLHttpRequest é o sonho de um desenvolvedor , pois você pode:
- Atualizar uma página da Web sem recarregar a página
- Solicitar dados de um servidor - após o carregamento da página
- Receber dados de um servidor - após o carregamento da página
- Envie dados para um servidor - em segundo plano
Exemplo de XMLHttpRequest
Quando você digita um caractere no campo de entrada abaixo, um XMLHttpRequest é enviado ao servidor e algumas sugestões de nomes são retornadas (do servidor):
Exemplo
Start typing a name in the input field below:
Suggestions:
Enviando um XMLHttpRequest
Todos os navegadores modernos têm um objeto XMLHttpRequest integrado.
Uma sintaxe JavaScript comum para usá-lo se parece com isso:
Exemplo
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Criando um objeto XMLHttpRequest
A primeira linha no exemplo acima cria um objeto XMLHttpRequest:
var xhttp = new XMLHttpRequest();
O evento onreadystatechange
A propriedade readyState mantém o status do XMLHttpRequest.
O evento onreadystatechange é acionado toda vez que o readyState é alterado.
Durante uma solicitação do servidor, o readyState muda de 0 para 4:
0: solicitação não inicializada
1: conexão do servidor estabelecida
2: solicitação recebida
3: processamento da solicitação
4: solicitação concluída e resposta pronta
Na propriedade onreadystatechange, especifique uma função a ser executada quando o readyState for alterado:
xhttp.onreadystatechange = function()
Quando readyState for 4 e o status for 200, a resposta estará pronta:
if (this.readyState == 4 && this.status == 200)
Propriedades e métodos de XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
Acesso entre domínios
Por motivos de segurança, os navegadores modernos não permitem acesso entre domínios.
Isso significa que tanto a página da Web quanto o arquivo XML que ela tenta carregar devem estar localizados no mesmo servidor.
Os exemplos no W3Schools abrem todos os arquivos XML localizados no domínio do W3Schools.
Se você quiser usar o exemplo acima em uma de suas próprias páginas da Web, os arquivos XML que você carregar devem estar localizados em seu próprio servidor.
A propriedade responseText
A propriedade responseText retorna a resposta como uma string.
Se você quiser usar a resposta como uma string de texto, use a propriedade responseText:
Exemplo
document.getElementById("demo").innerHTML = xmlhttp.responseText;
A propriedade responseXML
A propriedade responseXML retorna a resposta como um objeto XML DOM.
Se você quiser usar a resposta como um objeto XML DOM, use a propriedade responseXML:
Exemplo
Solicite o arquivo cd_catalog.xml e use a resposta como um objeto XML DOM:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
RECEBER ou POSTAR?
GET é mais simples e rápido que POST, e pode ser usado na maioria dos casos.
No entanto, sempre use solicitações POST quando:
- Um arquivo em cache não é uma opção (atualize um arquivo ou banco de dados no servidor)
- Enviando uma grande quantidade de dados para o servidor (POST não tem limitações de tamanho)
- Enviando entrada do usuário (que pode conter caracteres desconhecidos), POST é mais robusto e seguro que GET
O URL - Um arquivo em um servidor
O parâmetro url do método open() é um endereço para um arquivo em um servidor:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
O arquivo pode ser qualquer tipo de arquivo, como .txt e .xml, ou arquivos de script de servidor como .asp e .php (que podem executar ações no servidor antes de enviar a resposta de volta).
Assíncrono - Verdadeiro ou Falso?
Para enviar a solicitação de forma assíncrona, o parâmetro async do método open() deve ser definido como true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Enviar solicitações de forma assíncrona é uma grande melhoria para desenvolvedores da web. Muitas das tarefas executadas no servidor consomem muito tempo.
Ao enviar de forma assíncrona, o JavaScript não precisa esperar pela resposta do servidor, mas pode:
- executar outros scripts enquanto aguarda a resposta do servidor
- lidar com a resposta quando a resposta estiver pronta
Assíncrono = verdadeiro
Ao usar async = true, especifique uma função a ser executada quando a resposta estiver pronta no evento onreadystatechange:
Exemplo
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Assíncrono = falso
Para usar async = false, altere o terceiro parâmetro no método open() para false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Usar async = false não é recomendado, mas para algumas solicitações pequenas isso pode ser bom.
Lembre-se de que o JavaScript NÃO continuará a ser executado até que a resposta do servidor esteja pronta. Se o servidor estiver ocupado ou lento, o aplicativo irá travar ou parar.
Nota: Quando você usa async = false, NÃO escreva uma função onreadystatechange - apenas coloque o código após a instrução send():
Exemplo
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Analisador de XML
Todos os navegadores modernos têm um analisador XML integrado.
O XML Document Object Model (o XML DOM) contém muitos métodos para acessar e editar XML.
No entanto, antes que um documento XML possa ser acessado, ele deve ser carregado em um objeto XML DOM.
Um analisador XML pode ler texto simples e convertê-lo em um objeto XML DOM.
Analisando uma string de texto
Este exemplo analisa uma string de texto em um objeto XML DOM e extrai as informações dele com JavaScript:
Exemplo
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Navegadores antigos (IE5 e IE6)
Versões antigas do Internet Explorer (IE5 e IE6) não oferecem suporte ao objeto XMLHttpRequest.
Para lidar com IE5 e IE6, verifique se o navegador suporta o objeto XMLHttpRequest, ou então crie um ActiveXObject:
Exemplo
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Versões antigas do Internet Explorer (IE5 e IE6) não suportam o objeto DOMParser.
Para lidar com IE5 e IE6, verifique se o navegador suporta o objeto DOMParser, ou então crie um ActiveXObject:
Exemplo
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Mais exemplos
Recupere informações de cabeçalho de um recurso (arquivo).
Recupere informações de cabeçalho específicas de um recurso (arquivo).
Como uma página da Web pode se comunicar com um servidor da Web enquanto um usuário digita caracteres em um campo de entrada.
Como uma página da Web pode buscar informações de um banco de dados com o objeto XMLHttpRequest.
Crie um XMLHttpRequest para recuperar dados de um arquivo XML e exibir os dados em uma tabela HTML.