Desmistificando o AJAX – Parte V

Raphael Paiva

raphael@sena.com.br

 

Mãos na massa

 

ServletAjax que receberá as requisições das páginas e retornará um XML como resposta

1.import javax.servlet.*;

2.import javax.servlet.http.*;

3.public class ServletAjax extends HttpServlet {

4. protected void service(HttpServletRequest request, HttpServletResponse response)

5.                                                                         throws ServletException, IOException {

6.          String uf = request.getParameter("uf");

7.          String retorno = "<?xml version='1.0' ?><root>";

8.          if(uf.equalsIgnoreCase("CE")){

9.                retorno +=  "<estado>"+

10.                                      "<cidade nome='Caucaia'>"+

11.                                  "<javaneses>15</javaneses>"+

12.                               "</cidade>"+

13.                               "<cidade nome='Fortaleza>"+

14.                                  "<javaneses>400</javaneses>"+

15.                               "</cidade>"+

16.                               "<cidade nome='Sobral'>"+

17.                                  "<javaneses>1</javaneses>"+

18.                               "</cidade>"+

19.                            "</estado>";                                     

20.         }else if(uf.equalsIgnoreCase("PB")){

21.               retorno +=  "<estado>"+

22.                                "<cidade nome='João Pessoa'>"+

23.                             "<javaneses>200</javaneses>"+

24.                           "</cidade>"+

25.                            "</estado>";                                      

26.         }else if(uf.equalsIgnoreCase("PE")){

27.               retorno +=  "<estado>"+

28.                          "<cidade nome='Recife'>"+

29.                              "<javaneses>550</javaneses>"+

30.                          "</cidade>"+

31.                                 "<cidade nome='Olinda'>"+                              32.                                        "<javaneses>30</javaneses>"+

33.                           "</cidade>"+

34.                            "</estado>";

35.         }

36.         retorno += "</root>";

37.         response.setContentType("text/xml;charset=UTF-8");

38.         response.setHeader("Cache-Control", "no-cache");

39.         response.getWriter().write(retorno);

40.   }

41.}

 

O código do SerletAjax acima espera receber como parâmetro (como visto na linha 6) a UF desejada pelo usuário, através dela faz-se uma pequena lógica para retornar o XML resultante.

 

Perceba que a linha 37 é MUITO importante, sem ela, frases com caracteres com acento, por exemplo, não seriam reconhecidas; no nosso caso, João Pessoa iria para o browser como Jo?o Pessoa.

 

Logo abaixo, veremos como ficará a tela do nosso jsp:

 

desmajaxrpfig03.jpg

 

E adiante, o fonte completo da jsp. Note que o javascript, a chamada ao AJAX e o HTML estão na mesma página apenas para fins didáticos:

 

JSP da página de escolha de cidades

1.<html>

2.<head>

3.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

4.<script type="text/JavaScript">

5.var req;

6.var isIE;

7.function initRequest(url) {

8.    if (window.XMLHttpRequest) {

9.        req = new XMLHttpRequest();

10.    } else if (window.ActiveXObject) {

11.        isIE = true;

12.        req = new ActiveXObject("Microsoft.XMLHTTP");

13.    }

14.}

15.function atualizaCidades(uf){

16.   if(uf != ''){

17.      var url = "ajax?uf="+escape(uf);

18.       initRequest(url);

19.       req.onreadystatechange = processRequest;

20.       req.open("GET", url, true);

21.         req.send(null);

22.   }else{

23.       var html = "<SELECT NAME='Cidades'><OPTION value=''>----</OPTION></SELECT>";

24.       document.getElementById("DivCidades").innerHTML = html;

25.   }

26.}

27.function processRequest() {

28.    if (req.readyState == 4) {

29.        if (req.status == 200) {

30.         var xml = req.responseXML;

31.         var html = "<SELECT NAME='Cidades' onChange='if(this.value!=\"\"){alert(\"Javaneses = 32.\"+this.value);}'><OPTION value=''>--Selecione Cidade--</OPTION>";

33.            var documento = xml.childNodes[0].nodeName;            

34.         var estados = xml.getElementsByTagName("estado");

35.         for(i = 0; i < estados.length; i++){

36.               var cidades = estados[i].getElementsByTagName("cidade");

37.               for(j = 0; j < cidades.length; j++){

38.                     var nomeCidade = cidades[j].getAttribute("nome");                    39.   var javaneses = cidades[j].getElementsByTagName("javaneses").item(0).firstChild.data;

40.                     html += "<OPTION value='"+javaneses+"'>"+nomeCidade+"</OPTION>";

41.               }

42.         }

43.         html += "</SELECT>";

44.         document.getElementById("DivCidades").innerHTML = html;

45.        }

46.    }

47.}

48.</script>

49.</head>

50.<body>

51.<form method="post" name="frm">

52.<h2>Tutorial de Ajax - Cejug 4Java</h2>

53.<h4>Estado:</h4>

54.<SELECT NAME='Estados' onchange="atualizaCidades(this.value);">

55.   <OPTION value=''>--Selecione--</OPTION>

56.   <OPTION value='CE'>Ceará</OPTION>

57.   <OPTION value='PB'>Paraíba</OPTION>

58.   <OPTION value='PE'>Pernambuco</OPTION>

59.</SELECT>

60.<h4>Cidade:</h4>

61.<div id="DivCidades" style="position: static;">

62.<SELECT NAME='Cidades'><OPTION value=''>----</OPTION></SELECT>

63.</div>

64.</form>

65.</body>

66.</html>