Ajax實(shí)現(xiàn)頁(yè)面自動(dòng)刷新實(shí)例解析
Ajax簡(jiǎn)介：
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。
AJAX = 異步 JavaScript和XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax實(shí)現(xiàn)自動(dòng)刷新</title>
</head>
<body onLoad="Autofresh()">
<p>現(xiàn)在的時(shí)間是：<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());//使用隨機(jī)數(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頁(yè)面部分
<?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實(shí)現(xiàn)AJAX定時(shí)局部頁(yè)面刷新
不時(shí)，我需要某種機(jī)制，不斷刷新網(wǎng)頁(yè)，以提供一個(gè)實(shí)時(shí)的儀表板某種。如果我只能刷新一個(gè)特定的頁(yè)面的一部分，這將是很大的，例如：儀表盤上的交通燈顯示系統(tǒng)狀態(tài)。
這是很容易通過(guò)使用jQuery JavaScript庫(kù)，只刷新頁(yè)面的一部分。一旦我們納入我們的頁(yè)面的jQuery庫(kù)，我們只需要1行的JavaScript得到它的工作：
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
所以我們只要我們的頁(yè)面放入這個(gè)小的JS代碼片段刷新里面的內(nèi)容ID標(biāo)簽的一切，讓我們說(shuō)，每5秒：
setInterval(function() {
$("#content").load(location.href+" #content>*","");
}, 5000);
這就是它??！因此，這是很容易完成一些實(shí)時(shí)監(jiān)控的行為，只是那行代碼。沒(méi)有更奇怪的元刷新標(biāo)記或iframe一種解決方法，在Web應(yīng)用程序。
每5秒，我們將刷新內(nèi)容相同的URL和所有元素，駐留在元素ID為content元素的內(nèi)容：內(nèi)容。
- jQuery實(shí)現(xiàn)AJAX定時(shí)刷新局部頁(yè)面實(shí)例
- JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn)
- 基于Jquery 解決Ajax請(qǐng)求的頁(yè)面 瀏覽器后退前進(jìn)功能，頁(yè)面刷新功能實(shí)效問(wèn)題
- django+js+ajax實(shí)現(xiàn)刷新頁(yè)面的方法
- Ajax回退刷新頁(yè)面問(wèn)題的解決辦法
- ajax頁(yè)面無(wú)刷新 IE下遭遇Ajax緩存導(dǎo)致數(shù)據(jù)不更新的問(wèn)題
- 使用ajax實(shí)現(xiàn)無(wú)刷新改變頁(yè)面內(nèi)容和地址欄URL
- Ajax+php數(shù)據(jù)交互并且局部刷新頁(yè)面的實(shí)現(xiàn)詳解
- 淺談Ajax技術(shù)實(shí)現(xiàn)頁(yè)面無(wú)刷新
- AJAX實(shí)現(xiàn)指定部分頁(yè)面刷新效果
相關(guān)文章
這篇文章主要介紹了Fly攔截全局Ajax請(qǐng)求的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Ajax 的初步實(shí)現(xiàn)(使用vscode+node.js+express框架)
這篇文章給大家介紹使用vscode+node.js+express框架操作ajax的初步實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-06-06
JQuery ajax返回JSON時(shí)的處理方式 (三種方式)
json數(shù)據(jù)是一種經(jīng)型的實(shí)時(shí)數(shù)據(jù)交互的數(shù)據(jù)存儲(chǔ)方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面由腳本之家小編給大家分享JQuery ajax返回JSON時(shí)的處理方式 (三種方式)，需要的朋友可以參考下2015-09-09
Ajax的小貼士使用小結(jié)...2007-10-10
這篇文章主要介紹了Ajax對(duì)緩存的處理方法,簡(jiǎn)單描述了緩存的功能,并結(jié)合實(shí)例形式分析了禁止瀏覽器對(duì)動(dòng)態(tài)程序文件緩存的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了AJAX簡(jiǎn)單異步通信,實(shí)例分析了Ajax異步通信的技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
javascript請(qǐng)求servlet實(shí)現(xiàn)ajax示例(分享)
下面小編就為大家?guī)?lái)一篇javascript請(qǐng)求servlet實(shí)現(xiàn)ajax示例(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
JQuery中Ajax的Post提交在IE下中文亂碼的解決方法
在JQuery的Ajax POST請(qǐng)求中，進(jìn)行請(qǐng)求，其中的中文在后臺(tái)，顯示為亂碼，在FF/Chrome中，可以正常傳遞中文，但是在IE下，則存在問(wèn)題2014-05-05
Baidu Musicbox 用到的ajax代碼...2007-09-09
AJAX中文亂碼問(wèn)題，經(jīng)過(guò)一個(gè)下午的努力終于完美解決，現(xiàn)將心得寫(xiě)下來(lái)，希望對(duì)那些還困繞在這個(gè)問(wèn)題而頭痛不已的人們有所幫助2012-09-09