仿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>
[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>