Aulas
Disciplinas

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

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

Código do servidor

E como fica o código do servidor? O código do servidor é formado pelos seguintes componentes:

  1. /AulasAjax1/src/exemplos/ajax/Controlador.java :

Classe java responsável por determinar o fluxo de navegação e colocar determinadas variáveis em memória que serão utilizadas pelas páginas JSP.

  1. /AulasAjax1/WebContent/modelo_padrao.jsp:

Página JSP responsável por gerar a página HTML.

play_circle_filled
Vídeo 05 - Requisição

Para que o controlador funcione você precisa baixar o arquivo: <http://repo1.maven.org/maven2/jstl/jstl/1.2/jstl-1.2.jar> e adicionar na pasta WEB-INF/lib.

Vejamos a seguir cada um desses componentes.

/AulasAjax1/src/exemplos/ajax/Controlador.java:
​x
1
package exemplos.ajax;
2
​
3
import java.io.IOException;
4
​
5
import javax.servlet.ServletException;
6
import javax.servlet.annotation.WebServlet;
7
import javax.servlet.http.HttpServlet;
8
import javax.servlet.http.HttpServletRequest;
9
import javax.servlet.http.HttpServletResponse;
10
​
11
/**
12
  * Controlador do sistema
13
  */
14
@WebServlet({"/Controlador/Ajax", "/Controlador/Ajax/Categoria", "/Controlador/Ajax/LivroInfo"})
15
public class Controlador extends HttpServlet {
16
​
17
   private static final String CATEGORIA_FICCAO = "ficcao";
18
   private static final String CATEGORIA_NAO_FICCAO = "nao-ficcao";
19
   private static final String CATEGORIA_INFORMATICA = "informatica";
20
   private static final String CATEGORIA_AUTO_AJUDA = "auto-ajuda";
21
​
22
   private static final String[] CATEGORIAS = { CATEGORIA_FICCAO,
23
       CATEGORIA_NAO_FICCAO, CATEGORIA_INFORMATICA,
24
       CATEGORIA_AUTO_AJUDA };
25
​
26
   private static final String[] LIVROS_FICCAO = { "A cabana",
27
       "A Ilha sob o mar", "Querido John", "Fallen", "A ultima música",
28
       "Caminhos da lei", "Os homens que não amavam as mulheres",
29
       "A ilusão da alma", "Amante desperto", "O castelo dos Pirineus" };
30
​
31
   private static final String[] LIVROS_NAO_FICCAO = { "1822", "Comprometida",
32
       "Comer, Rezar, Amar", "Agape", "Incríveis passatempos matematicos",
33
       "Brasil - uma historia", "Nosso lar", "O Aleph", "Aforismos" };
34
​
35
   private static final String[] LIVROS_INFORMATICA = {
36
       "VBA e macros para Microsoft Office Excel 2007",
37
       "Java como programar", "Apresentação Zen",
38
       "UML2 - Uma abordagem pratica", "O mítico homem-mês",
39
       "Revis architecture 2010",
40
       "JQuery - A biblioteca do programador Javascript",
41
       "CCENT/CCNA ICND1", "Analise de pontos de função",
42
       "Formulas e funções com Microsoft Office Excel 2007", };
43
​
44
   private static final String[] LIVROS_AUTO_AJUDA = {
45
       "O que se passa na cabeça dos cachorros",
46
       "Transformando suor em ouro", "O monge e o executivo",
47
       "O verdadeiro poder",
48
       "Qual é a tua obra? - Inquietacoes propositivas",
49
       "Fora de serie- Outliers", "O futuro hoje",
50
       "PMBOK - Guia do conjunto de conhecimentos",
51
       "Os 7 hábitos das pessoas altamente eficazes",
52
       "Faça como Steve Jobs", };
53
​
54
   private static final long serialVersionUID = 1L;
55
​
56
   /**
57
    * Metodo que trata/recebe as requisicoes do tipo POST
58
    *
59
    * @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest,
60
    *      javax.servlet.http.HttpServletResponse)
61
    */
62
   @Override
63
   protected void doPost(HttpServletRequest request,
64
       HttpServletResponse response) throws ServletException, IOException {
65
​
66
     doGet(request, response);
67
   }
68
​
69
   /**
70
    * Metodo que trata/recebe as requisicoes do tipo GET
71
    *
72
    * @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest,
73
    *      javax.servlet.http.HttpServletResponse)
74
    */
75
   @Override
76
   protected void doGet(HttpServletRequest request,
77
       HttpServletResponse response) throws ServletException, IOException {
78
​
79
     String acaoSelecionada = request.getServletPath();
80
     if (acaoSelecionada.equalsIgnoreCase("/Controlador/Ajax")) {
81
​
82
        enviarPaginaPadrao(request, response);
83
​
84
     } else if (acaoSelecionada.equalsIgnoreCase("/Controlador/Ajax/Categoria")) {
85
​
86
       enviarNomeLivros(request, response);
87
​
88
     } else if (acaoSelecionada.equalsIgnoreCase("/Controlador/Ajax/LivroInfo")) {
89
​
90
       enviarInformacoesLivro(request, response);
91
​
92
     }
93
   }
94
​
95
   private void enviarPaginaPadrao(HttpServletRequest request,
96
           HttpServletResponse response) throws ServletException, IOException {
97
​
98
     salvarCategoriasReq(request);
99
     salvarLivrosReq(request);
100
​
101
     request.getRequestDispatcher("/modelo_padrao.jsp").forward(request,
102
         response);
103
   }
104
​
105
   private void enviarNomeLivros(HttpServletRequest request,
106
       HttpServletResponse response) throws ServletException, IOException {
107
​
108
        String category = request.getParameter("categoria");
109
        String[] livros = null;
110
        if (category != null) {
111
​
112
          if (category.equals(CATEGORIA_FICCAO)) {
113
            livros = LIVROS_FICCAO;
114
          } else if (category.equals(CATEGORIA_NAO_FICCAO)) {
115
            livros = LIVROS_NAO_FICCAO;
116
          } else if (category.equals(CATEGORIA_INFORMATICA)) {
117
            livros = LIVROS_INFORMATICA;
118
          } else if (category.equals(CATEGORIA_AUTO_AJUDA)) {
119
           livros = LIVROS_AUTO_AJUDA;
120
          }
121
        }
122
​
123
        String resp = "";
124
        for (int i = 0; i < livros.length; i++) {
125
          resp += livros[i] + ";";
126
        }
127
​
128
        response.setContentType("text/html; charset=ISO-8859-1");
129
        response.getWriter().write(resp);
130
        response.flushBuffer();
131
   }
132
​
133
   private void enviarInformacoesLivro(HttpServletRequest request,
134
       HttpServletResponse response) throws IOException {
135
​
136
     String livro = request.getParameter("livro");
137
     if (livro == null) {
138
       livro = "null";
139
     }
140
​
141
     response.setContentType("text/html; charset=ISO-8859-1");
142
     response.getWriter().write("Essas sao as informacoes sobre o livro " + livro);
143
     response.flushBuffer();
144
   }
145
​
146
​
147
​
148
   private void salvarCategoriasReq(HttpServletRequest request) {
149
     request.setAttribute("categorias", CATEGORIAS);
150
   }
151
​
152
   private void salvarLivrosReq(HttpServletRequest request) {
153
     String category = request.getParameter("categoria");
154
     if (category != null) {
155
​
156
       if (category.equals(CATEGORIA_FICCAO)) {
157
         request.setAttribute("livros", LIVROS_FICCAO);
158
       } else if (category.equals(CATEGORIA_NAO_FICCAO)) {
159
         request.setAttribute("livros", LIVROS_NAO_FICCAO);
160
       } else if (category.equals(CATEGORIA_INFORMATICA)) {
161
         request.setAttribute("livros", LIVROS_INFORMATICA);
162
       } else if (category.equals(CATEGORIA_AUTO_AJUDA)) {
163
         request.setAttribute("livros", LIVROS_AUTO_AJUDA);
164
       }
165
     }
166
   }
167
}

 

