Desmistificando o AJAX – Parte V
Continuando a série de artigos sobre Ajax - Mão na massa...
Desmistificando o AJAX – Parte V
Raphael Paiva
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:
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>
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo