使用Servlet+JSON实现股票信息实时更新

2025-01-21 技术教程

使用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 > <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>三、实现效果