Top

JAVA AJAX DAY02

  1. 使用JSON表示一个对象案例
  2. JSON对象数组案例
  3. JSON字符串(JavaScript对象
  4. Java对象转换成JSON
  5. 使用JSON完成级联下拉列表
  6. JSON案例
  7. jQuery对Ajax的支持

1 使用JSON表示一个对象案例

1.1 问题

访问JavaScript对象的属性

1.2 方案

使用初始化的方式创建JavaScript对象,并访问对象的属性.

1.3 步骤

步骤一:新建json01.html文件

添加链接的单击动作,调用方法。

图-1

步骤二:运行查看结果

图- 2

步骤三:添加复杂对象

图– 3

步骤四:运行查看结果

图-4

1.4 完整代码

json01.html文件代码如下:

<html>
<head>
<title>json01.html</title>	
<meta http-equiv="content-type" 
	content="text/html; charset=UTF-8">
<script type="text/javascript">
	function f1(){
		var obj = {'name':'Luffy','age':17};
		alert(obj.name + "  " + obj.age);
	}
	function f2(){
		var obj = {'name':'Luffy',
				'address':{
							'city':'Beijing',
							'street':'dzs',
							'room':17    				
						  }};
		alert(obj.name + "  " + obj.address.city);
	}
</script>
</head>

<body>
	<!—- 创建JavaScript对象并查看属性 -->
<a href="javascript:;" onclick="f2();">查看对象属性</a>
</body>
</html>

2 JSON对象数组案例

2.1 问题

访问JavaScript对象数组中的元素

2.2 方案

遵循数组的格式要求,使用方括号开头和结尾。

2.3 步骤

步骤一:新建json02.html文件

在文件中添加链接进行方法调用的测试。添加第一个方法f3()。如图-5所示。

图- 5

步骤二:运行查看结果

图- 6

步骤三:添加下一个方法f4()

图 - 7

步骤四:运行查看结果

图- 8

2.4 完整代码

json02.html文件代码如下:

<html>
<head>
<title>json02.html</title>	
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	function f3(){
		var arr = [ {'name':'Luffy','age':17},
						{'name':'Zoro','age':19}];
			alert(arr[1].name);
	}
	function f4(){
		var obj = {'name':'Luffy',
				'friends':[{'name':'Zoro','age':19},
						   {'name':'Nami','age':18}]
				   };
		alert(obj.name + "  " + obj.friends[1].name);
	}
</script>
</head>

<body>
	<!— 访问JavaScript对象数组 -->
<a href="javascript:;" onclick="f4();">查看数组中的对象属性</a>
</body>
</html>

3 JSON字符串(JavaScript对象

3.1 问题

将符合JSON格式要求的字符串,转换为JavaScript对象。

3.2 方案

借助于原生的eval方法或者原生对象JSON.parse(str)方法。

3.3 步骤

步骤一:新建json03.html文件

在文件中添加脚本代码,f5()方法为字符串到对象的转变过程。

JSON这个原生对象提供了字符串和对象之间转换的方法,如果浏览器无法得到想要的输出结果,是因为版本太低不支持这个原生对象。

图 - 9

步骤二:运行查看结果

图- 10

步骤三:添加方法f6(),实现数组的转换

图- 11

步骤四:运行查看结果

图- 12

步骤五:添加f7()方法,实现对象到字符串的转换

图- 13

步骤六:运行查看结果

图- 14

3.4 完整代码

<html>
<head>
<title>json03.html</title>	
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript">

	/*JSON字符串转JSON对象*/
	function f5(){
		var str = '{"name":"Luffy","age":17}';    
				
		//第1种方式(不需要任何js文件)
			//var obj = eval("("+str+")");
			
			//第2种方式(不需要json.js文件)
			//var obj = JSON.parse(str);
			
			//第3种方式(需要json.js文件)
			var obj = str.parseJSON();
						
			alert(obj.name);
	}
	
	/*JSON字符串转JSON数组*/
	function f6(){
		var str = '[{"name":"Luffy","age":17},' + 
					  '{"name":"Zoro","age":19}]';		
			//第1种方式
			//var arr = eval("("+str+")");
			
			//第2种方式
			var arr = str.parseJSON();
			
			alert(arr[1].name);
	}
	
	/*JSON对象转JSON字符串*/
	function f7(){
		var obj = {"name":"Luffy","age":17};
		//第1种方式
			//var str = obj.toJSONString();
			//第2种方式
			var str = JSON.stringify(obj);
			alert(str);
	}
</script>
</head>
<body>
	<!-- 使用JSON表示数组 -->
<a href="javascript:;" onclick="f5();">JSON字符串-->JSON对象</a><br/><br/><br/>
<a href="javascript:;" onclick="f6();">JSON字符串-->JSON数组</a><br/><br/><br/>
<a href="javascript:;" onclick="f7();">JSON对象-->JSON字符串</a><br/><br/><br/>
</body>
</html>

4 Java对象转换成JSON

4.1 问题

将Java对象转换成符合JSON格式的字符串,并测试。

4.2 方案

使用与json-lib.jar相关的jar文件完成类型的转换。

4.3 步骤

步骤一:新建实体类Friend

图- 15

步骤二:新建JSONTest类

在该类中添加四个方法,分别用于测试Java对象转换为JSON字符串,Java数组转换为JSON字符串,JSON字符串转换为Java对象,JSON字符串转换为Java数组。

步骤三:引入jar文件

在添加jar文件的时候,需要导入6个jar文件,缺一不可。如图-16所示。

图- 16

步骤四:添加具体的转换方法:Java对象转换为JSON字符串

图- 17

步骤五:运行结果

图– 18

步骤六:Java数组(集合)转换为JSON字符串

图– 19

运行结果:

图- 20

步骤七:JSON字符串转换为Java对象

图– 21

运行结果:

图- 22

步骤八:JSON字符串转换为Java数组(集合)

图– 23

运行结果:

图- 24

4.4 完整代码

Friend.java文件代码如下:

package bean;

public class Friend {
	private String name;
	private int age;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public String toString() {
		return this.name + "   " + this.age;
	}
}

JSONTest.java文件代码如下:

package json;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import bean.Friend;

public class JSONTest {
	/**
	 * Java对象转换为JSON字符串
	 */
	public static void test1() {
		Friend f = new Friend();
		f.setName("Zoro");
		f.setAge(19);
		JSONObject jsonObj = JSONObject.fromObject(f);
		String jsonStr = jsonObj.toString();
		System.out.println(jsonStr);
	}

	/**
	 * Java数组转换为JSON字符串
	 */
	public static void test2() {
		List<Friend> fs = new ArrayList<Friend>();
		for (int i = 0; i < 3; i++) {
			Friend f = new Friend();
			f.setName("Zoro" + (i + 1));
			f.setAge(19 + i);
			fs.add(f);
		}
		JSONArray jsonArr = JSONArray.fromObject(fs);
		String jsonStr = jsonArr.toString();
		System.out.println(jsonStr);
	}
	/**
	 * JSON字符串转换为Java对象
	 */
	public static void test3(){
		String jsonStr = "{\"name\":\"Luffy\",\"age\":17}";
		JSONObject jsonObj = JSONObject.fromObject(jsonStr);
		Friend friend = (Friend)JSONObject.
					toBean(jsonObj, Friend.class);
		System.out.println(friend);
	}
	
	/**
	 * JSON字符串转换为Java数组
	 */
	public static void test4(){
		String jsonStr = "[{\"name\":\"Luffy\",\"age\":17}," +
				"		{\"name\":\"Zoro\",\"age\":19}]";
		JSONArray jsonArr = JSONArray.fromObject(jsonStr);
		List<Friend> friends = (List<Friend>)JSONArray.
					toCollection(jsonArr, Friend.class);
		for(Friend f :friends){
			System.out.println(f);
		}
	}

	public static void main(String[] args) {
		 //test1();
		//test2();
		//test3();
		test4();
	}

}

5 使用JSON完成级联下拉列表

5.1 问题

结合异步请求,实现城市的级联下拉列表。

5.2 方案

分别编写客户端脚本和服务器端处理程序。服务器端要实现将Java对象转换为传输的JSON字符串。客户端在收到这个字符串以后进行转换,变成JavaScript对象,使用对象的各个属性构造下拉框的Option选项后添加到select下面。

5.3 步骤

步骤一:新建实体类City

图- 25

步骤二:新建ActionServlet

图- 26

步骤三:新建city.html文件

图– 27

图 - 28

步骤四:运行查看结果

图- 29

5.4 完整代码

City.java文件代码如下:

package bean;

public class City {
	private String cityName;
	private String cityValue;	
	
	public City() {
		super();
	}
	public City(String cityName, String cityValue) {
		super();
		this.cityName = cityName;
		this.cityValue = cityValue;
	}
	public String getCityName() {
		return cityName;
	}
	public void setCityName(String cityName) {
		this.cityName = cityName;
	}
	public String getCityValue() {
		return cityValue;
	}
	public void setCityValue(String cityValue) {
		this.cityValue = cityValue;
	}
}

ActionServlet.java文件代码如下:

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

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

import dao.SaleDAO;

import json.DateProcessor;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;

import bean.City;
import bean.Sale;
import bean.User;

public class ActionServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		String uri = request.getRequestURI();
		String action = uri.substring(uri.lastIndexOf("/")
				,uri.lastIndexOf("."));
		if (action.equals("/city")) {
			String name = request.getParameter("name");
			if (name.equals("bj")) {
				City c1 = new City("海淀", "hd");
				City c2 = new City("东城", "dc");
				City c3 = new City("西城", "xc");
				List<City> cs = new ArrayList<City>();
				cs.add(c1);
				cs.add(c2);
				cs.add(c3);
				JSONArray obj = JSONArray.fromObject(cs);
				String str = obj.toString();
				out.println(str);
			} else if (name.equals("sh")) {
				City c1 = new City("徐汇", "xh");
				City c2 = new City("静安", "ja");
				City c3 = new City("黄浦", "hp");
				List<City> cs = new ArrayList<City>();
				cs.add(c1);
				cs.add(c2);
				cs.add(c3);
				JSONArray obj = JSONArray.fromObject(cs);
				String str = obj.toString();
				out.println(str);
			}
		}
		out.close();
	}

}

