Todos os navegadores modernos têm um objeto embutido XMLHttpRequest para solicitar dados de um servidor.
Todos os principais navegadores têm um parser XML built-in para acessar e manipular XML.
O objeto XMLHttpRequest
O objeto XMLHttpRequest pode ser utilizado para solicitar dados de um servidor web.
O objeto XMLHttpRequest é a developers dream , porque você pode:
- Atualizar uma página web sem recarregar a página
- dados da solicitação de um servidor - após a página foi carregada
- Receber dados de um servidor - depois que a página for carregada
- Enviar dados para um servidor - no fundo
Exemplo XMLHttpRequest
Quando você digitar um caractere no campo de entrada abaixo, um XMLHttpRequest é enviado para o servidor, e algumas sugestões de nomes são devolvidos (from the server) :
Exemplo
Start typing a name in the input field below:
Suggestions:
O envio de um XMLHttpRequest
Todos os navegadores modernos têm um objeto XMLHttpRequest built-in.
A sintaxe comum JavaScript para usá-lo se parece muito com isto:
Exemplo
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); Tente você mesmo " Criando um objeto XMLHttpRequest
A primeira linha no exemplo acima cria um objet XMLHttpRequest:
var xhttp = new XMLHttpRequest();
O evento onreadystatechange
A propriedade readyState detém o status do XMLHttpRequest.
O evento onreadystatechange é acionado toda vez que as mudanças readyState.
Durante um pedido do servidor, o readyState muda de 0 a 4:
0: pedido não inicializado
1: conexão do servidor estabelecida
2: pedido recebido
3: solicitação de processamento
4: solicitar acabado e de resposta está pronto
Na propriedade onreadystatechange, especifique uma função a ser executada quando o readyState muda:
xhttp.onreadystatechange = function()
Quando readyState é 4 eo estado é de 200, a resposta está pronta:
if (xhttp.readyState == 4 && xhttp.status == 200)
Propriedades XMLHttpRequest e Métodos
| Método | Descrição |
|---|---|
| new XMLHttpRequest() | Cria um novo objeto XMLHttpRequest |
| open( method, url, async ) | Especifica o tipo de pedido method : o tipo de solicitação: GET ou POST url : o local do arquivo async : true (asynchronous) ou falso (synchronous) |
| send() | Envia uma solicitação para o servidor (used for GET) |
| send( string ) | Envia uma série pedido para o servidor (used for POST) |
| onreadystatechange | A função a ser chamada quando o ReadyState propriedade alterações |
| readyState | O status do XMLHttpRequest 0: pedido não inicializado 1: conexão do servidor estabelecida 2: pedido recebido 3: solicitação de processamento 4: solicitar acabado e de resposta está pronto |
| status | 200: OK 404 Página Não Encontrada |
| responseText | Os dados de resposta como uma string |
| responseXML | Os dados de resposta como dados XML |
Acesso entre domínios
Por razões de segurança, os navegadores modernos não permitem o acesso entre domínios.
Isto significa que tanto a página da web e o ficheiro XML que tenta carregar, deve estar localizado no mesmo servidor.
Os exemplos w3ii todos os arquivos Open XML localizados no domínio w3ii.
Se você quiser usar o exemplo acima em uma de suas próprias páginas web, os arquivos XML carregadas deve estar localizado 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 cadeia de texto, use a propriedade responseText:
A propriedade responseXML
A propriedade responseXML retorna a resposta como um objeto DOM XML.
Se você quiser usar a resposta como um objeto DOM XML, use a propriedade responseXML:
Exemplo
Solicitar o arquivo cd_catalog.xml e usar a resposta como um objeto DOM XML:
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; Tente você mesmo " GET ou POST?
GET é mais simples e mais rápido do que o POST, e pode ser utilizado na maioria dos casos.
No entanto, sempre use pedidos POST quando:
- Um arquivo em cache não é uma opção (update a file or database on the server)
- O envio de uma grande quantidade de dados para o servidor (POST não tem limitações de tamanho)
- Envio de entrada do usuário (which can contain unknown characters) , POST é mais robusto e seguro de GET
O url - Um arquivo em um servidor
O parâmetro url do open() método, é 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 pode executar ações no servidor antes de enviar a resposta de volta).
Asynchronous - Verdadeiro ou Falso?
Para enviar a solicitação de forma assíncrona, o parâmetro assíncrono do open() método tem de ser definida como true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Envio de forma assíncrona solicita é uma grande melhoria para desenvolvedores web. Muitas das tarefas executadas no servidor são muito demorado.
Enviando de forma assíncrona, o JavaScript não tem que esperar a resposta do servidor, mas pode:
- executar outros scripts enquanto aguarda a resposta do servidor
- lidar com a resposta quando a resposta está pronta
Async = true
Ao usar async = true, especifique uma função a ser executada quando a resposta está pronto no evento onreadystatechange:
Exemplo
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); Tente você mesmo " Async = false
Para usar assíncrono = false, altere o terceiro parâmetro na open() método para false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Usando assíncrono = false não é recomendado, mas para alguns pequenos pedidos este pode ser ok.
Lembre-se de que o JavaScript não vai continuar a executar, até que a resposta do servidor está pronto. Se o servidor estiver ocupado ou lenta, o aplicativo irá travar ou parar.
Note: Quando você usa assíncrono = false, não escreva uma função onreadystatechange - basta colocar o código após o send() declaração:
Exemplo
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Tente você mesmo " Analisador XML
Todos os navegadores modernos têm um parser XML embutido.
O XML Document Object Model (the XML DOM) contém uma grande quantidade de métodos para acessar e editar XML.
No entanto, antes de um documento XML pode ser acessado, ele deve ser carregado em um objeto DOM XML.
Um analisador XML pode ler texto simples e convertê-lo em um objeto DOM XML.
Analisar uma cadeia de texto
Este exemplo analisa uma seqüência de texto em um objeto DOM XML, e extrai a informação a partir 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>
Tente você mesmo " Navegadores antigos (IE5 and IE6)
Versões antigas do Internet Explorer (IE5 and IE6) não suportam o objeto XMLHttpRequest.
Para lidar com IE5 e IE6, verifique se o navegador suporta o objeto XMLHttpRequest, ou então criar um ActiveXObject:
Exemplo
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Tente você mesmo " Versões antigas do Internet Explorer (IE5 and IE6) não suportam o objeto DOMParser.
Para lidar com IE5 e IE6, verifique se o navegador suporta o objeto DOMParser, ou então criar 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);
}
Tente você mesmo " 
mais Exemplos
Recuperar informações de cabeçalho com getAllResponseHeaders()
Recuperar informações de cabeçalho de um recurso (file) .
Recuperar informações específicas cabeçalho com getResponseHeader()
Recuperar informações de cabeçalho específico de um recurso (file) .
Recuperar o conteúdo de um arquivo ASP
Como uma página web pode se comunicar com um servidor web, enquanto um tipo de usuário caracteres em um campo de entrada.
Recuperar o conteúdo de um banco de dados
Como uma página web pode buscar informações de um banco de dados com o objeto XMLHttpRequest.
Recuperar o conteúdo de um arquivo XML
Criar um XMLHttpRequest para recuperar dados de um arquivo XML e exibir os dados em uma tabela HTML.