Ajax 학습 노트 03 - 주식 정보의 동태 변 화 를 모 의 동태 적 으로 나타 내 는 작은 예
9190 단어 ajax 학습 노트시 뮬 레이 션 주식 정보
실체 클래스: Stock. java
편폭 문제 로 get Set 방법 을 생략 하 였 습 니 다.
/**
* Created by IntelliJ IDEA.
* User:
* Date: 2011-11-24
* Time: 10:51:15
* To change this template use File | Settings | File Templates.
*/
public class Stock {
private double yesterday;
private double today ;
private double now;
private String name;
private String id;
public Stock( double yesterday, double today, String name, String id){
this.yesterday = yesterday;
this.today = today;
this.name = name;
this.id = id;
this.now = today;
}
public String toString(){
return this.name+":"+this.now;
}
}
Servlet: GetStocksInfo.java
import ...
/**
* Created by IntelliJ IDEA.
* User:
* Date: 2011-11-24
* Time: 10:52:01
* To change this template use File | Settings | File Templates.
*/
public class GetStocksInfo extends HttpServlet {
private HashMap<String,Stock> stocks;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet( request, response);
}
protected 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.
//2.1
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);
// json
StringBuilder builder = new StringBuilder();
//
//
// ：{
// 300001:{name:" ",yes:3000.0",tod:2990.0,now:3010.02},
// 000001:{name:" ",yes:23.22",tod:23.55,now:24.4}
// }
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("}})");
response.setContentType("text/html;charset=gb2312");
PrintWriter out = response.getWriter();
out.print(builder);
}
// （ ）， ，
@Override
public void init(ServletConfig servletConfig) throws ServletException {
stocks = new HashMap<String, Stock>();
Stock szzs = new Stock(3000.0, 2990.0, " ", "300001");
Stock pfyh = new Stock(23.22, 23.55, " ", "000001");
// Stock Map
stocks.put(szzs.getId(),szzs);
stocks.put(pfyh.getId(),pfyh);
System.out.println(stocks);
}
}
Html 페이지:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jslib/jquery-1.4.2.js"></script>
<script type="text/javascript " src="jslib/jquerystock.js"></script>
<title> </title>
</head>
<body>
<div id="300001">[url=#] :[/url]<span></span></div>
<div id="000001">[url=#] :[/url]<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>
JS 파일:
// ，
//
var obj;
var sid;
$(function(){
//
var stockNode = $("#stock").css("border","1px solid black").width("150px").css("background-color","green");
stockNode.hide();
var as = $("a");
as.mouseover(function(){
//
var aNode = $(this);
var divNode = aNode.parent();
sid = divNode.attr("id");
//
updatediv();
//
// a
var offset = aNode.offset();
stockNode.css("left",offset.left+"px").css("top",offset.top + aNode.height() +"px").css("position","absolute");
// var myEvent = event || window.event;
// stockNode.css("left",myEvent.clientX + "px").css("top",myEvent.clientY + "px");
stockNode.show();
});
as.mouseout(function(){
//
stockNode.hide();
});
//
getInfo();
//3. 1 ，
setInterval(getInfo,1000);
});
function getInfo(){
// ，
$.get("GetStocksInfo", null, function(data){
obj = eval(data);// json
// obj = data;
// ,
// js for(var stockid in obj){var stock =
// obj[stockid]}
var szzs = obj["300001"];
var pfyh = obj["000001"];
//2.2 ，
var span3 = $("#300001").children("span");
span3.html(szzs.now);
if(szzs.now > szzs.yes){
span3.css("color","red");
}else{
span3.css("color","green");
}
var span0 = $("#000001").children("span");
span0.html(pfyh.now);
if(pfyh.now > pfyh.yes){
span0.css("color","red");
}else{
span0.css("color","green");
}
updatediv();
})
}
function updatediv(){
var stockObj = obj[sid];
for(var proname in stockObj){
if(proname != "name"){
// div ， span
$("#" + proname).children("span").html(stockObj[proname]);
}
}
}
설정 파일 에 servlet 를 등록 하려 면 서버 를 시작 할 때 이 servlet 를 자동 으로 불 러 와 두 개의 아 날로 그 데이터 에 대한 초기 화 를 실현 해 야 합 니 다. 구체 적 인 설정 은 다음 웹. xml 입 니 다.
<!--load-on servlet-->
<servlet>
<servlet-name>GetStocksInfo</servlet-name>
<servlet-class>GetStocksInfo</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>GetStocksInfo</servlet-name>
<url-pattern>/GetStocksInfo</url-pattern>
</servlet-mapping>
좋은 웹페이지 즐겨찾기