web.xml文件代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="/java.sun.com/xml/ns/javaee" 
	xmlns:xsi="/www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="/java.sun.com/xml/ns/javaee 
	/java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>ActionServlet</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ActionServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>	
</web-app>

city.html文件代码如下:

<html>
<head>
	<title></title>	
	<script type="text/javascript" src="js/json.js"></script>
	<script type="text/javascript">
		function getXmlHttpRequest(){
			var xhr = null;
		if((typeof XMLHttpRequest)!='undefined'){
		xhr = new XMLHttpRequest();
	}else {
		xhr = new ActiveXObject('Microsoft.XMLHttp');
	}
	return xhr;
		}

		function change(v1){
			var xhr = getXmlHttpRequest();
			xhr.open('post','city.do',true);
			xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
			xhr.onreadystatechange=function(){
				if(xhr.readyState == 4){
					var txt = xhr.responseText;
					var citys = txt.parseJSON();
					document.getElementById('s2').innerHTML = '';
					for(i=0;i<citys.length;i++){
						var op = 
						new Option(citys[i].cityName,
						citys[i].cityValue);
						document.getElementById('s2').options[i] = op;
					}
				}
			};
			xhr.send('name=' + v1);
		}
	</script>
</head>
<body>
	<select id="s1" style="width:120px;"
	onchange="change(this.value);">
		<option value="sh">上海</option>
		<option value="bj">北京</option>
	</select>
	<select id="s2" style="width:120px;">
	</select>
