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", " 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 }