• 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,有人知道的可以帮我下?

  • 相关阅读:
    Elasticsearch7.6 环境部署
    JavaScript的语法
    如何在页面中引入JS教程
    什么是.bat文件
    window对象的一些其他通用函数
    history对象
    location对象
    32位与64位系统基本数据类型的字节数
    cygwin中运行python不能进入交互模式
    在Cygwin上安装编辑器vim
  • 原文地址:https://www.cnblogs.com/cnJun/p/3279519.html
Copyright © 2020-2023  润新知