注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

断尘居

温柔的男人像海洋。

 
 
 
 
 

日志

 
 

Ajax实现自动刷新  

2010-09-17 03:55:45|  分类: JS / jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script type="text/javascript">
/*
*@author Patrick Liang
*@date 2006-05-14
*/
 var xmlHttp;
 function createXMLHttpRequest()
 {
  if(window.ActiveXObject)
  {
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }else if(window.XMLHttpRequest)
  {
   xmlHttp=new XMLHttpRequest();
  }
 }

 function doStart()
 {
  createXMLHttpRequest();
  var url="DynamicUpdateServlet?task=reset";
  xmlHttp.open("GET",url,true);
  xmlHttp.onreadystatechange=startCallback;
  xmlHttp.send(null);
 }

 function startCallback()
 {
  
  if(xmlHttp.readyState==4)
  {
   if(xmlHttp.status==200)
   { //alert(xmlHttp.status);
    setTimeout("pollServer()",5000);
    refreshTime();
   }
  }
 }

 function pollServer()
 {
  createXMLHttpRequest();
  var url="DynamicUpdateServlet?task=foo";
  xmlHttp.open("GET",url,true);
  xmlHttp.onreadystatechange=pollCallback;
  xmlHttp.send(null);
 }

 function refreshTime() //倒计时
 {
  var time_span=document.getElementById("time");
  var time_val=time_span.innerHTML;
  var int_val=parseInt(time_val);
  var new_int_val=int_val-1;
  //alert(new_int_val);
  if(new_int_val>0)
  {
   setTimeout("refreshTime()",1000);
   time_span.innerHTML=new_int_val;
  }else
  {
   time_span.innerHTML=5;
  }
 }

 function pollCallback()
 {    // alert(xmlHttp.status);
  if(xmlHttp.readyState==4)
  {
   if(xmlHttp.status==200)
   { 
    var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
    //alert(message);
    if(message!="done")
    {
     var new_row=createRow(message);
     var table=document.getElementById("dynamicUpdateArea");
     var table_body=table.getElementsByTagName("tbody").item(0);
     var first_row=table_body.getElementsByTagName("tr").item(1);
     table_body.insertBefore(new_row,first_row);
     setTimeout("pollServer()",5000);//5秒后执行 setTimeout()不会自动重启 到今天才知道 哈哈 菜鸟~~~
     refreshTime();
    }
   }
  }
 }

 function createRow(message)
 {
  var row=document.createElement("tr");
  var cell=document.createElement("td");
  var cell_data=document.createTextNode(message);
  cell.appendChild(cell_data);
  row.appendChild(cell);
  return row;
 }
</script>
<h1>Ajax Dynamic update Example</h1>
This page will automatically update itself:<input type="button" value="Launch" id="go" onclick="doStart()"/>
<p>
Page will refresh in&nbsp;<font color="red"><span id="time">5</span></font>&nbsp;seconds.
</p>
<table id="dynamicUpdateArea" align="center" border="1" width="50%">
<tbody>
 <tr id="row0" height="20" align="center"><td bgcolor="#cccccc">下面演示自动刷新新闻</td></tr>
</tbody>
</table>
</BODY>
</HTML>
DynamicUpdateServlet.java-----------------------------------------
package com.ajax;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class DynamicUpdateServlet extends HttpServlet
{
 private int counter=1;
 
 protected void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException
 {
  String res="";
  String task=request.getParameter("task");
  String message="";
  if(task.equals("reset"))
  {
   counter=1;
  }else
  {
   switch(counter)
   {
    case 1:message="steve walks on state";break;
    case 2:message="ipods rock";break;
    case 3:message="steve says macs rule";break;
    case 4:message="change is coing";break;
    case 5:message="yes os x runs on intel-has for years";break;
    case 6:message="my english name is patrick...";break;
    case 7:message="done";break;
   }
   counter++;
  }
  res="<message>"+message+"</message>";
  PrintWriter out=response.getWriter();
  response.setContentType("text/xml");
  response.setHeader("Cache-Control","no-cache");
  out.println("<response>");
  out.println(res);
  out.println("</response>");
  out.close();
 }
}

  评论这张
 
阅读(2406)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017