AJAX学习总结（八）---Jquery实例：动态股票价格

在上一个项目的基础上学习该实例：

 

步骤1.新建bean

package bean;
/**
 * 用于保存股票的基本信息
 */
public class Stock {
	//昨天的收盘价
	private double yesterday;
	//今天的开盘价
	private double today;
	//当前价格
	private double now;
	//股票名称
	private String name;
	//股票代码
	private String id;
	
	public Stock(){}
	
	public Stock(double yesterday, double today, String name, String id) {
		super();
		this.yesterday = yesterday;
		this.today = today;
		this.name = name;
		this.id = id;
		this.now = today;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public double getNow() {
		return now;
	}
	public void setNow(double now) {
		this.now = now;
	}
	public double getToday() {
		return today;
	}
	public void setToday(double today) {
		this.today = today;
	}
	public double getYesterday() {
		return yesterday;
	}
	public void setYesterday(double yesterday) {
		this.yesterday = yesterday;
	}
	public String toString(){
		return this.name + ":" + this.now;
	}
}

 

 

 

步骤2.新建servlet

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;

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

import bean.Stock;
/**
 * 返回股票当前信息的servlet
 */
public class GetStocksInfo extends HttpServlet {
	private static final long serialVersionUID = -8644886633753734374L;
	//保存股票信息的map
	private HashMap<String, Stock> stocks;
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//返回两只股票的价格信息
		//1.计算随机数
		double sz = Math.random() * 20;
		double pf = Math.random() * 0.5;
		
		//通过随机数是奇数还是偶数来判断股票上涨还是下跌
		boolean flagsz = ((int)(Math.random() * 10)) % 2 == 0;
		boolean flagpf = ((int)(Math.random() * 10)) % 2 == 0;
		
		//2.将随机数和股票当前价格进行加或者减的操作，得到新的当前价格
		Stock szzs = stocks.get("300001");
		Stock pfyh = stocks.get("000001");
		double temp;
		if(flagsz){
			temp = szzs.getNow() + sz;
		}else{
			temp = szzs.getNow() - sz;
		}
		//需要对新的价格进行截取，
		temp = ((int)(temp * 100)) / 100.0;
		szzs.setNow(temp);
		if(flagpf){
			temp = pfyh.getNow() + pf;
		}else{
			temp = pfyh.getNow() - pf;
		}
		temp = ((int)(temp * 100)) / 100.0;
		pfyh.setNow(temp);
		
		
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		//out.println(szzs + "<br/>" + pfyh);
		//3.返回两只股票的昨天收盘，今天开盘和当前价格
		//采用json的数据格式返回股票的信息
		StringBuilder builder = new StringBuilder();
		//采用数组方式返回两个股票对象
		/*
		builder.append("[{name:\"").append(szzs.getName()).append("\",id:\"").append(szzs.getId())
				.append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())
				.append(",now:").append(szzs.getNow())
				.append("},")
				.append("{name:\"").append(pfyh.getName()).append("\",id:\"").append(pfyh.getId())
				.append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())
				.append(",now:").append(pfyh.getNow())
				.append("}],");
				*/
		//采用对象的方式回传两个股票对象
		builder.append("({")
				.append("\"").append(szzs.getId()).append("\":{name:\"").append(szzs.getName())
				.append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())
				.append(",now:").append(szzs.getNow())
				.append("},")
				.append("\"").append(pfyh.getId()).append("\":{name:\"").append(pfyh.getName())
				.append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())
				.append(",now:").append(pfyh.getNow())
				.append("}})");
		out.print(builder);
}


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

	public void init() throws ServletException {
		stocks = new HashMap<String, Stock>();
		//创建股票
		Stock szzs = new Stock(3000.0,2990.1,"上证指数","300001");
		Stock pfyh = new Stock(23.22,23.50,"浦发银行","000001");
		
		//将两只股票保存在stocks的map中
		stocks.put(szzs.getId(), szzs);
		stocks.put(pfyh.getId(), pfyh);
	}

}

 

 

