Javascript处理返回的JSON数据_H5之家 - 中国HTML5教程资源分享第一站

		权声明：本文为博主原创文章，未经博主允许不得转载。

在JSP页面经常要从数据库中读取数据。有时候在页面中也要一些特效处理。如运用Ajax技术。下面这个例子是在javascript中用ajax技术实现Json数据的无刷新加载。

一：导入Json要用到的jar包

commons-beanutils-1.8.0.jar、commons-collections-3.2.1.jar、commons-lang-2.5.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar、json-lib-2.4-jdk15.jar共6个jar包。

jar包下载地址：http://download.csdn.net/detail/emoven/4893164

二：具体的代码编写

实体类：User

[html]view plain copy
					 
				package entity;  

				public class User {  

				    private String userId;  

				    private String userName;  

				    private int age;  

				    public User() {  

				    }  

				    public User(String userId, String userName, int age) {  

				        this.userId = userId;  

				        this.userName = userName;  

				        this.age = age;  

				    }  

				    public String getUserId() {  

				        return userId;  

				    }  

				    public void setUserId(String userId) {  

				        this.userId = userId;  

				    }  

				    public String getUserName() {  

				        return userName;  

				    }  

				    public void setUserName(String userName) {  

				        this.userName = userName;  

				    }  

				    public int getAge() {  

				        return age;  

				    }  

				    public void setAge(int age) {  

				        this.age = age;  

				    }  

				}

JSP页面：jsonTest.jsp

[html]view plain copy
					 
				<%@ page language="java" contentType="text/html; charset=UTF-8"  

				    pageEncoding="UTF-8"%>  

				<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  

				 "http://www.w3.org/TR/html4/loose.dtd">  

				<html>  

				<head>  

				<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

				<title>JSON测试</title>  

				<script type="text/javascript">  

				function create(){                 

				    if(window.XMLHttpRequest){                      

				        xmlHttp=new XMLHttpRequest();                  

				    }else if(window.ActiveXObject){                     

				        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")                

				    }             

				}  

				function run(){   

				    var url = "JsonServlet?date="+new Date();  

				    create();                 

				    xmlHttp.open("POST",url,true);                  

				    xmlHttp.onreadystatechange=callback;                  

				    xmlHttp.send();             

				}     

				function callback(){                 

				    if(xmlHttp.readyState==4){                      

				        if(xmlHttp.status==200){                         

				             var xmlDoc=xmlHttp.responseText;                      

				             var data=eval(xmlDoc);  

				             var json = "";  

				             for(var i=0;i<data.length;i++){  

				                 json +=data[i].userId+":"+data[i].userName+","+data[i].age+"<br>";  

				             }  

				             document.getElementById("content").innerHTML=json;  

				        }  

				        else{                          

				            alert("AJAX服务器返回错误！");                     

				        }    

				    }             

				}  

				</script>  

				</head>  

				<body>  

				    <input type="button" value="显示数据" onclick="run()">  

				    <div id="content"></div>  

				</body>  

				</html>

servlet：JsonServlet类

[html]view plain copy
					 
				package servlet;  

				import java.io.IOException;  

				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 net.sf.json.JSONArray;  

				import entity.User;  

				/**  

				 * Servlet implementation class JsonServlet  

				 */  

				public class JsonServlet extends HttpServlet {  

				    private static final long serialVersionUID = 1L;  

				    /**  

				     * @see HttpServlet#HttpServlet()  

				     */  

				    public JsonServlet() {  

				        super();  

				        // TODO Auto-generated constructor stub  

				    }  

				    /**  

				     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)  

				     */  

				    protected void doGet(HttpServletRequest request, HttpServletResponse response)   

				throws ServletException, IOException {  

				        doPost(request, response);  

				    }  

				    /**  

				     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)  

				     */  

				    protected void doPost(HttpServletRequest request, HttpServletResponse response)   

				throws ServletException, IOException {  

				        request.setCharacterEncoding("UTF-8");  

				        response.setContentType("text/html; charset=UTF-8");  

				        List<User> users = new ArrayList<User>();  

				        users.add(new User("1", "李峰", 18));  

				        users.add(new User("2", "王伟", 18));  

				        users.add(new User("3", "张力", 20));  

				        //转成json对象  

				        JSONArray jsonArray = JSONArray.fromObject(users);  

				        response.getWriter().write(jsonArray.toString());  

				    }  

				}

到此，javascript用ajax处理json数据的例子就完成了。ajax的代码是采用比较原始的方法。可以用一些ajax框架改进，减少代码量。