Tópicos avançados em internet B Carlos Oberdan Rolim Ciência da Computação.

Apresentação em tema: "Tópicos avançados em internet B Carlos Oberdan Rolim Ciência da Computação."— Transcrição da apresentação:

1 Tópicos avançados em internet B Carlos Oberdan Rolim Ciência da Computação

2 Objeto XMLHttpRequest

3 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

4 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

5 Criação do objeto Em navagadores modernos XMLHttpRequestObject = new XMLHttpRequest(); Em navegadores mais antigos (IE 5 usar ActiveX) Exemplo de criação do objeto

6 Propriedades do objeto

7 Métodos do objeto

8 Abrindo uma conexão Usar o método open Parâmetros do método

9 Manipulando a resposta do servidor Métodos definido em onreadystatechange é chamado cada vez que é efetuada alteração no estado da requisição

10 Verificação de estado Para verificar como está a requisição necessário verificar duas propriedades: readState Status

11 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

12 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

13 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

14 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

15 Efetuando requisição Finalmente efetuamos a requisição com o métodos send

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