Ajax实现页面自动刷新实例解析

Ajax简介:

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

html部分:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax实现自动刷新</title> </head> <body onLoad="Autofresh()"> <p>现在的时间是:<span id="currenttime"></span></p> <script> var xmlobj; var count=0; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlobj=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlobj=new XMLHttpRequest(); } } function Autofresh(){ createXMLHttpRequest(); count=count+1; xmlobj.open("GET","currenttime.php?count="+count,true); xmlobj.onreadystatechange=doAjax; xmlobj.send("r="+Math.random());//使用随机数处理缓存 } function doAjax(){ if(xmlobj.readyState==4 && xmlobj.status==200){ var time_span=document.getElementById('currenttime'); time_span.innerHTML=xmlobj.responseText; setTimeout("Autofresh()",2000); } } </script> </body> </html>

php页面部分

<?php $count=$_GET["count"]; $count=$count%7; switch($count){ case 1: $message = "11111111111111111";break; case 2: $message = "22222222222222222";break; case 3: $message = "33333333333333333";break; case 4: $message = "44444444444444444";break; case 5: $message = "55555555555555555";break; case 6: $message = "66666666666666666";break; } $res = $message; echo date("Y-m-d H:i:s")."<hr>"."现在的内容是:".$res; ?>

效果图:

下面给大家介绍jQuery实现AJAX定时局部页面刷新

不时,我需要某种机制,不断刷新网页,以提供一个实时的仪表板某种。如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态。

这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分。一旦我们纳入我们的页面的jQuery库,我们只需要1行的JavaScript得到它的工作:

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

所以我们只要我们的页面放入这个小的JS代码片段刷新里面的内容ID标签的一切,让我们说,每5秒:

setInterval(function() { $("#content").load(location.href+" #content>*",""); }, 5000);

这就是它!!因此,这是很容易完成一些实时监控的行为,只是那行代码。没有更奇怪的元刷新标记或iframe一种解决方法,在Web应用程序。

每5秒,我们将刷新内容相同的URL和所有元素,驻留在元素ID为content元素的内容:内容。

时间: 2024-11-05 16:40:40

Ajax实现页面自动刷新实例解析的相关文章

Ajax实现页面自动刷新实例解析_AJAX相关

Ajax简介: AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重

php+ajax实现页面自动刷新时间

index.php  view plaincopy to clipboardprint? <mce:script type="text/javascript"><!--   var xmlHttp;   function createXMLHttpRequest(){       if(window.ActiveXObject){           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

详解Grunt插件之LiveReload实现页面自动刷新(两种方案)_php实例

方案一:grunt-livereload + Chrome Plug-in 优点:安装.配置简单方便. 缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的). 1. 需要安装2个插接件:grunt-contrib-watch.connect-livereload 执行命令: 复制代码 代码如下: npm install --save-dev grunt-contrib-watch connect-livereload 2. 安装浏览器插件:Chrome LiveReload

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

大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助.    那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: var http_request=false;  function send_request(url){//初始化,指定处理函数,发送请求的函数    http_requ

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

大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助.   那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: 复制代码 代码如下: var http_request=false;   function send_request(url){//初始化,指定处理函数,发送请求的函数  

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

大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助.   那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: 复制代码 代码如下: var http_request=false;   function send_request(url){//初始化,指定处理函数,发送请求的函数  

页面自动刷新

刷新|页面     当你做网页时,是不是有的时候想让你的网页自动不停刷新,或者过一段时间自动跳转到另外一个你自己设定的页面?其实实现这个效果非常地简单,而且这个效果甚至不能称之为特效.你只要把如下代码加入你的网页中就可以了. 1,页面自动刷新:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面. 2,页面自动跳转:把如下代码加入<head&g

如何做页面自动刷新,又不用让用户按回车键来提交数据!

数据|刷新|页面 如何做页面自动刷新,又不用让用户按回车键来提交数据! (01-3-30 240) [豆豆] 于 2001-3-22 15:49:42 加贴在 Joy ASP ↑: 假设叶面中有如下form:<form name=InputDate>...</form> 如果页面要自动刷新,但该页面有Request.Form,那么通常会出现一个提示框,需要用户确定来提交数据,这就不是自动 刷新了.而对于监控或股票显示来说,不要用户干预又非常重要,下面就可以解决该问题: <Sc

如何让火狐浏览器页面自动刷新方法介绍

  火狐浏览器是一款非常好用的主页浏览工具,小编目前也是使用的此浏览器,但是有些用户最近向我们求助,如何让火狐浏览器打开的页面自动刷新,那么小编在整理了一些信息后,发现火狐有这么个插件,下面看小编为大家介绍. 1.右击页面看看有没有下图这个组件,如果有那么直接点击这个工具的下拉 2.设置点击自定义你想要的时间. 3.如果大家的火狐浏览器没有这个组件,那么我们可以点击"菜单"=="添加组件" 4.在搜所栏输入reloadevery,然后找到这个组件点击"安装