Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

arrow_back Aula 05 - AJAX: Interagindo com o Servidor de Maneira Assícrona

Exemplo 2 

Este exemplo é uma reconstrução do primeiro exemplo utilizando AJAX para recuperar os livros da categoria selecionada. O objetivo deste exemplo é apenas dar uma visão geral de como o AJAX funciona e quais as diferenças em relação ao modelo tradicional de programação Web. Cada um dos elementos expostos será explicado posteriormente, à medida que o modelo de programação AJAX for apresentado ao longo desta aula.

Figura 05 - Antes de selecionar uma categoria.
Antes de selecionar uma categoria.

 

Figura 06 - Após selecionar uma categoria.
Após selecionar uma categoria.

Observando as Figuras 5 e 6, podemos ter a falsa impressão que não existem diferenças visuais entre os dois modelos. No entanto, ao visualizar os exemplos em ação (rodando no browser), notaremos as diferenças: no exemplo que utiliza Ajax, a página não é recarregada. Apenas a lista de livros é atualizada, como acontece em aplicações que rodam no desktop. Como consequência da página não ser recarregada, podemos ver na segunda figura deste exemplo que, mesmo sem nenhum tratamento, o estado da página foi mantido (ex.: a categoria selecionada pelo usuário continua selecionada mesmo após carregar os respectivos livros).

De maneira análoga ao primeiro exemplo, seguem os dados da comunicação entre o navegador e o servidor.

Requisição enviada ao servidor para obter a página da Figura 5:

http://localhost:8080/AulasAjax1/Controlador/Ajax

A resposta do servidor é apresentada na Listagem 3.

​x
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2
"http://www.w3.org/TR/html4/loose.dtd">
3
<html>
4
<head>
5
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
6
    <title>Modelo Ajax</title>
7
</head>
8
<body>
9
​
10
    <script type="text/javascript">
11
    <!--
12
    function send() {
13
​
14
       var url = "/AulasAjax1/Controlador/Ajax/Categoria";
15
       var ajaxReq = new XMLHttpRequest();
16
       url += "?categoria=" + document.getElementById("campoCategoria").value;
17
18
       ajaxReq.onreadystatechange = function() {
19
         if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
20
           var text = ajaxReq.responseText;
21
           var livros = text.split(';');
22
           var campoLivro = document.getElementById("campoLivro");
23
           campoLivro.length = 0;
24
           for(var i=0; i<livros.length; i++){
25
             if(livros[i].length>0){
26
              campoLivro.options[campoLivro.length] = new Option(livros[i], livros[i]);
27
             }
28
           }
29
         }
30
       };
31
​
32
       ajaxReq.open("GET", url, true);
33
       ajaxReq.send();
34
    }
35
    -->
36
    </script>
37
​
38
    <p>
39
    <select id="campoCategoria" name="categoria" size="5" onchange="send()">
40
       <option value="ficcao">ficcao</option>
41
       <option value="nao-ficcao">nao-ficcao</option>
42
       <option value="informatica">informatica</option>
43
       <option value="auto-ajuda">auto-ajuda</option>
44
    </select>
45
    <select id="campoLivro" name="livro" size="5" style="width: 200px;">
46
    </select>
47
    </p>
48
​
49
</body>
50
</html>
Listagem 3 - Primeira página HTML retornada do exemplo 2.

Uma vez selecionada uma categoria, a seguinte requisição é enviada ao servidor para obter a página da Figura 6:

http://localhost:8080/AulasAjax1/Controlador/Ajax/Categoria?categoria=ficcao

A resposta dessa requisição, porém, não é mais um HTML, mas apenas o que deve ser alterado no HTML, ou seja, a lista de livros:

A cabana;
A Ilha sob o mar;
Querido John;
Fallen;
A ultima música;
Caminhos da lei;
Os homens que não amavam as mulheres;
A ilusão da alma;
Amante desperto;
O castelo dos Pirineus.

Notas

  1. A segunda resposta contém apenas dados, nada relativo à interface foi enviado novamente.
  2. Como dito anteriormente, AJAX não necessariamente requer XML (ver a segunda resposta do segundo exemplo).

Antes de você implementar o Exemplo 2, vamos entender o código do AJAX que foi apresentado.

[A] Anterior
6/14
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados