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