AJAX实现的动态条形图

yinxiangbing · 发表于 2013-1-23 02:53:46

表现层：
<%@ 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.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;
   }
}

		自动登录	找回密码
密码			立即注册