仿JSON做的数据传输

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

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

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

[b]3。[/b]写个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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值