如何设置ajax自动刷新,Ajax创建自动刷新页面

1.dynamicUpdate.html

Ajax Dynamic Update

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) {

setTimeout("pollServer()",5000);

refreshTime();

}

}

}

function pollServer() {

createXMLHttpRequest();

var url = "DynamicUpdateServlet?task=foo";

xmlHttp.open("GET",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;

}

Ajax Dynamic Update Example

This page will automatically update itself:

Page will refresh in 5 seconds.

2.DynamicUpdateServlet.java

/*

* DynamicUpdateServlet.java

*

* Created on June 26,2005,2:39 PM

*/

package com.wch.ajax.servlet;

import java.io.*;

import java.net.*;

import javax.servlet.*;

import javax.servlet.http.*;

/**

*

* @author nate

* @version

*/

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 + "";

PrintWriter out = response.getWriter();

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-cache");

out.println("");

out.println(res);

out.println("");

out.close();

}

/** Handles the HTTP POST method.

* @param request servlet request

* @param response servlet response

*/

protected void doPost(HttpServletRequest request,IOException {

doGet(request,response);

}

/** Returns a short description of the servlet.

*/

public String getServletInfo() {

return "Short description";

}

}

3.web.xml

DynamicUpdateServlet

com.wch.ajax.servlet.DynamicUpdateServlet

DynamicUpdateServlet

/DynamicUpdateServlet

总结

以上是编程之家为你收集整理的Ajax创建自动刷新页面全部内容,希望文章能够帮你解决Ajax创建自动刷新页面所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值