使用servlet+json實現股票信息實時更新
一、服務端代碼
1、Stock.java
package bean;
public class Stock {
private String code;
private String name;
private int 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 int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
}
2、ActionServlet.java
package web;
import java.io.IOException;
import java.io.PrintWriter;
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 bean.Stock;
import net.sf.json.JSONArray;
public class ActionServlet extends HttpServlet{
public void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
System.out.println("service()");
//獲得請求路徑
String uri=request.getRequestURI();
System.out.println(uri);
//分析請求路徑
String action=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
System.out.println(action);
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
if("/quoto".equals(action)){
//模擬生成幾支股票信息
List<Stock> stocks=new ArrayList<Stock>();
Random r=new Random();
for(int i=0;i<8;i++){
Stock s=new Stock();
s.setCode("600877"+r.nextInt(10));
s.setName("中國嘉陵"+r.nextInt(100));
s.setPrice(10+r.nextInt(1000));
stocks.add(s);
}
//fromObject方法的參數可以是屬豬或者結合
JSONArray jsonArr=JSONArray.fromObject(stocks);
String jsonStr=jsonArr.toString();
System.out.println(jsonStr);
out.println(jsonStr);
}
}
}
3、web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<display-name>ajax-day02</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>
4、pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>cn.qiuuuu</groupId>
<artifactId>ajax-day02</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
</dependencies>
</project>
二、客戶端代碼
1.stock.jsp
<%@ page 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>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){//頁面加載完成就會執行此代碼
setInterval(quoto,50);//每隔5秒鐘執行quoto函數
});
function quoto(){//該函數通過調用ajax對象（AMLHttpRequest）向服務器發送異步請求，服務器返回一個描述股票信息的字符串，通過解析json字符串，獲得股票信息，然後更新表格
$.ajax({//利用jQuery提供的方法向服務器發送異步請求
"url":"quoto.do",
"type":"post",
"dataType":"json",
"success":function(stocks){
//$.ajax會自動將json字符串轉換成JavaScript對象
//清空tbody
$('#tb1').empty();
for(i=0;i<stocks.length;i++){
var s=stocks[i];
//更新表格
$('#tb1').append('<tr><td>'+s.code+'</td><td>'+s.name+'</td><td>'+s.price+'</td></tr>');
}
}
});
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width:450px;
height:350px;
background-color:black;
margin-left:300px;
margin-top:20px;
}
#d2{
height:40px;
background-color:red;
color:yellow;
}
table{
color:white;
font-style:italic;
font-size:24px;
}
</style>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d2">股票行情</div>
<div id="d3">
<table width="100%">
<thead>
<tr>
<td>代碼</td>
<td>名稱</td>
<td>價格</td>
</tr>
</thead>
<tbody id="tb1">
</tbody>
</table>
</div>
</div>
</body>
</html>
三、實現效果
![使用Servlet+JSON實現股票信息實時更新]()
