sexta-feira, 2 de agosto de 2013

Exemplo de JSON + SERVLET + AJAX JQUERY

Segue abaixo um exemplo de chamada AJAX com JQUERY a uma Servlet retornando um Array de objetos JSON, para esse exemplo estou levando em consideração que você já tenha um projeto Web simples com JQUERY OK?

Passo 1: Primeiro é necessário baixar o jar do JSON no site org.json, o jar que baixei contem as seguintes classes:



Passo 2: Crie uma classe chamada Pessoa, conforme abaixo:

   
 public class Pessoa {  
      private String nome;  
      private Integer idade;  
      public String getNome() {  
           return nome;  
      }  
      public void setNome(String nome) {  
           this.nome = nome;  
      }  
      public Integer getIdade() {  
           return idade;  
      }  
      public void setIdade(Integer idade) {  
           this.idade = idade;  
      }  
 }  


Passo 3: Crie uma Servlet chamada PessoaServlet que retornara um Array de objetos Json conforme o exemplo abaixo:

 import java.io.IOException;  
 import java.io.PrintWriter;  
 import java.util.ArrayList;  
 import java.util.List;  
 import javax.servlet.ServletException;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
 import org.json.JSONArray;  
 import org.json.JSONException;  
 import org.json.JSONObject;  
 import br.com.dominio.Pessoa;  
 public class PessoaServlet extends HttpServlet {       
           private static final long serialVersionUID = 1L;  
           @Override  
           protected void doGet(final HttpServletRequest request, final HttpServletResponse response) throws ServletException, IOException {  
                recuperarPessoas(request, response);  
           }  
           @Override  
           protected void doPost(final HttpServletRequest request, final HttpServletResponse response) throws ServletException, IOException {  
                recuperarPessoas(request, response);  
           }  
           private void recuperarPessoas(final HttpServletRequest request, final HttpServletResponse response) throws IOException {  
                try {  
                     request.setCharacterEncoding("UTF-8");  
            response.setCharacterEncoding("UTF-8");  
            response.setContentType("application/json");   
            PrintWriter out = response.getWriter();   
                     List<Pessoa> procedimentos = getPessoas();  
                     JSONArray jsonArray = new JSONArray();  
                     for (Pessoa obj : procedimentos) {  
                          JSONObject jsonObject = new JSONObject();  
                          jsonObject.put("nome", obj.getNome());  
                          jsonObject.put("idade", obj.getIdade());  
                          jsonArray.put(jsonObject);  
                     }  
                     out.print(jsonArray);  
                } catch (JSONException e) {  
                     e.printStackTrace();  
                }  
           }  
           private List<Pessoa> getPessoas() {  
                List<Pessoa> pessoas = new ArrayList<Pessoa>();  
                Pessoa pessoaUm = new Pessoa();  
                pessoaUm.setNome("Gustavo Lopes de Oliveira");  
                pessoaUm.setIdade(25);  
                Pessoa pessoaDois = new Pessoa();  
                pessoaDois.setNome("Ralph Miranda");  
                pessoaDois.setIdade(28);  
                pessoas.add(pessoaUm);  
                pessoas.add(pessoaDois);  
                return pessoas;  
           }  
      }  


Passo 4:Declare no seu web.xml a servlet PessoaServlet conforme abaixo, a minha servlet esta no pacote br.com.servlet por isso na tag do web.xml servlet-class eu tenho que apontar o caminho inteiro br.com.servlet.PessoaServlet:

  <servlet>  
  <servlet-name>PessoaServlet</servlet-name>  
  <servlet-class>br.com.servlet.PessoaServlet</servlet-class>  
  </servlet>  
  <servlet-mapping>  
  <servlet-name>PessoaServlet</servlet-name>  
  <url-pattern>/PessoaServlet</url-pattern>  
  </servlet-mapping>  


Passo 5:Crie um arquivo html ou xhtml chamado teste e copie o conteúdo abaixo nesse arquivo:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8"></meta>  
 <script src="/site/js/jquery-1.8.0.min.js" type="text/javascript"></script>  
 <script type="text/javascript">  
 //<![CDATA[  
 $(document).ready(function(){    
   var teste;  
   $.ajax({  
     data: "",  
     dataType: 'json',  
     url: './PessoaServlet',  
     type: 'POST',  
     success: function(data){  
          var corpo = "<div><h2>Lista de Pessoas</h2><ul>";  
          for (var i = 0, length = data.length; i < length; i++) {  
                     var pessoa = data[i];  
                     corpo += "<li>"+  
                                    "<span>Nome: "+pessoa.nome+"</span><span style='margin-left:10px;'>Idade: "+ pessoa.idade+"</span>"                           
                               "</li>";                                     
       }    
       corpo += "</ul></div>";  
       var divCorpo = document.getElementById("divCorpoHtml");  
       divCorpo.innerHTML=corpo;  
     },  
     error: function() {  
       alert("Ocorreu um erro na requisição ajax");  
     }  
   });  
 });  
 //]]>       
 </script>  
 </head>  
 <body style="padding: 10px;">       
      <div id="divCorpoHtml">       
      </div>  
 </body>  
 </html>  
Passo 6: Por fim inicie o seu servidor (TomCat/Jboss etc) e acesse a tela teste.(html/xhtml)e o resultado será conforme a imagem abaixo:

Um comentário: