`
wangtong40
  • 浏览: 252930 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX基础教程-7 AutoRefresh Page

阅读更多
js 代码
  1. <script type=< span="">"text/javascript">   
  2. var xmlHttp;   
  3.     function createXMLHttpRequest() {   
  4.         if (window.ActiveXObject) {   
  5.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  6.         }   
  7.         else if (window.XMLHttpRequest) {   
  8.         xmlHttp = new XMLHttpRequest();   
  9.         }   
  10.     }   
  11.     function doStart() {   
  12.         createXMLHttpRequest();   
  13.         var url = "DynamicUpdate?task=reset";   
  14.         xmlHttp.open("GET", url, true);   
  15.         xmlHttp.onreadystatechange = startCallback;   
  16.         xmlHttp.send(null);   
  17.     }   
  18.     function startCallback() {   
  19.         if (xmlHttp.readyState == 4) {   
  20.             if (xmlHttp.status == 200) {   
  21.             setTimeout("pollServer()", 5000);   
  22.             refreshTime();   
  23.             }   
  24.         }   
  25.     }   
  26.   
  27.     function pollServer() {   
  28.         createXMLHttpRequest();   
  29.         var url = "DynamicUpdateServlet?task=foo";   
  30.         xmlHttp.open("GET", url, true);   
  31.         xmlHttp.onreadystatechange = pollCallback;   
  32.         xmlHttp.send(null);   
  33.     }   
  34.        
  35.     function refreshTime(){   
  36.         var time_span = document.getElementById("time");   
  37.         var time_val = time_span.innerHTML;   
  38.         var int_val = parseInt(time_val);   
  39.         var new_int_val = int_val - 1;   
  40.         if (new_int_val > -1) {   
  41.         setTimeout("refreshTime()", 1000);   
  42.         time_span.innerHTML = new_int_val;   
  43.         } else {   
  44.         time_span.innerHTML = 5;   
  45.         }   
  46.     }   
  47.        
  48.     function pollCallback() {   
  49.         if (xmlHttp.readyState == 4) {   
  50.             if (xmlHttp.status == 200) {   
  51.                 var message =   
  52.                 xmlHttp.responseXML   
  53.                 .getElementsByTagName("message")[0].firstChild.data;   
  54.                 if (message != "done") {   
  55.                 var new_row = createRow(message);   
  56.                 var table = document.getElementById("dynamicUpdateArea");   
  57.                 var table_body =   
  58.                 table.getElementsByTagName("tbody").item(0);   
  59.                 var first_row =   
  60.                 table_body.getElementsByTagName("tr").item(1);   
  61.                 table_body.insertBefore(new_row, first_row);   
  62.                 setTimeout("pollServer()", 5000);   
  63.                 refreshTime();   
  64.                 }   
  65.             }   
  66.         }   
  67.     }   
  68.        
  69.     function createRow(message) {   
  70.         var row = document.createElement("tr");   
  71.         var cell = document.createElement("td");   
  72.         var cell_data = document.createTextNode(message);   
  73.         cell.appendChild(cell_data);   
  74.         row.appendChild(cell);   
  75.         return row;   
  76.     }   
  77. </script>  
java 代码
  1. package ajax.foundations_of_ajax;   
  2.   
  3. import java.io.IOException;   
  4. import java.io.PrintWriter;   
  5.   
  6. import javax.servlet.ServletException;   
  7. import javax.servlet.http.HttpServlet;   
  8. import javax.servlet.http.HttpServletRequest;   
  9. import javax.servlet.http.HttpServletResponse;   
  10.   
  11. public class DynamicUpdateServlet extends HttpServlet {   
  12.     private int counter = 1;   
  13.   
  14.     /**  
  15.      * Handles the HTTP GET method.  
  16.      *   
  17.      * @param request  
  18.      *            servlet request  
  19.      * @param response  
  20.      *            servlet response  
  21.      */  
  22.     protected void doGet(HttpServletRequest request,   
  23.             HttpServletResponse response) throws ServletException, IOException {   
  24.         String res = "";   
  25.         String task = request.getParameter("task");   
  26.         String message = "";   
  27.         if (task.equals("reset")) {   
  28.             counter = 1;   
  29.         } else {   
  30.             switch (counter) {   
  31.             case 1:   
  32.                 message = "Steve walks on stage";   
  33.                 break;   
  34.             case 2:   
  35.                 message = "iPods rock";   
  36.                 break;   
  37.             case 3:   
  38.                 message = "Steve says Macs rule";   
  39.                 break;   
  40.             case 4:   
  41.                 message = "Change is coming";   
  42.                 break;   
  43.             case 5:   
  44.                 message = "Yes, OS X runs on Intel - has for years";   
  45.                 break;   
  46.             case 6:   
  47.                 message = "Macs will soon have Intel chips";   
  48.                 break;   
  49.             case 7:   
  50.                 message = "done";   
  51.                 break;   
  52.             }   
  53.             counter++;   
  54.         }   
  55.         res = "<message></message>" + message + "";   
  56.         PrintWriter out = response.getWriter();   
  57.         response.setContentType("text/xml");   
  58.         response.setHeader("Cache-Control""no-cache");   
  59.         out.println("<response></response>");   
  60.         out.println(res);   
  61.         out.println("");   
  62.         out.close();   
  63.     }   
  64. }   
分享到:
评论

相关推荐

    Super-Auto-Refresh_v2.5.1.crx 谷歌浏览器自动刷新插件 很好用的

    Super-Auto-Refresh_v2.5.1.crx 谷歌浏览器自动刷新插件 很好用的 具体安装方法很简单:先改后缀成压缩文件解压,然后打开谷歌浏览器更多工具菜单:扩展程序、打开开发者模式、加载已解压的扩展程序,就可以了。

    Ultra-Pull-To-Refresh上拉加载的使用事例

    在这个“Ultra-Pull-To-Refresh-With-Load-More”使用示例中,我们将深入探讨如何集成和使用这个库来优化你的Android应用。 首先,我们来看一下“上拉加载”这一功能。在传统的滚动视图中,用户只能通过手动滚动到...

    Ultra-pull-to-refresh 三方库

    《深入解析Ultra-pull-to-refresh三方库》 在Android应用开发中,下拉刷新(Pull-to-Refresh)功能已经成为许多应用的标准配置,它允许用户通过简单地向下拉动列表来更新内容。 Ultra-pull-to-refresh 是一个流行的...

    谷歌自动刷新插件

    插件名为Free-Auto-Refresh_v1.0.4,其版本号为1.0.4,表明这是该插件的一个稳定版本,可能包含了开发者对功能的优化和一些错误修复。用户可以通过安装此插件,在谷歌浏览器中享受到定时刷新的便利性。 在安装过程...

    android-Ultra-Pull-To-Refresh

    《深入解析Android Ultra Pull To Refresh框架》 在移动应用开发中,用户界面的交互体验是至关重要的,下拉刷新功能便是提升用户体验的一大亮点。本文将详细介绍Android中的一个优秀下拉刷新框架——"android-Ultra...

    Super-Auto-Refresh_v2.5.1.crx.gz

    谷歌浏览器打开提示此扩展程序可能已损坏该怎么办,打开以下地址,标黄选项改为bootstap 即可 chrome://flags/#extension-content-verification

    mina-pull-down-refresh-master.zip

    "mina-pull-down-refresh-master.zip"这个压缩包提供的解决方案,旨在完美解决这一难题。 1. 微信小程序ScrollView概述: 微信小程序中的ScrollView组件是用于展示可滚动内容的容器,可以垂直或水平滚动。它支持...

    vuepulltorefresh是Vue20上下拉刷新

    8. **版本管理**:从`vue-pull-to-refresh-master`这个文件名来看,你可能使用的是源码版本,建议查看其GitHub仓库或NPM文档以获取最新版本和详细使用指南。 在实际项目中,`vue-pull-to-refresh`能够帮助开发者...

    Pushlet的Ajax-pushlet-client.js分析

    《Pushlet的Ajax-pushlet-client.js深度解析》 在当今的Web开发中,实时通信技术已经成为了一项不可或缺的技能,而Pushlet的Ajax-pushlet-client.js则是实现服务器“推”技术的重要工具。本文将深入剖析这个...

    Pull-to-Refresh.Rentals-Android.zip

    "Pull-to-Refresh.Rentals-Android.zip" 是一个针对Android平台的开源库,由知名设计与开发团队Yalantis创建。这个库专注于提供一种可定制的下拉刷新功能,使得用户在滚动列表到顶部时可以轻松触发数据的更新。在...

    Chrome自动刷新插件:Auto Refresh

    Chrome自动刷新插件:Auto Refresh是一款可以自行在Chrome中定制刷新时间的谷歌浏览器插件,用户只需要简单的设置就可以让Chrome完成有用但无聊的定时重复刷新的操作。 Auto Refresh的使用方式也是非常的简单,可以...

    浏览器插件 Auto Refresh Plus 7.4.4 ctx

    "Auto Refresh Plus" 是这样一款专为自动刷新网页设计的插件,版本号为7.4.4,简称"AutoRefreshPlus"。这款插件特别适合那些需要实时监控网页更新或者数据变化的用户,例如程序员、股市投资者或者新闻追踪者。 首先...

    酷炫的几款下拉刷新框架之Phoenix Pull-To-Refresh示例

    此资源为 酷炫的几款下拉刷新框架之Phoenix Pull-To-Refresh的实例代码,详情请点击http://blog.csdn.net/qq347198688/article/details/52518150

    Pull-to-Refresh.Rentals-Android开源代码

    "Pull-to-Refresh.Rentals-Android开源代码"是一个针对Android平台的开源项目,它实现了经典的下拉刷新功能,常用于列表视图(ListView)。这个项目源自GitHub,但原版可能需要一定的配置才能在Android环境中正常运行...

    vue-pull-refresh-Vue.js 2.0的刷新刷新组件。-Vue.js开发

    vue-pull-refresh vuejs 2.0针对移动设备实现的下拉刷新组件。 演示演示PS:请使用支持Promise用法的浏览器安装vue-pull-refresh vuejs 2.0用于移动设备的下拉刷新组件实现。 演示演示PS:请使用支持Promise用法的...

    HTML5 jquery-pull-refresh移动端web上拉下拉刷新.rar

    HTML5 jquery-pull-refresh适用移动web上拉下拉刷新,经过简单的整理,非常适合二次开发,手机端上拉刷新下拉加载更多页面。适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及...

    [开源][安卓][下拉刷新]Pull-to-Refresh.Rentals-Android-master

    [开源][安卓][下拉刷新]Pull-to-Refresh.Rentals-Android-master

Global site tag (gtag.js) - Google Analytics