JSP Ajax

2 respostas
R

Tenho um código de exmplo usando ajax, atualizando um combo de cidades para estados como segue abaixo:

Minha Dao
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class ClientesDAO {
    
    public static ClientesDAO instance = new ClientesDAO();
    private Map bancoDados;
    private ClientesDAO() {
        bancoDados = new HashMap();
        bancoDados.put("MG",new String[]
        {"Belo Horizonte", "Uberaba", "Uberlandia"});
        bancoDados.put("RJ",new String[]
        {"Buzios", "Cabo Frio","Rio de Janeiro"});
        bancoDados.put("SP",new String[]
        {"Campinas", "Santos","São Paulo"});
    }
    
    public static ClientesDAO getInstance() {
        return instance;
    }
    
    public List getCidades(String estado) {
        String[] cidades = (String[]) bancoDados.get(estado);
        return Arrays.asList(cidades);
    }
}
Minha Servlet
import br.com.dao.ClientesDAO;
import java.io.*;
import java.util.Iterator;
import java.util.List;

import javax.servlet.*;
import javax.servlet.http.*;

public class CadastrarCliente extends HttpServlet {
    
    protected void processRequest(HttpServletRequest request,
            HttpServletResponse response)
            throws ServletException, IOException {
        String action = request.getParameter("action");
        if("preencherCidades".equals(action)) {
            String estado = request.getParameter("estado");
            //Leitura da lista de cidades do BD
            List cidades = ClientesDAO.getInstance().getCidades(estado);
            if(cidades.size() > 0) {
                response.setContentType("text/xml");
                PrintWriter out = response.getWriter();
                out.write("<?xml version='1.0' ?>");
                out.write("<cidades>");
                for (Iterator it = cidades.iterator(); it.hasNext();){
                    Object elem = (Object) it.next();
                    out.write("<cidade>"+elem+"</cidade>");
                }
                out.write("</cidades>");
            }
        } else {
            //Codigo para cadastro de cliente no banco
        }
        System.out.println("Finalizando servlet");
    }
    
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
    
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
}

Meu JSP

<html>
    <head>
        <title>Exemplo AJAX</title>
 
    <script type="text/javascript">
          var request;
  
          function sendRequest() {
  
          //Determina o estado selecionado
          combo = document.getElementById("estado");
          estado = combo.options[combo.selectedIndex].value;
  
          //Retorna quando nenhum estado for selecionado
          if(estado == "-1")
              return;
  
          //Monta a url de requisicao para o servidor
          url = "cadastrarCliente?action=preencherCidades&estado="
                + estado;
 
          //Inicializa o objeto XMLHttpRequest para o Mozilla
          if ( window.XMLHttpRequest ) {
              request = new XMLHttpRequest();
          }

         //Inicializa o objeto XMLHttpRequest para o Internet Explorer
          else if (window.ActiveXObject) {
              request = new ActiveXObject("Microsoft.XMLHTTP");
          }
  
          //determina a função para processamento da requisição
          request.onreadystatechange = processRequest;
  
          //configura a requisição
          request.open("GET",url,true);
  
          //envia a requisição
          request.send(null);
          }
  
          function processRequest() {
              //Verifica se a resposta  foi recebida por completo
              if(request.readyState == 4) {
              //Verifica se o status é OK
                  if(request.status == 200) {
                      //Faz a leitura do documento XML recebido
                      var response = request.responseXML;
                      var raiz =
                      response.getElementsByTagName("cidades").item(0);
                      var cidades = raiz.getElementsByTagName("cidade");
  
                      //Seleciona a caixa de selecao de cidades
                      var selectNode = document.getElementById("cidade");
  
                      //Apaga as opções atuais da caixa de seleção
                      selectNode.options.length = 0;
  
                      //preenche a caixa de opções com os valores recebidos
                      for(var i = 0; i < cidades.length; i++) {
                          var txtCidade = cidades.item(i).firstChild.data;
                          var option = new Option(txtCidade);
                          selectNode.add(option,null);
                      }
                  }
              }
          }
    </script>    
       </head>
    <body>
        <h1>Cadastro de Clientes</h1>
        <form action='<%=request.getContextPath()+"/cadastrarCliente"%>'
              method='post'>
            <fieldset><legend>Dados do cliente</legend>
                <table>
                    <tr>
                        <td><label for='nome'>Nome:</label></td>
                        <td colspan='3'>
                            <input name='nome' id='nome' type='text'
                                   size='75' maxlength='255'>
                        </td>
                    </tr>
                    <tr>
                        <td><label for='telefone'>Telefone: (0000-0000)
                            </label>
                        </td>
                        <td><input name='telefone' id='telefone'
                                       type='text' size='16'>
                        </td>
                        <td><label for='email'>e-mail:</label>
                        </td>
                        <td><input name='email' id='email' type='text'
                                       size='37'>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend></legend>
                <table>
                    <tr>
                        <td><label for='endereco'>Rua/Av:</label></td>
                        <td><input name='rua' id='rua' type='text'
                                       size='40' maxlength='255'>
                        </td>
                        <td><label for='numero'>Número:</label></td>
                        <td><input name='numero' id='numero' type='text'
                                       size='8' maxlength='5'>
                        </td>
                    </tr>
                    <tr>
                        <td><label for='bairro'>Bairro:</label></td>
                        <td><input name='bairro' id='bairro' type='text'>
                            
                        </td>
                        <td><label for='cep'>CEP (00000-000):</label>
                        </td>
                        <td><input name='cep' id='cep' type='text'
                                       size='8'>
                        </td>
                    </tr>                    
                    <tr>
                        <td><label for='estado'>Estado:</label></td>
                        <td>
                            <select name='estado' id='estado'
                                    onchange='sendRequest();'>
                                <option value='-1'>Escolha um estado
                                </option>
                                <option value='MG'>MG</option>
                                <option value='SP'>SP</option>
                                <option value='RJ'>RJ</option>
                            </select>
                        </td>
                        <td>
                            <label for='cidade'>Cidade:</label>
                        </td>
                        <td><select name='cidade' id='cidade'
                                        style="width:200px"></select>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <input type='submit' value="Salvar">
        </form>
    </body>
</html>
Meu xml
<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
         version="2.4">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>
            index.jsp
        </welcome-file>
    </welcome-file-list>
    <servlet>
        <servlet-name>CadastrarCliente</servlet-name>
        <servlet-class>
            br.com.globalcode.servlets.CadastrarCliente
        </servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>CadastrarCliente</servlet-name>
        <url-pattern>/cadastrarCliente</url-pattern>
    </servlet-mapping>
    
</web-app>

Estou usando netbeans, coloquei pontos de depuração na servelt esta funcionando legal. Mais quando executa o metodo processRequest do javascrpt não funciona. Coloquei alert para verificar se estava passando dentro do codigo request.status = 200. Correto, mais nao estou conseguindo verificar o erro.

Muito Obrigado

2 Respostas

R

Ninguem se habilita. :frowning:

R

Alguem consegue verificar o erro.

Criado 12 de setembro de 2011
Ultima resposta 25 de set. de 2011
Respostas 2
Participantes 1