dê seu feedback
post favorito
Desmistificando o AJAX – Parte V
Continuando a série de artigos sobre Ajax - Mão na massa...
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>
0 COMENTÁRIO
Estudo comparativo entre banco de dados IBM Informix e Microsoft SQL
Space do autor
0
0
Conheça os planos de créditos DevMedia e visualize esse post agora mesmo!