Ajax實現(xiàn)頁面自動刷新實例解析
Ajax簡介:
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
AJAX = 異步 JavaScript和XML(標(biāo)準(zhǔn)通用標(biāo)記語言的子集)。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進行更新。
傳統(tǒng)的網(wǎng)頁(不使用 AJAX)如果需要更新內(nèi)容,必須重載整個網(wǎng)頁頁面。
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax實現(xiàn)自動刷新</title>
</head>
<body onLoad="Autofresh()">
<p>現(xiàn)在的時間是:<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());//使用隨機數(shù)處理緩存
}
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>"."現(xiàn)在的內(nèi)容是:".$res;
?>
效果圖:

下面給大家介紹jQuery實現(xiàn)AJAX定時局部頁面刷新
不時,我需要某種機制,不斷刷新網(wǎng)頁,以提供一個實時的儀表板某種。如果我只能刷新一個特定的頁面的一部分,這將是很大的,例如:儀表盤上的交通燈顯示系統(tǒng)狀態(tài)。
這是很容易通過使用jQuery JavaScript庫,只刷新頁面的一部分。一旦我們納入我們的頁面的jQuery庫,我們只需要1行的JavaScript得到它的工作:
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
所以我們只要我們的頁面放入這個小的JS代碼片段刷新里面的內(nèi)容ID標(biāo)簽的一切,讓我們說,每5秒:
setInterval(function() {
$("#content").load(location.href+" #content>*","");
}, 5000);
這就是它??!因此,這是很容易完成一些實時監(jiān)控的行為,只是那行代碼。沒有更奇怪的元刷新標(biāo)記或iframe一種解決方法,在Web應(yīng)用程序。
每5秒,我們將刷新內(nèi)容相同的URL和所有元素,駐留在元素ID為content元素的內(nèi)容:內(nèi)容。
- jQuery實現(xiàn)AJAX定時刷新局部頁面實例
- JS+Ajax+Jquery實現(xiàn)頁面無刷新分頁以及分組 超強的實現(xiàn)
- 基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進功能,頁面刷新功能實效問題
- django+js+ajax實現(xiàn)刷新頁面的方法
- Ajax回退刷新頁面問題的解決辦法
- ajax頁面無刷新 IE下遭遇Ajax緩存導(dǎo)致數(shù)據(jù)不更新的問題
- 使用ajax實現(xiàn)無刷新改變頁面內(nèi)容和地址欄URL
- Ajax+php數(shù)據(jù)交互并且局部刷新頁面的實現(xiàn)詳解
- 淺談Ajax技術(shù)實現(xiàn)頁面無刷新
- AJAX實現(xiàn)指定部分頁面刷新效果
相關(guān)文章
ajax獲取數(shù)據(jù)中文亂碼問題最簡單的完美解決方案
這篇文章主要介紹了ajax獲取數(shù)據(jù)中文亂碼問題最簡單的完美解決方案,需要的朋友可以參考下2014-11-11
Ajax初試之讀取數(shù)據(jù)篇實現(xiàn)代碼
上次我們講了ajax開始準(zhǔn)備篇,做好了基本的ajax準(zhǔn)備工作以后.我們開始牛刀小試一下:ajax初試之讀取數(shù)據(jù)篇.2010-10-10
基于Ajax+div的“左邊菜單、右邊內(nèi)容”頁面效果實現(xiàn)
這篇文章主要介紹了基于Ajax+div的“左邊菜單、右邊內(nèi)容”頁面效果實現(xiàn) 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07
通達OA 使用Ajax和工作流插件實現(xiàn)根據(jù)人力資源系統(tǒng)數(shù)據(jù)增加OA賬號(圖文詳解)
這篇文章主要介紹了通達OA 使用Ajax和工作流插件實現(xiàn)根據(jù)人力資源系統(tǒng)數(shù)據(jù)增加OA賬號(圖文詳解),需要的朋友可以參考下2016-12-12
ajax返回的json內(nèi)容進行排序使用sort()方法實現(xiàn)
關(guān)于ajax返回的json內(nèi)容進行排序,主要使用sort()對數(shù)組的元素進行排序,具體實現(xiàn)如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07