web.xml

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

  <servlet-mapping>
    <servlet-name>GetStocksInfo</servlet-name>
    <url-pattern>/GetStocksInfo</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

 

 

 

步骤3.新建html---JqueryStock.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Jquery实例：动态股票价格</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jslib/jquerystock.js"></script>
  </head>
  
  <body>
	<div id="300001"><a href="#">上证指数</a>:<span></span></div>
	<div id="000001"><a href="#">浦发银行</a>:<span></span></div>
	<div id="stock">
		<div id="yes">昨收：<span></span></div>
		<div id="tod">今开：<span></span></div>
		<div id="now">当前：<span></span></div>				
	</div>
  </body>
</html>

 

 

 

步骤4.新建js------jquerystock.js

//期望进入页面后可以开始从服务器端获取数据，然后显示股票价格
var obj;
var sid;
$(document).ready(function () {
		//页面载入时隐藏弹出窗口
	var stockNode = $("#stock").css("border", "1px solid black").css("width", "180px").css("position","absolute")
					.css("background-color","blue").css("color","yellow").css("z-index","99");
	stockNode.hide();
	var as = $("a");
		//定义鼠标进入股票名称时的操作
	as.mouseover(function (event) {
		//获取到当前股票的代码
		var aNode = $(this);
		var divNode = aNode.parent();
		sid = divNode.attr("id");
		//找到对应的对象
		updatediv();
			
		//需要控制弹出框的位置
		/*
		//1.找到的那个钱连接的位置
		var offset = aNode.offset();
		//2.设置弹出框的位置
		stockNode.css("left",offset.left + "px").css("top", offset.top + aNode.height() + "px");	
		*/
		//期望出现在鼠标的右下方
		var myEvent = event || window.event;
		stockNode.css("left",myEvent.clientX + 5 + "px").css("top", myEvent.clientY + 5 + "px");		
		
		//弹出框显示详细信息
		stockNode.show();
	});
		//定义鼠标离开股票名时的操作
	as.mouseout(function () {
			//弹出框隐藏
		stockNode.hide();
	});
	getInfo();
		//3.每个一秒钟和服务器交互一次，用户不用刷新页面就可以不断的看到最新的股票信息
	setInterval(getInfo, 1000);
});

//从服务器端获取数据并显示在页面上的方法
function getInfo() {
		//1.向服务器发起请求，获取数据
	var url = "GetStocksInfo";
		//解决IE缓存问题
	url = convertURL(url);
	$.get(url, null, function (data) {
		//2.接收并解析数据
		obj = eval(data);
		//2.1获取两只股票的当前指数信息
		var szzs = obj["300001"];
		var pfyh = obj["000001"];
		/*
		遍历一个js的对象
		for(var stockid in obj){
			var stock = obj[stockid];
		}
		*/
		//2.2找到页面中对应的节点，然后填充最新的股票价格
		var span3 = $("#300001").children("span");
		span3.html(szzs.now);
		if (szzs.now > szzs.yes) {
			span3.css("color", "green");
		} else {
			span3.css("color", "red");
		}
		var span1 = $("#000001").children("span");
		span1.html(pfyh.now);
		if (pfyh.now > pfyh.yes) {
			span1.css("color", "green");
		} else {
			span1.css("color", "red");
		}
		updatediv();
	});
}
//弹出框更新信息
function updatediv() {
	var stockObj = obj[sid];
	for (var proname in stockObj) {
		if (proname != name) {
			//找到对应的div节点并找到其子节点span，并将数据放进去
			$("#" + proname).children("span").html(stockObj[proname]);
		}
	}
}

//时间戳函数
function convertURL(url) {
	//获取时间戳
	var timestamp = (new Date()).valueOf();
	//将时间戳拼接在url路径上
	if (url.indexOf("?") >= 0) {
		url = url + "&t=" + timestamp;
		alert(url);
	} else {
		url = url + "?t=" + timestamp;
	}
	return url;
}

 

 

 

然后访问http://localhost:8080/JqueryTrain/JqueryStock.html即可！！！

在线Jquery 超炫API http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html