`

AJAX实现的动态条形图

阅读更多

表现层:

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<title></title>
<head>
<script type="text/javascript">
  //定义一个变量用于存放XMLHttpRequest对象
  var xmlHttp;
  //该函数用于创建一个XMLHttpRequest对象
  function createXMLHttpRequest(){
         if(window.ActiveXObject){
             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }else if(window.XMLHttpRequest){
             xmlHttp = new XMLHttpRequest();
         }
  }
  //这 是响应省份列表onChange事件的处理方法
    function autoFlush(){
        // 创建一个日期变量和一个时间变量
  var   tempTime = new Date();
  var tempParameter = tempTime.getTime();
 
  //创建一个XMLHttpRequest对象
  createXMLHttpRequest();
  //将状态触发器绑定到一个processor函数
  xmlHttp.onreadystatechange = processor;
  //通过GET方法向指定的URL建立服务器的调用
  xmlHttp.open("GET","updateCounter.action?rnd="+tempParameter,true);
  //发送请求
  xmlHttp.send(null);
  }
  //这是一个用来处理状态改变的函数
  function processor(){
  //定义一个变量用于存放从服务器返回的响应结果
  var result;
  if(xmlHttp.readyState == 4){//如果响应完成
    if(xmlHttp.status == 200){//如果返回成功
     //取出服务器返回的XML文档的所有标签的子节点响应内容
    var docXML = xmlHttp.responseXML;
    
     result = docXML.getElementsByTagName("counter");
     for(var i =0;i<result.length;i++){
     //用相应的统计数据更新统计图片的状态
      var tempHeight = result[i].childNodes[0].nodeValue;
      document.getElementById("bar"+i).height = tempHeight;
     }
    }
  }
  }
     setInterval("autoFlush();",1000);
</script>
</head>
<body>
<center>
  <table border="0" bgcolor="#c0c0c0" width="360px">
  <tr><td colspan="6" align="center"><h2>指标动态统计数</h2></td>
    </tr>
 <tr height="100" align="center" valign="bottom">
        <td><img id="bar0" src="/images/bar0.gif" width="20"></td>
        <td><img id="bar1" src="/images/bar1.gif" width="20"></td>
  <td><img id="bar2" src="/images/bar2.gif" width="20"></td>
  <td><img id="bar3" src="/images/bar3.gif" width="20"></td>
  <td><img id="bar4" src="/images/bar4.gif" width="20"></td>
  <td><img id="bar5" src="/images/bar5.gif" width="20"></td>
    </tr>
 <tr>
  <td>指标一</td>
  <td>指标二</td>
  <td>指标三</td>
  <td>指标四</td>
  <td>指标五</td>
  <td>指标六</td>
 </tr>
</table>
</center>
</body>
</html>

 

控制层

package com.dicorp.ajax.ajax_web.actions;

 

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Properties;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/*import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
*/
/*import org.jdom.Document;
import org.jdom.Element;
import org.jdom.output.Format;
import org.jdom.output.XMLOutputter;
import org.w3c.dom.CDATASection;
import org.w3c.dom.Comment;
import org.w3c.dom.ProcessingInstruction;
import org.w3c.dom.Text;
 */
  

import com.dicorp.ajax.ajax_web.createXMLUtils.CreateCounterXMLUtil;
import com.opensymphony.webwork.ServletActionContext;
import com.opensymphony.webwork.interceptor.ServletRequestAware;
import com.opensymphony.webwork.interceptor.ServletResponseAware;
import com.opensymphony.xwork.Action;
import com.opensymphony.xwork.ActionContext;

import   javax.xml.transform.*;  
import   javax.xml.transform.dom.*;  
import   javax.xml.transform.stream.*;  
import   org.w3c.dom.*;  
import   java.io.*;  
import java.net.URI;

import   javax.xml.parsers.*;  
import   java.util.*;  

public class UpdateCounterAction  implements Action ,ServletResponseAware,ServletRequestAware{
    private String selected;
    private HttpServletResponse response;
    private HttpServletRequest request;
 

 public String getSelected() {
  return selected;
 }
 public void setSelected(String selected) {
  this.selected = selected;
 }
 public String execute() throws Exception {
  String content = "";
     Random rnd = new Random();
     for(int i = 0;i<6;i++){
      content   = content + rnd.nextInt(100)+",";
     }
  
    
     CreateCounterXMLUtil.createXML("",content);
     return SUCCESS;
 }
 public void setServletResponse(HttpServletResponse response) {
   this.response  = response;
 }
 
 
 public void setServletRequest(HttpServletRequest request) {
  
  this.request = request;
   }
}

分享到:
评论

相关推荐

    Spring+Ajax+EcCharts,数据库数据读取到显示

    用Spring+Ajax,从数据库数据读取数据。传递给ECharts对象,并显示为条形图。代码未精简(有少量注释掉的无用代码),主要实现是"echarts5.jsp"。 内含数据库截图。

    c# msChart(图形统计控件)开发的流量录入系统(附mssql数据库)

    点击统计图上面的坐标可以对数据进行修改...这是以前公司的一个小型流量录入系统,用msChart控件+Ajax实现,用户权限变更功能还未完善,不过不影响体验。 对msChart感兴趣的朋友可以了解一下,数据库是用的mssql2005。

    向日葵甘特图组件

    &lt;br&gt;界面一致性:界面整体风格与MS Project完全一致,也可以自定义表格区显示列,条形图的形状,链接线的样式。而且Web技术中的样式表为向日葵甘特图组件提供了无限的变化可能。 &lt;br&gt;API一致性:向日葵甘特...

    ASP.NET开发实战1200例(第Ⅰ卷)第二十章

    实例523 绘制商品条形码(可选择输出文字) 788 实例524 在图片上添加水印文字(支持批量 水印) 790 实例525 在图片上添加水印图片 792 实例526 在线制作Logo图标 794 实例527 生成图片的高清缩略图(结合 AJAX)...

    JAVA上百实例源码以及开源项目

    百度云盘分享 ... Java实现的FTP连接与数据浏览程序,实现实例化可操作的窗口。  部分源代码摘录:  ftpClient = new FtpClient(); //实例化FtpClient对象  String serverAddr=jtfServer.getText();...

    java开源包3

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包4

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    JAVA上百实例源码以及开源项目源代码

    5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...

    Ext Js权威指南(.zip.001

    4.4.4 实现动态加载:ext.loader / 151 4.4.5 管理类的类:ext.classmanager / 159 4.4.6 类创建的总结 / 161 4.5 动态加载的路径设置 / 163 4.6 综合实例:页面计算器 / 165 4.7 本章小结 / 169 第5章 ext ...

    java开源包1

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包11

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包2

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包6

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包5

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包10

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包8

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包7

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    java开源包9

    利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...

    Java_Web开发实战1200例第1卷.part2

    11.3 通过组件实现文件上传 418 11.4 文件下载 428 第12章 文件的批量管理 436 12.1 文件的批量操作 437 12.2 文件的压缩与解压缩 458 12.3 文件的批量上传 487 第3篇 图像与多媒体篇 第13章 图像生成 492 13.1 绘制...

Global site tag (gtag.js) - Google Analytics