Material Didático

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

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.

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Modelo Ajax</title>
</head>
<body>

ajaxReq.open("GET", url, true);
	   ajaxReq.send();
	}
	-->
	</script>

<p>
	<select id="campoCategoria" name="categoria" size="5" onchange="send()">
	   <option value="ficcao">ficcao</option>
	   <option value="nao-ficcao">nao-ficcao</option>
	   <option value="informatica">informatica</option>
	   <option value="auto-ajuda">auto-ajuda</option>
	</select>
	<select id="campoLivro" name="livro" size="5" style="width: 200px;">
	</select>
	</p>

</body>
</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

A segunda resposta contém apenas dados, nada relativo à interface foi enviado novamente.
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.

Termo de uso

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

Exemplo 2

Notas

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