Tópicos avançados em
internet B
Carlos Oberdan Rolim
Ciência da Computação
Objeto XMLHttpRequest
O que é o objeto XMLHttpRequest ?
O objeto XMLHttpRequest proporciona uma forma de
comunicação com o servidor web após uma página ter sido
carregada
O objeto XMLHttpRequest é o “sonho do desenvolvedor”
pois permite::
Atualizar páginas com dados novos sem recarregar a página toda
Requisitar dados do servidor após a página ter sido carregada
Receber dados do servidor após a página ter sido carregada
Enviar dados para o servidor em background
O objeto XMLHttpRequest é suportado em todos os navegadores
modernos
Implementado inicialmente pela Microsoft em 1999 para o IE
Seqüência de operações
Típica seqüência de operações:
Criação de uma instância do objeto
Usar o objeto para fazer requisições assincronas ao servidor definindo
uma função de callback responsável por manipular a resposta do
servidor
Manipular a resposta do servidor com a função de callback
Criação do objeto
Em navagadores modernos
XMLHttpRequestObject = new XMLHttpRequest();
Em navegadores mais antigos (IE 5 usar ActiveX)
Exemplo de criação do objeto
Propriedades do objeto
Métodos do objeto
Abrindo uma conexão
Usar o método open
Parâmetros do método
Manipulando a resposta do servidor
Métodos definido em onreadystatechange é chamado cada vez que
é efetuada alteração no estado da requisição
Verificação de estado
Para verificar como está a requisição necessário
verificar duas propriedades:
readState
Status
Verificação de estado
Propriedade readState
4 estados definidos
3 primeiros auto-explicativos
Interactive é um estado onde a resposta foi
parcialmente recebida
Complete é quando a resposta é recebida
por completo
Verificação de estado
Propriedade status
Status do download do dados
Códigos de retorno
2XX - códigos de OK
3XX - recolocação/redireccionamento
4XX - Erro no cliente
5XX - Erro no servidor
Verificação de estado
Para verificar se a requisição foi recebida completamente verificar
se a propriedade readState é igual a 4 e se a propriedade status é
igual a 200
Obtendo os dados
Duas formas de obter os dados da resposta do servidor
Como texto através da propriedade responseText
Como xml através da propriedade responseXML
Efetuando requisição
Finalmente efetuamos a requisição com o métodos send
Exemplo completo
// create a request object
var xhr = new XMLHttpRequest();
// define the request properties
xhr.open("GET", "http://myURL/getJSON.php", true);
xhr.onreadystatechange = myHandler;
// define callback handler
xhr.send(null);
// send the request
function myHandler() {
// callback definition
if (xhr.readyState == 4) {
// response has been received
if (xhr.status != 404) {
var data=eval(‘(’ + xhr.responseText + ‘)’);
// invoke JS to manipulate the response
}
}
}