当前位置: 代码迷 >> Java Web开发 >> ajax局部有刷新有关问题
  详细解决方案

ajax局部有刷新有关问题

热度:2800   发布时间:2013-02-25 21:12:17.0
ajax局部有刷新问题
运行是无法显示局部刷新效果
代码如下:

我的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>
  相关解决方案