</body>
</html>

6 JSON案例

6.1 问题

每隔5秒钟,显示当前卖的最好的三件商品。

6.2 方案

每5秒钟发送一次Ajax请求,将返回的JSON数组数据显示到页面的div中。

6.3 步骤

步骤一:新建Sale类

图- 30

步骤二:新建dao包下面的DBUtil类和SaleDAO类

DBUtil.java文件参考前面项目中的代码。

执行如下sql语句:

图- 31

新建SaleDAO.java文件,编写用于查询销量前三的方法。

图- 32

步骤三:新建ActionServlet类

图 - 33

步骤四:新建sales.html文件

图- 34

步骤五:运行查看结果

图- 35

6.4 完整代码

Sale.java文件代码:

package bean;

public class Sale {
	private int id ;
    private String prodName;
    private int qty ;   

	public Sale() {
		super();
	}
	public Sale(int id, String prodName, int qty) {
		super();
		this.id = id;
		this.prodName = prodName;
		this.qty = qty;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getProdName() {
		return prodName;
	}
	public void setProdName(String prodName) {
		this.prodName = prodName;
	}
	public int getQty() {
		return qty;
	}
	public void setQty(int qty) {
		this.qty = qty;
	}
}

DBUtil.java文件代码:

package dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

import org.apache.taglibs.standard.tag.common.core.OutSupport;

/**
 * JDBC管理连接的工具类,可以获取连接和关闭连接
 */
public class DBUtil {
	/**
	 * 获取连接对象
	 */
	public static Connection getConnection()throws Exception{
		Connection conn = null;
		try {
			Class.forName("oracle.jdbc.OracleDriver");
			conn = DriverManager.getConnection(
					"jdbc:oracle:thin:@localhost:1521:xe","xxx", "xxx");
		} catch (Exception e) {
			e.printStackTrace();
			throw e;
		}
		return conn;
	}
	/**
	 * 关闭连接对象
	 */
	public static void close(Connection conn) throws Exception{
		if(conn!=null){
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw e;
			}
		}
	}	
}