A tabela a seguir apresenta uma descrição dos principais métodos da classe Controlador.

Método Descrição
doPost Recebe as requisições do tipo POST e encaminha para ser tratada pelo método doGet.
doGet Recebe as requisições do tipo GET e, baseado na URL chamada (usando o request.getServletPath()) definir a acaoSelecionada.
enviarInformacoesLivro Retorna informações do livro informado através do parâmetro "livro" (utilizado pela página modelo_ajax.jsp).
enviarPaginaPadrao Redireciona o navegador para a página "/AulasAjax1/WebContent/modelo_padrao.jsp"
salvarCategoriasReq Salva a variável "categorias" contendo as categorias pré-definidas no escopo da requisição (variável utilizada em todas as páginas para popular a lista de categorias).
salvarLivrosReq Salva a variável "livros" contendo os livros da categoria selecionada no escopo da requisição (variável utilizada pela página modelo_padrao.jsp para popular a lista de livros).
enviarNomeLivros Retorna os nomes dos livros da categoria selecionada através do parâmetro categoria (utilizado pela página modelo_ajax.jsp).

 

/AulasAjax1/WebContent/modelo_padrao.jsp:

Veja a seguir o código da página JSP.

84
1
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
2
pageEncoding="ISO-8859-1"%>
3
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
4
5
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
6
"http://www.w3.org/TR/html4/loose.dtd">
7
​
8
<html>
9
<head>
10
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
11
<title>Modelo Ajax 2 (POST)</title>
12
</head>
13
<body>
14
​
15
<script type="text/javascript">
16
​
17
​
18
function buscarLivros() {
19
​
20
   var ajaxReq = new XMLHttpRequest();
21
   var url = "/AulasAjax1/Controlador/Ajax/Categoria";
22
   var data = "categoria=" + document.getElementById("campoCategoria").value;
23
24
   ajaxReq.onreadystatechange = function() {
25
     if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
26
       var text = ajaxReq.responseText;
27
       var livros = text.split(';');
28
       var campoLivro = document.getElementById("campoLivro");
29
       campoLivro.length = 0;
30
       for(var i=0; i<livros.length; i++){
31
         if(livros[i].length>0){
32
           campoLivro.options[campoLivro.length] = new Option(livros[i], livros[i]);
33
         }
34
       }
35
     }
36
   };
