ajax jqplot ssh实现图表的持续更新

实现功能：

  1. 数据库有新数据图表会更新到
  2. 数据库查询使用ssh框架中的hibernate

想法：

  • 画图表的ajaxautoruncopy.jsp利用ajax收到7-13.jsp传过来的数据
  • 7-13.jsp实例化test_aa.java类，调用ta.test_aa_data()与String dataYear =ta.test_aa_data_set()方法，获得test_aa类传过来的数据，并传送给ajaxautoruncopy.jsp
  • test_aa.java接入spring的applicationContext.xml调用ssh中的hibernate的查询方法进行查数据
  • 在ajaxautoruncopy.jsp中有个小线程setTimeout("sendRequest()", 1000)，每隔一定时间进行重新取数据与重绘图表

ajaxautoruncopy.jsp

  1 <%@include file="jqplotinclude.txt"%>
  2 <%@ page language="java" pageEncoding="UTF-8"%>
  3 <%@ taglib prefix="s" uri="/struts-tags"%>
  4 <%
  5 String path = request.getContextPath();
  6 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  7 %>
  8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  9 <html>
 10   <head>    
 11     <title>My JSP 'autoRefresh.jsp' starting page</title>
 12     
 13     <meta http-equiv="pragma" content="no-cache">
 14     <meta http-equiv="cache-control" content="no-cache">
 15     <meta http-equiv="expires" content="0">    
 16     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 17     <meta http-equiv="description" content="This is my page">
 18     <!-- Additional plugins go here -->
 19 
 20     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.logAxisRenderer.min.js"></script>
 21     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
 22     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
 23     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
 24     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.dateAxisRenderer.min.js"></script>
 25     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
 26     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
 27     <!--
 28     <link rel="stylesheet" type="text/css" href="styles.css">
 29     -->
 30 
 31   </head>
 32   <script language="javascript">
 33   
 34 var XMLHttpReq;
 35      //创建XMLHttpRequest对象       
 36     function createXMLHttpRequest() {
 37         if(window.XMLHttpRequest) { //Mozilla 浏览器
 38             XMLHttpReq = new XMLHttpRequest();
 39         }
 40         else if (window.ActiveXObject) { // IE浏览器
 41             try {
 42                 XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
 43             } catch (e) {
 44                 try {
 45                     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
 46                 } catch (e) {}
 47             }
 48         }
 49     }
 50     //发送请求函数
 51     function sendRequest() {
 52         createXMLHttpRequest();
 53         var url = "7-13.jsp";
 54         XMLHttpReq.open("GET", url, true);
 55         XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
 56         XMLHttpReq.send(null);  // 发送请求
 57         
 58         
 59     }
 60     // 处理返回信息函数
 61     function processResponse() {
 62         if (XMLHttpReq.readyState == 4) { // 判断对象状态
 63             if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
 64                 DisplayHot();
 65             //一定时间后重新加载sendRequest()方法
 66                 setTimeout("sendRequest()", 1000);
 67             } else { //页面不正常
 68                 window.alert("您所请求的页面有异常。");
 69             }
 70         }
 71     }
 72     function DisplayHot() {
 73         var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
 74         var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;
 75         document.getElementById("product").innerHTML = name;    
 76         document.getElementById("count").innerHTML = count;    
 77         var dataYear = XMLHttpReq.responseXML.getElementsByTagName("dataYear")[0].firstChild.nodeValue;
 78     //    document.getElementById("data").innerHTML =dataYear;
 79 //alert(<%=session.getAttribute("dataYear") %>);        
 80 //alert(dataYear);
 81         var data =eval(dataYear);
 82 //alert(data);
 83         var line2 =data;
 84 // alert(line2);
 85 
 86 //         var line2 =XMLHttpReq.responseXML.getElementsByTagName("dataYear")[0].firstChild.nodeValue;
 87         document.getElementById("chart2").innerHTML = "";
 88          var plot2 = $.jqplot('chart2', [line2], {
 89            axes: {      
 90              xaxis: {
 91                renderer: $.jqplot.DateAxisRenderer,
 92                label: 'Incliment Occurrance', 
 93                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
 94                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
 95                tickOptions: {
 96                    // labelPosition: 'middle',
 97                    angle: 15
 98                }
 99              },
100              yaxis: {
101                label: 'Incliment Factor',
102                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
103              }
104            }
105          });
106          
107     }
108 </script>
109 <body onload =sendRequest()>
110 
111 
112 <table style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=200    bgColor=#f5efe7 border=0>
113 
114 <TR>
115    <TD align=middle bgColor=#dbc2b0 height=19 colspan="2"><B>正在热卖的笔记本</B> </TD>
116 </TR>
117 <tr>
118    <td height="20"> 型号：</td>
119    <td height="20" id="product"> </td>
120 </tr>
121 <tr>
122    <td height="20"> 销售数量：</td>
123    <td height="20" id="count"> </td>
124 </tr>
125 </table>
126 <div class="example-plot" id="chart2"></div>
127 <input type="button" value="画图" onclick="createjqplot()"/>
128 </body> 
129 </html>

