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.
Antes de 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.

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:

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).

Versão 5.3 - Todos os Direitos reservados