Ajax实现不刷屏的前提下实现页面定时刷新

野趣户外617

野趣户外617

2016-02-19 22:25

下面是个简单易学的Ajax实现不刷屏的前提下实现页面定时刷新教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

  主页面(要求刷新的页面)要求每一分钟刷新一次系统时间

  html

  body onload="makeRequest("getSystemTime.jsp")" //创建httpRequest对象

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  form name="dateForm"

  table

  td colspan="2" align="center"
           div id="sysTimeShow"/div //显示平台系统时间
          /td
  /table/form

  /body

  /html

  getSystemTime.jsp     //获得系统的当前时间,也就是输出结果的页面

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  %@ page language="java"  %
  %@ page contentType="text/html;charset=GB2312" %
  %@ page import="java.util.Date"%
  %@ page import="java.sql.Timestamp"%
  %@ page import="java.io.IOException"%

  %
  Date d = new Date();
  Timestamp ts = new Timestamp(d.getTime());
  String result = ts.toString().substring(0,16);
  out.write(result,0,result.length());
  %

  
  ajax.js

  function makeRequest(url) {
   http_request = false;
   if (window.XMLHttpRequest) {
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType){
     http_request.overrideMimeType('text/xml');
    }
   } else if (window.ActiveXObject) {
    try{
     http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {
     }
    }
   }
   if (!http_request) {
    alert("您的浏览器不支持当前操作,请使用 IE 5.0 以上版本!");
    return false;
   }
   

  //定义页面调用的方法init,不是init();没有();
   http_request.onreadystatechange = init;
   http_request.open('GET', url, true);

  //禁止IE缓存
   http_request.setRequestHeader("If-Modified-Since","0");

  //发送数据
   http_request.send(null);

  //每60秒刷新一次页面
   setTimeout("makeRequest('"+url+"')", 60000);
  }

  function init() {
   if (http_request.readyState == 4) {
    if (http_request.status == 0 || http_request.status == 200) {
     var result = http_request.responseText;
     if(result==""){
      result = "系统时间获取失败";
     }
     document.getElementById ("sysTimeShow").innerHTML="平台系统时间:"+result;
    } else {//http_request.status != 200
     alert("请求失败!");
    }
   }
  }
  

展开更多 50%)
分享

猜你喜欢

Ajax实现不刷屏的前提下实现页面定时刷新

Web开发
Ajax实现不刷屏的前提下实现页面定时刷新

怎么在不破坏数据的前提下重新划分分区?

电脑入门
怎么在不破坏数据的前提下重新划分分区?

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

PHP Ajax实现页面无刷新发表评论

Web开发
PHP Ajax实现页面无刷新发表评论

Ajax实现无刷新树

Web开发
Ajax实现无刷新树

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

利用ICallbackEventHandle实现类似AJAX的无刷新页面

电脑网络
利用ICallbackEventHandle实现类似AJAX的无刷新页面

Ajax实现页面loading效果!

Web开发
Ajax实现页面loading效果!

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

从两方面看AJAX与B/S

从两方面看AJAX与B/S

wps演示如何播放演示文稿?

wps演示如何播放演示文稿?
下拉加载更多内容 ↓