ajax+java+javaScript 实现直方图

原创

wglzaj 2012-02-21 11:13:46 博主文章分类：开发技术-JAVA ©著作权

文章标签 java ajax javaScript 休闲直方图 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者wglzaj的原创作品，请联系作者获取转载授权，否则将追究法律责任

1----------------------------------------------------

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<display-name>dynMusic</display-name>
<servlet>
    <servlet-name>sentrandomvalues</servlet-name>
    <servlet-class>ajaxtest.SentRandomValues</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>sentrandomvalues</servlet-name>
    <url-pattern>/sentrandomvalues</url-pattern>
</servlet-mapping>
</web-app>
2-----------------------------------------------

index.jsp

--<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
index
</title>
</head>
<body>
<object type="p_w_picpath/svg+xml" data="musicRec.svg"
width="100%" height="100%">
</object>
</body>
</html>

3,----------------------------------------------------------------

musicRec.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" onload="timeEvent()">

function showCustomer()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="sentrandomvalues";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
var xmlDoc=xmlHttp.responseXML.documentElement;

random1=xmlDoc.getElementsByTagName("para")[0].childNodes[0].nodeValue;
random2=xmlDoc.getElementsByTagName("para")[2].childNodes[0].nodeValue;
random3=xmlDoc.getElementsByTagName("para")[1].childNodes[0].nodeValue;
random4=xmlDoc.getElementsByTagName("para")[3].childNodes[0].nodeValue;

create_a(random1,random2,random3,random4);
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    }
catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}
return xmlHttp;
}

function create_a(random1,random2,random3,random4)
{
var rect1=document.getElementById("rect1");
var rect2=document.getElementById("rect2");
var rect3=document.getElementById("rect3");
var rect4=document.getElementById("rect4");

var text1=document.getElementById("text1");
var text2=document.getElementById("text2");
var text3=document.getElementById("text3");
var text4=document.getElementById("text4");

rect1.setAttribute("height",250-random1);
rect1.setAttribute("y",2+eval（random1));

rect2.setAttribute("height",250-random2);
rect2.setAttribute("y",2+eval（random2));//如果写成2＋random2时，会出现字符串相加

rect3.setAttribute("height",250-random3);
rect3.setAttribute("y",2+eval（random3));

rect4.setAttribute("height",250-random4);
rect4.setAttribute("y",2+eval（random4));

}
</script>

<rect x="2" y="2" width="250" height="250"
        fill="none" stroke="blue" stroke-width="2" />

//<text id="text1" x="15" y="50"></text>
//<text id="text2" x="15" y="75"></text>
//<text id="text3" x="15" y="100"></text>
//<text id="text4" x="15" y="125"></text>

<g fill="yellow" stroke="red" stroke-width="1">
      <rect id="rect1" x="125" y="2" height="250" width="15"/>
      <rect id="rect2" x="100" y="2" height="250" width="15"/>
      <rect id="rect3" x="75" y="2" height="250" width="15"/>
      <rect id="rect4" x="50" y="2" height="250" width="15"/>
</g>
</svg>
4,----------------------------------------------------------

SerntRandomValues.java

package ajaxtest;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;

public class SentRandomValues extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=GBK";

//Initialize global variables
public void init() throws ServletException {
}

//Process the HTTP Get request
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/xml");
    response.setHeader("Cache-Control","no-cache");
    StringBuffer sb=new StringBuffer("<randomValue>");
      sb.append("<para>");
    sb.append(((Math.random()*250)));
     sb.append("</para>");
     sb.append("<para>");
sb.append(((Math.random()*250)));
sb.append("</para>");

     sb.append("<para>");
   sb.append(((Math.random()*250)));
    sb.append("</para>");

sb.append("<para>");
sb.append(((Math.random()*250)));
sb.append("</para>");

    sb.append("</randomValue>");
    PrintWriter out = response.getWriter();
    System.out.println(sb.toString());
    out.print(sb.toString());
    out.flush();
}

//Process the HTTP Post request
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}

//Clean up resources
public void destroy() {
}
}