SaleDAO.java文件代码:

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import bean.Sale;

public class SaleDAO {
	public List<Sale> findAll() throws Exception{
		List<Sale> sales = new ArrayList<Sale>();
		Connection conn = null;
		PreparedStatement stmt = null;
		ResultSet rs = null;
		try{
			conn = DBUtil.getConnection();
			stmt = conn.prepareStatement("select * from (select rownum r," +
					"a.* from (select * from t_sale order by qty desc) a) " +
					"c where c.r < 4");
			rs = stmt.executeQuery();
			while(rs.next()){
				Sale s = new Sale(
						rs.getInt("id"),
						rs.getString("prodname"),
						rs.getInt("qty")
						);
				sales.add(s);
			}
		}catch(Exception e){
			e.printStackTrace();
			throw e;
		}finally{
			DBUtil.close(conn);
		}
		return sales;
	}
}

ActionServlet.java文件代码:

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

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

import dao.SaleDAO;

import json.DateProcessor;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;

import bean.City;
import bean.Sale;
import bean.User;

public class ActionServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		String uri = request.getRequestURI();
		String action = uri.substring(uri.lastIndexOf("/")
				,uri.lastIndexOf("."));
		
if(action.equals("/sale")){
			SaleDAO dao = new SaleDAO();
			try {
				List<Sale> all = dao.findAll();
				JSONArray arry = JSONArray.fromObject(all);
				out.println(arry.toString());
			} catch (Exception e) {				
				e.printStackTrace();
				throw new ServletException(e);
			}
		}
		out.close();
	}
}

