运行是无法显示局部刷新效果
代码如下:
我的servlet代码UpdateCounter.java
- Java code
package Servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.Random;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class UpdateCounter extends HttpServlet{ public void init() throws ServletException{} public void destroy() { super.destroy(); } @Override public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { super.doGet(req, resp); } @Override public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/xml"); resp.setCharacterEncoding("UTF-8"); PrintWriter out =resp.getWriter(); //创建一个随机数发生器 Random rmd = new Random(); //create return client's 统计数据xml文档 out.println("<response>"); //product 6 data as 实时的数据统计 for(int i=0; i<6; i++) { out.println("<counter>"+rmd.nextInt(100)+"</counter>");//随机挑选一个0到100的数字 } out.println("</response>"); out.flush(); out.close(); }}
web.xml配置
- XML code
<servlet> <servlet-name>UpdateCounter</servlet-name> <servlet-class>servlet.UpdateCounter</servlet-class> </servlet> <servlet-mapping> <servlet-name>UpdateCounter</servlet-name> <url-pattern>/UpdateCounter</url-pattern> </servlet-mapping>
我的htnl页面counterHtml
- HTML code
<!DOCTYPE html><html> <head> <title>counterHtml</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <script language="javascript"> //定义一个变量用来存储xmlHttpRequest对象 var xmlHttp; //该函数用于创建一个xmlHttpRequest对象 function createXMLHttpRequest() { if(window.ActiveXObject) { xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } //这是一个通过ajax刷新统计图的方法 function autoFlush() { //创建日期变量时间变量 var tempTime = new Date(); var tempParameter = tempTime.getTime(); //创建一个xmlHttpRequest对象 createXMLHttpRequest(); //将状态触发器绑定到一个函数 xmlHttp.onreadystatechange=processor; //这里放置一个时间参数是为了让服务器知道这是一个新的请求 xmlHttp.open("GET","UpdateCounter?rmd="+tempParameter); //请求发送 xmlHttp.send(null); } //处理从服务器返回的xml文档 function processor() { //定义一个变量用于存储从服务器返回的结果 var result; if(xmlHttp.readyState==4)//如果响应完成 { if(xmlHttp.status==200)//如果返回成功 { //取出服务器返回的xml文档的所有counter标签的子节点 result = xmlHttp.responseXML.getElementsByTagName("counter"); //解析xml中的数据并更新统计图状态 for(var i=0;i<result.length;i++) { //用于统计数据更新统计图片状态 var tempHeight = result[i].childNodes[0].nodeValue; document.getElementById("bar"+i).height= tempHeight; } } } } //每隔一秒就执行一次autoFlush方法 setInterval("autoFlush();",1000); </script> <body> <table border="0" bgcolor="#c0c0c0" width="360"> <tr><td colspan="6" align="center"><h2>指标动态统计图</h2></td></tr> <tr height="100" align="center" valign="bottom"> <td><img id="bar0" src="images/bar0.png" width="20"></td> <td><img id="bar1" src="images/bar1.png" width="20"></td> <td><img id="bar2" src="images/bar2.png" width="20"></td> <td><img id="bar3" src="images/bar3.png" width="20"></td> <td><img id="bar4" src="images/bar4.png" width="20"></td> <td><img id="bar5" src="images/bar5.png" width="20"></td> </tr> <tr height="20" align="center"> <td>指标一</td> <td>指标二</td> <td>指标三</td> <td>指标四</td> <td>指标五</td> <td>指标六</td> </tr> </table> </body></html>