7-13.jsp

 1 <%@ page language="java" pageEncoding="UTF-8"%>
 2 
 3 <%@ page language="java" %>
 4 
 5 <%@ page import="com.mysql.jdbc.Driver" %>
 6 
 7 <%@ page import="java.sql.*" %>
 8 <%@ page import="com.ynwi.ssh.test.test_aa" %>
 9 
10 <%
11 test_aa ta =new test_aa();
12 ta.test_aa_data();
13 String dataYear =ta.test_aa_data_set();
14 response.setContentType("text/xml; charset=UTF-8");
15 response.setHeader("Cache-Control","no-cache");
16 out.println("<response>"); 
17 for(int i=0;i<3;i++){
18 //out.print("str为："+ strdiv);
19 out.print("<dataYear>"+dataYear+
20            "</dataYear>");
21 //out.print(dataYear);
22 out.println("<name>"+(int)(Math.random()*10)+
23            "型笔记本</name>");
24 out.println("<count>" +(int)(Math.random()*100)+ "</count>");
25 }
26 out.println("</response>");
27 out.close();
28 %>

test_aa.java

 1 package com.ynwi.ssh.test;
 2 
 3 import java.net.URL;
 4 
 5 import org.springframework.context.support.FileSystemXmlApplicationContext;
 6 
 7 import com.opensymphony.xwork2.util.ResolverUtil.Test;
 8 import com.ynwi.ssh.beans.Meter_param_Data;
 9 import com.ynwi.ssh.daoImpl.TestDao;
10 
11 public class test_aa {
12     private TestDao testdao;
13     private static String daaa;
14     public TestDao getTestdao() {
15         return testdao;
16     }
17 
18     public void setTestdao(TestDao testdao) {
19         this.testdao = testdao;
20     }
21    public void test_aa_data(){
22        Meter_param_Data mpd = new Meter_param_Data();
23         test_aa ta=(test_aa)new FileSystemXmlApplicationContext("file:E:/Workspace_newSSH/SSH_jqplot/WebRoot/WEB-INF/applicationContext.xml").getBean("test_aa");
24         daaa =ta.testdao.RTfindObject(mpd);
25 System.out.println("test_aa_data:"+daaa);
26    }
27    public String test_aa_data_set(){
28    System.out.println("test_aa_data_set:"+daaa);
29        return daaa;
30    }
31 
32 }

还有hibernate等的一些代码就不贴出来了.

小弟初学！若有什么错误或建议很感谢各位的提出！

另外，对于test_aa.java中第23行的file:E:/Workspace_newSSH/SSH_jqplot/WebRoot/WEB-INF/applicationContext.xml，我不想输入绝对地址的，但尝试了几个办法获取applicationContext.xml的地址都不行，主要是在tomcat运行下获取的地址会是tomcat机制下的地址，例如：e:/tomcat/.....但我不要获取这个地址，我要获取的是E:/Workspace_newSSH/SSH_jqplot这个字符串，我也上百度提问了下，在http://zhidao.baidu.com/question/584875712.html?quesup2&oldq=1，有人知道的可以帮我下?

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cnJun/p/3279519.html