web.xml文件代码:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="/java.sun.com/xml/ns/javaee" 
	xmlns:xsi="/www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="/java.sun.com/xml/ns/javaee 
	/java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>ActionServlet</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ActionServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>	
</web-app>

sales.html文件代码:

<html>
<head>
	<title>Insert title here</title>
	<style>
		#d1{
			width:500px;
			height:180px;
			background-color:#fff8dc;
			border:1px solid red;
			margin-left:350px;
			margin-top:50px;
		}
	</style>
	<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
	<script type="text/javascript">
		function getXmlHttpRequest(){
			var xhr = null;
	if((typeof XMLHttpRequest)!='undefined'){
		xhr = new XMLHttpRequest();
		}else {
		xhr = new ActiveXObject('Microsoft.XMLHttp');
	 }
	return xhr;
		}
		function f1(){
			setInterval(f2,5000);
		}
		function f2(){
			var xhr = getXmlHttpRequest();
			xhr.open('post','sale.do',true);
			xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
			xhr.onreadystatechange=function(){
				if(xhr.readyState == 4){
					var txt = xhr.responseText;
					var sales = txt.evalJSON();
					var saleInfo = '当前销量最好的商品是:<br/>';
					for(i=0;i<sales.length;i++){
						saleInfo += '商品名称:'
						 + sales[i].prodName + ' 销量:' + 
						 sales[i].qty + '<br/>';
					}
					$('d1').innerHTML = saleInfo;
				}
			};
			xhr.send(null);
		}
	</script>
	
</head>
<body onload="f1();">
	<div id="d1"></div>
</body>
</html>

7 jQuery对Ajax的支持

7.1 问题

jQuery对Ajax的实现。

7.2 方案

使用$.load(),$.get(),$.post(),$.ajax()方法发送异步请求。

7.3 步骤

步骤一:$.load()方法

新建emps.jsp页面

图- 36

添加异步请求代码:

图- 37

新建ActionServlet类:

图- 38

运行查看结果:

图- 39

步骤二:$.get()/$.post()方法

新建stock.jsp页面

图– 40

图- 41

新建Stock.java文件:

图- 42

修改ActionServlet类:

图- 43

发送post请求的代码:

图- 44

运行查看结果:

图– 45

每隔四秒钟,信息就会更新一次,在不断的变化。

修改post请求为get请求时,相关参数不变,只有在IE浏览器下会存在缓存的问题,所以在请求地址后面追加一个随机数就可以欺骗IE浏览器,让其认为请求的数据有变化。运行结果同图-45相同。

步骤三:$.ajax()方法

新建stock2.jsp页面

基本结构和CSS样式和stock.jsp页面内容一致。

添加异步请求代码:

图- 46

运行查看结果:

与图-45结果相同

7.4 完整代码

emps.jsp文件代码如下:

<%@page pageEncoding="utf-8" 
contentType="text/html;charset=utf-8" %>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$('.s1').click(function(){
					var eId = 
					$(this).parent().siblings().eq(0).text();
					$(this).next().load('salary.do','eId=' + eId);
				});
			});
		</script>
	</head>
	<body>
			<table cellpadding="0" cellspacing="0" 
				width="50%" border="1">
			<tr><td>员工号</td><td>员工姓名</td><td>&nbsp;</td>
			</tr>
			<tr>
				<td>T10001</td><td>张三</td><td>
				<a href="javascript:;"class="s1">
					显示工资明细</a>
				<div></div>
				</td>
			</tr>
			<tr><td>T10002</td><td>李四</td><td>
				<a href="javascript:;"class="s1">
					显示工资明细</a>
				<div></div>
				</td>
			</tr>		
			</table>
	</body>
</html>

stock.jsp文件代码如下:

