ajax jqplot ssh实现图表的持续更新
实现功能:
- 数据库有新数据图表会更新到
- 数据库查询使用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,有人知道的可以帮我下?