AJAX基础教程－7 AutoRefresh Page

js 代码

<script type=< span="">"text/javascript">
var xmlHttp;
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
        }
    }
    function doStart() {
        createXMLHttpRequest();
        var url = "DynamicUpdate?task=reset";
        xmlHttp.open("GET", url, true);
        xmlHttp.onreadystatechange = startCallback;
        xmlHttp.send(null);
    }
    function startCallback() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
            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;
        if (new_int_val > -1) {
        setTimeout("refreshTime()", 1000);
        time_span.innerHTML = new_int_val;
        } else {
        time_span.innerHTML = 5;
        }
    }

    function pollCallback() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                var message =
                xmlHttp.responseXML
                .getElementsByTagName("message")[0].firstChild.data;
                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);
                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>

java 代码

package ajax.foundations_of_ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DynamicUpdateServlet extends HttpServlet {
    private int counter = 1;

    /**
     * Handles the HTTP GET method.
     *
     * @param request
     *            servlet request
     * @param response
     *            servlet response
     */
    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 stage";
                break;
            case 2:
                message = "iPods rock";
                break;
            case 3:
                message = "Steve says Macs rule";
                break;
            case 4:
                message = "Change is coming";
                break;
            case 5:
                message = "Yes, OS X runs on Intel - has for years";
                break;
            case 6:
                message = "Macs will soon have Intel chips";
                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></response>");
        out.println(res);
        out.println("");
        out.close();
    }
}

• Dynamic Update.rar (1.7 KB)
• 下载次数: 15

分享到：

AJAX基础教程－8 Tool Tips | AJAX基础教程－6 Dynamic List

• 2007-02-13 10:59
• 浏览 1513
• 评论(0)
• 查看更多

相关推荐

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