37
​
38
   ajaxReq.open("POST", url, true);
39
   ajaxReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
40
   ajaxReq.send(data);
41
}
42
​
43
function buscarInfoLivro() {
44
45
   var ajaxReq = new XMLHttpRequest();
46
   var url = "/AulasAjax1/Controlador/Ajax/LivroInfo";
47
   var data = "livro=" + document.getElementById("campoLivro").value;
48
49
   ajaxReq.onreadystatechange = function() {
50
     if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
51
       var campoInfoLivro = document.getElementById("campoInfoLivro");
52
       campoInfoLivro.value = ajaxReq.responseText;
53
     }
54
   };
55
​
56
   ajaxReq.open("POST", url, true);
57
   ajaxReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
58
   ajaxReq.send(data);
59
}
60
61
​
62
</script>
63
​
64
<p>
65
<select id="campoCategoria" name="categoria" size="5"
66
onchange="buscarLivros()">
67
<c:forEach var="c" items="${categorias}">
68
   <option value="${c}">${c}</option>
69
</c:forEach>
70
</select>
71
​
72
​
73
<select id="campoLivro" name="livro" size="5" style="width: 200px;"
74
onchange="buscarInfoLivro()">
75
</select>
76
​
77
</p>
78
​
79
<textarea id="campoInfoLivro" rows="5" cols="40">
80
</textarea>
81
82
​
83
</body>
84
</html>

Para ver a página basta acessar a URL http://localhost:8080/AulasAjax1/Controlador/Ajax e ao clicar em uma categoria você verá a lista de livros dessa categoria.Ao clicar em um livro você verá suas informações. Repare que somente os dados necessários são enviados por Ajax do servidor para o navegador, não sendo necessário recarregar toda a página.

Curiosidade

Aponte seu navegador para o mesmo endereço que a requisição em AJAX faz e veja o que aparece no seu navegador.

Endereço: <http://localhost:8080/AulasAjax1/Controlador/Ajax/Categoria?categoria=ficcao>/p>

Resultado: 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;

Repare que o resultado é somente um texto com o nome dos livros separado por “;”, e não um HTML completo. Esse resultado é retornado por AJAX e em utilizando Javascript o navegador consegue separar o nome dos livros e popular as opções do SELECT com os livros visualmente.

Chegamos ao fim da aula de hoje, agora você é capaz de entender e desenvolver um código AJAX para permitir uma melhor interatividade na sua página web, além de torná-la mais rápida e leve para atualizar dados vindos do servidor.

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

Sumário

Versão 5.3 - Todos os Direitos reservados