<%@page pageEncoding="utf-8" 
contentType="text/html;charset=utf-8" %>
<html>
	<head>
		<style>
			#d1{
				width:450px;
				height:280px;
				background-color:black;
				margin-left:400px;
				margin-top:50px;
			}
			#d2{
				color:white;
				background-color:purple;
				height:35px;
			}
			table{
				color:white;
				font-size:24px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(function(){
				setInterval(quoto,4000);
			});
			function quoto(){
				$.post('quoto.do',function(data){
					//data:服务器返回的数据,如果
					//是json字符串,会自动转换成相应的
					//javascript对象。
					$('#tb1').empty();
					for(i=0;i<data.length;i++){
						var s = data[i];
						$('#tb1').append(
						'<tr><td>' + s.code 
						+ '</td><td>' + s.name 
						+ '</td><td>' + s.price
						 + '</td></tr>');
					}
				},'json');
			}
		</script>
	</head>
	<body style="font-size:30px;font-style:italic;">
		<div id="d1">
			<div id="d2">股票实时行情</div>
			<div id="d3">
				<table width="100%" cellpadding="0" 
				cellspacing="0">
					<thead>
						<tr><td>代码</td><td>名称</td>
						<td>价格</td></tr>
					</thead>
					<tbody id="tb1">
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>

stock2.jsp文件代码如下:

<%@page pageEncoding="utf-8" 
contentType="text/html;charset=utf-8" %>
<html>
	<head>
		<style>
			#d1{
				width:450px;
				height:280px;
				background-color:black;
				margin-left:400px;
				margin-top:50px;
			}
			#d2{
				color:white;
				background-color:red;
				height:35px;
			}
			table{
				color:white;
				font-size:24px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(function(){
				setInterval(quoto,4000);
			});
			function quoto(){
				$.ajax({
					url:"quoto.do",
					type:"post",					
					dataType:"json",
					success:function(data){
						$('#tb1').empty();
						for(i=0;i<data.length;i++){
							var s = data[i];
							$('#tb1').append(
							'<tr><td>' + s.code 
							+ '</td><td>' + s.name 
							+ '</td><td>' + s.price 
							+ '</td></tr>');
						}
					},
					error:function(){
						//服务器出错之后的处理逻辑。
					}
				});
			}
		</script>	
	</head>
	<body style="font-size:30px;font-style:italic;">
		<div id="d1">
			<div id="d2">股票实时行情</div>
			<div id="d3">
				<table width="100%" cellpadding="0" 
				cellspacing="0">
					<thead>
						<tr><td>代码</td><td>名称</td><td>价格</td></tr>
					</thead>
					<tbody id="tb1">
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>

Stock.java文件代码如下:

package bean;

public class Stock {
	private String code;
	private String name;
	private double price;
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public double getPrice() {
		return price;
	}
	public void setPrice(double price) {
		this.price = price;
	}
}

ActionServlet.java文件代码如下:

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;

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 bean.Stock;

public class ActionServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String uri = request.getRequestURI();
		String action = 
			uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
		if(action.equals("/salary")){
			String flight = request.getParameter("eId");
			if(flight.equals("T10001")){
				out.println("实际工资:¥10000<br/>个税:¥2500");
			}else{
				out.println("实际工资:¥20000<br/>个税:¥5000");
			}
		}else if(action.equals("/quoto")){
			Random r = new Random();
			List<Stock> stocks = 
				new ArrayList<Stock>();
			for(int i=0;i<8;i++){
				Stock s = new Stock();
				s.setCode("60001" +r.nextInt(10));
				s.setName("中国国贸" + r.nextInt(10));
				DecimalFormat df = new DecimalFormat("0.00");
				double price = Double.parseDouble(
						df.format(100 * r.nextDouble()));
				s.setPrice(price);
				stocks.add(s);
			}
			JSONArray jsonArr = 
				JSONArray.fromObject(stocks);
			String jsonStr = jsonArr.toString();
			System.out.println(jsonStr);
			out.println(jsonStr);
		}
		out.close();
	}
}