Objeto XMLHttpRequest
- Página anterior Clonar nó DOM
- Próxima página Índice do manual DOM
O objeto XMLHttpRequest oferece métodos para comunicação com o servidor após o carregamento da página.
O que é o objeto XMLHttpRequest?
O objeto XMLHttpRequest éO sonho do desenvolvedorporque você pode:
- Atualizar a página sem recarregar a página
- Fazer uma solicitação de dados ao servidor após a carga da página
- Receber dados do servidor após a carga da página
- Enviar dados para o servidor em segundo plano
Todos os navegadores modernos suportam o objeto XMLHttpRequest.
Exemplo:Realizar comunicação XML HTTP ao digitar texto com o servidor.
Criar objeto XMLHttpRequest
Com uma linha simples de código JavaScript, podemos criar um objeto XMLHttpRequest.
Em todos os navegadores modernos (inclusive IE 7):
xmlhttp=new XMLHttpRequest()
No Internet Explorer 5 e 6:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
Exemplo
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// código para todos os novos navegadores}
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// código para IE5 e IE6}
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Seu navegador não suporta XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "carregado"}
if (xmlhttp.status==200)
{// 200 = OK}
// ...nosso código aqui...
}
else
{
alert("Problema ao recuperar dados XML");
}
}
}
</script>
Notas:onreadystatechange é um manipulador de eventos. Seu valor (state_Change) é o nome de uma função que é acionada quando o estado do objeto XMLHttpRequest muda. O estado varia de 0 (inicializado) a 4 (completo). Somente quando o estado for 4, executamos o código.
Por que usar Async=true ?
Nossos exemplos usam "true" no terceiro parâmetro do open().
Esse parâmetro determina se a solicitação é processada de forma assíncrona.
True indica que o script continuará a executar após o método send(), sem esperar por uma resposta do servidor.
O evento onreadystatechange complexifica o código. Mas é a maneira mais segura de evitar que o código pare sem obter uma resposta do servidor.
Ao definir esse parâmetro como "false", você pode omitir o código adicional onreadystatechange. Se a execução do restante do código não importa quando a solicitação falhar, você pode usar esse parâmetro.
Mais exemplos
Carregar um arquivo textfile em um elemento div usando XML HTTP
Realizar uma solicitação HEAD usando XML HTTP
XML / ASP
Você também pode abrir o documento XML e enviá-lo para uma página ASP no servidor, analisar essa solicitação e, em seguida, retornar o resultado.
<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
//{ código para IE7, Firefox, Opera, etc.
xmlHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
//{ código para IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp!=null)
{
xmlHttp.open("GET", "note.xml", false);
xmlHttp.send(null);
xmlDoc=xmlHttp.responseText;
xmlHttp.open("POST", "demo_dom_http.asp", false);
xmlHttp.send(xmlDoc);
document.write(xmlHttp.responseText);
}
else
{
alert("Seu navegador não suporta XMLHTTP.");
}
</script>
</body>
</html>
Página ASP, escrita em VBScript:
<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
if x.NodeName = "to" then name=x.text
next
response.write(name)
%>
Passe o resultado de volta ao cliente usando a propriedade response.write.
O objeto XMLHttpRequest é um padrão do W3C?
Nenhuma recomendação padrão do W3C define o objeto XMLHttpRequest.
No entanto, a especificação "Load and Save" do W3C DOM Level 3 contém algumas funcionalidades semelhantes, mas ainda não há nenhum navegador que as implemente.
- Página anterior Clonar nó DOM
- Próxima página Índice do manual DOM
