Aulas
Disciplinas

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

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

Exemplos

Antes de apresentar os detalhes da programação AJAX serão apresentados dois exemplos simples que visam tornar claro as diferenças e vantagens do novo modelo proposto. O primeiro exemplo utiliza os meios tradicionais: dados sendo submetidos para o servidor utilizando um formulário. O segundo é basicamente a reconstrução de parte do primeiro utilizando AJAX.

 

Exemplo 1

Como pode ser observado nas Figuras 3 e 4, esse exemplo é composto por uma página com apenas duas listas HTML. A primeira, contendo categorias pré-definidas de livros e a segunda contendo os respectivos livros da categoria selecionada.

 

Principais vantagens e diferenças do modelo AJAX

  1. O navegador passa a não ser mais apenas um “terminal burro”, divide a responsabilidade com o servidor. Criando assim um cenário duplamente favorável: ao mesmo tempo em que o servidor é menos exigido, o cliente também ganha uma aplicação mais rica e interativa.
  2. O usuário passa a não mais precisar ficar esperando entre cada interação com o servidor: através do AJAX, o navegador ganhou meios de se comunicar de forma assíncrona. Enquanto o navegador e o servidor trocam dados em segundo plano (em background), o usuário pode continuar interagindo com a página. Por exemplo, na Figura 2, enquanto o navegador estiver buscando a lista de estados do país selecionado, o usuário já pode ir preenchendo o campo Endereço.
  3. Existe separação entre o código da interface gráfica e os dados. Logo, existem requisições distintas para cada finalidade: nem toda resposta do servidor é uma página HTML. Como veremos no decorrer desse documento, a resposta pode conter apenas dados (ex: lista de estados de um país) em XML, JSON ou ainda texto puro.
  4. Devido ao volume dos dados trocados em cada interação com o servidor ser bem menor no modelo AJAX, o novo modelo apresenta uma performance bastante superior ao modelo típico.
Figura 03 - Antes de selecionar uma categoria.
Antes de selecionar uma categoria.

 

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

A seguir veremos um exemplo de requisição AJAX envolvendo Livros e Categorias, onde são trocados dados entre o navegador e o servidor desde a primeira requisição para obter a página da Figura 3 até o segundo momento após o usuário clicar em uma categoria e disparar uma nova requisição para recuperar os respectivos livros (Figura 4).

Requisição (para obter a página da Figura 3):

A seguinte requisição é feita no servidor (ex: digitando-se a URL no navegador) para acessar a página inicial:

http://localhost:8080/AulasAjax1/Controlador

A resposta retornada é a página HTML descrita na Listagem 1.

AخA
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 Padrão</title>
7
</head>
8
<body>
9
    <form action="/AulasAjax1/Controlador">
10
       <p>
11
       <select name="categoria" size="5" onchange="submit()">
12
         <option value="ficcao">ficcao</option>
13
         <option value="nao-ficcao">nao-ficcao</option>
14
         <option value="informatica">informatica</option>
15
         <option value="auto-ajuda">auto-ajuda</option>
16
       </select>
17
       <select name="livro" size="5" style="width: 200px;">
18
       </select>
19
       </p>
20
    </form>
21
</body>
22
</html>
Listagem 1 - Primeira página HTML retornada do exemplo 1.

Requisição (para obter a página da Figura 4):

Ao clicar em uma das categorias listadas, a seguinte requisição é feita no servidor:

http://localhost:8080/AulasAjax1/Controlador?categoria=auto-ajuda

Resposta:

38
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 Padrão</title>
7
</head>
8
<body>
9
<form action="/AulasAjax1/Controlador">
10
    <p>
11
    <select name="categoria" size="5" onchange="submit()">
12
       <option value="ficcao">ficcao</option>
13
       <option value="nao-ficcao">nao-ficcao</option>
14
       <option value="informatica">informatica</option>
15
       <option value="auto-ajuda">auto-ajuda</option>
16
    </select>
17
    <select name="livro" size="5" style="width: 200px;">
18
       <option value="O que se passa na cabeÁa dos cachorros">O que
19
       se passa na cabeÁa dos cachorros</option>
20
       <option value="Transformando suor em ouro">Transformando suor
21
       em ouro</option>
22
       <option value="O monge e o executivo">O monge e o executivo</option>
23
       <option value="O verdadeiro poder">O verdadeiro poder</option>
24
       <option value="Qual È a tua obra? - Inquietacoes propositivas">Qual
25
       È a tua obra? - Inquietacoes propositivas</option>
26
       <option value="Fora de serie- Outliers">Fora de serie-
27
       Outliers</option>
28
      <option value="O futuro hoje">O futuro hoje</option>
29
       <option value="PMBOK - Guia do conjunto de conhecimentos">PMBOK
30
       - Guia do conjunto de conhecimentos</option>
31
       <option value="Os 7 h·bitos das pessoas altamente eficazes">Os
32
       7 h·bitos das pessoas altamente eficazes</option>
33
       <option value="Faça como Steve Jobs">Faça como Steve Jobs</option>
34
    </select>
35
    </p>
36
</form>
37
</body>
38
</html>
Listagem 2 - Segunda página HTML retornada do exemplo 1.

Notas

  1. Observe no exemplo acima que, mesmo já possuindo praticamente todo código da interface gráfica (faltava apenas o que seria preenchido na segunda lista), a resposta do servidor foi uma nova página completa, repetindo quase toda informação da página inicial. Excetuando-se o trecho das linhas 17 a 34 (<select> preenchido), a primeira e a segunda resposta são idênticas. Tal fato ocorre, pois, neste modelo não existe separação entre o código da interface e os dados.
  2. Além de gerar um tráfego de dados maior que o necessário e uma espera maior para o usuário voltar a poder interagir com a página, o fato de o navegador carregar uma nova página causa um efeito visual ruim de recarregamento de tela (esse efeito é ainda mais perceptível em páginas mais complexas).
[A] Anterior
4/14
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados