仿JSON做的数据传输

仿JSON做的数据传输。后台生成一个JSON数组,前台负责解析数组,然后展示。把后台的List截断成一个JSON的数组,然后通过reponse返回至页面,页面再解析此JSON数组然后在展示此数据。具体操作:

1。写一个javaBean,在bean里面写一个toJSON(),封装属性名和值然后用String方式返回;

2。写一个servlet,   在其中写一个得到list的一个结果集;

3。写个HTML页面,由Ajax的方式异步提交到Servlet中,然后返回Servlet中的值,再在页面上用Ajax的xmlHttp得到json数组然后通过eval()解析,然后拼装到页面展示.

具体代码如下:

javaBean:

package com.haixiao.bean;

public class User {
  private Long userId;
  private String userName;
  private String firstName;
   private String middleName;
  private String address;
   public User() {
 
   }

  public Long getUserId() {
      return userId;
  }

  public void setUserId(Long userId) {
     this.userId = userId;
   }

  public String getUserName() {
    return userName;
   }

  public void setUserName(String userName) {
     this.userName = userName;
  }

   public String getFirstName() {
     return firstName;
  }

  public void setFirstName(String firstName) {
      this.firstName = firstName;
   }

  public String getMiddleName() {
      return middleName;
  }

  public void setMiddleName(String middleName) {
      this.middleName = middleName;
  }

   public String getAddress() {
     return address;
  }

  public void setAddress(String address) {
     this.address = address;
   }

  public String toJSON() {
       String json = "{'userId':'"+this.getUserId() + "','userName':'"
           + this.getUserName() + "','firstName':'"
            + this.getFirstName() +"','middleName':'" + this.getMiddleName()
           +"','address':'" + this.getAddress() + "'}";
     return json;
   }
}




前台页面示例:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <META content="text/html; charset=gb2312" http-equiv=Content-Type>
  <title>Example</title>
</head>
<script type="text/javascript">
    var xmlHttp;
    function createXMLHttpRequest() {
      if (window.ActiveXObject) {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } else if (window.XMLHttpRequest) {
          xmlHttp = new XMLHttpRequest();
       }
    }
 
   function handleStateChange() {
      if(xmlHttp.readyState == 4) {
          if(xmlHttp.status == 200) {
             parseResults();
          }
       }
   }
 
    function parseResults() {
       var json = xmlHttp.responseText;
       eval("var resq = " + json );
       var jsonUser = resq.user;
       var outText = "<table border=1><tr><td>用户ID</td><td>用户姓名</td><td>用户姓氏          </td><td>用户中间名</td><td>用户地址</td></tr>";
       for(var i = 0 ; i < jsonUser.length;i++){
          var val = eval(jsonUser[i]);
          outText += "<tr><td>"+val.userId+"</td>" +
        "<td>"+val.userName+"</td>" +
                 "<td>"+val.firstName+"</td>" +
                 "<td>"+val.middleName+"</td>" +
              "<td>"+val.address+"</td></tr>";
       }
       outText += "</table>";
       serverResponse.innerHTML=outText;
   }
 
    function getListData() {
       createXMLHttpRequest();
       var url = "JsonExample?timeStamp="+new Date().getTime();
       xmlHttp.open("GET", url, true);
      xmlHttp.onreadystatechange = handleStateChange;
       xmlHttp.send(null);
   }
</script>
<body>
   <br/><br/>
     <form action="#">
         <input type="button" value="list集合" onclick="getListData();" />
      </form>
    <br>
    <h2>集合列表:</h2>
    <div id="serverResponse"></div>
</body>
</html>



servlet:



package ajax.communicate;

import java.io.BufferedReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.haixiao.bean.User;

public class JsonExample extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet   {
     static final long serialVersionUID = 1L;
  
  public JsonExample() {
     super();
   }   

   /**
    * 得到一个List集合,里面包含一个用户对象。通过循环把list拼装成一个String然后打出到  页面
    */
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws     ServletException, IOException {
      List<User> list = new ArrayList<User>();
      User user1 = new User();
      user1.setUserId(1L);
      user1.setUserName("小王");
      user1.setFirstName("王");
      user1.setMiddleName("猛");
     user1.setAddress("上海市");
      User user2 = new User();
      user2.setUserId(2L);
      user2.setUserName("小黑");
      user2.setFirstName("黑");
      user2.setMiddleName("楠");
      user2.setAddress("不详");
      User user3 = new User();
      user3.setUserId(3L);
      user3.setUserName("小刘");
     user3.setFirstName("刘");
     user3.setMiddleName("大伊");
     user3.setAddress("北京");
      list.add(user1);
      list.add(user2);
      list.add(user3);
      String json = "{user:[" ;
      for(int i = 0 ; i < list.size();i++) {
         json += list.get(i).toJSON();
         if(i != list.size()-1){
            json = json + ",";
         }
      }
      json += "]}";
      response.setContentType("text/xml");
      response.setCharacterEncoding("gb2312");
      response.getWriter().println(json);
   }  

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws     ServletException, IOException {
     this.doGet(request, response);
   }          
}

web.xml:

<servlet>
   <description>
    </description>
    <display-name>
     JsonExample

  </display-name>
    <servlet-name>JsonExample</servlet-name>
    <servlet-class>
     ajax.communicate.JsonExample

  </servlet-class>
</servlet>

<servlet-mapping>
   <servlet-name>JsonExample</servlet-name>
    <url-pattern>/JsonExample</url-pattern>
</servlet-mapping>

你可能感兴趣的:(Ajax,json,bean,servlet,Microsoft)