使用Ajax实现页面的无刷新更新？解决方法

使用Ajax实现页面的无刷新更新？
使用Ajax技术实现页面的不刷新更新，使用两个PHP文件当$wuhan=true时，tiaoyong.php中武汉按钮前面会有闪烁的标志
$wuhan=false；时不闪烁，现在两个PHP文件一起使用，打开temp.php,只出现一个原点，不闪烁，单独打开tiaoyong.php,红黑之间交替显示闪烁，看看是怎么回事？为何使用Ajax技术原来该闪烁的变成静态的？不会闪烁了。求大神改正，菜鸟初学。
第一个temp.php
<script language="javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
var url = "tiaoyong.php?_dc="+new Date().getTime();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
DisplayHot();
setTimeout("sendRequest()",2000); //设置自动刷新时间，这里是毫秒，即2秒//RemoveRow();
} else { //页面不正常
//window.alert("您所请求的页面有异常。");
}
}
}
function DisplayHot()
{
var theDate = XMLHttpReq.responseText ;//如果出现编码问题,可以在服务端escape一下,然后在这里使用unescape( responseText )

result.innerHTML = theDate ;
}
</script>
</head>
<body onLoad="sendRequest()">

<span  id="result">
</span>

第二个显示的服务器端tiaoyong.php
<?php
$wuhan=true;
if($wuhan)
{
?>
<span id="blink">
<b style="font-size:120px;margin-left:60px;">.</b>
</span>
<input type="button" style="cursor:hand; width:60px; height:30px; text-align:center; margin-top:100px;margin-left:0px;margin-right:10px;margin-bottom:-5px;" value="武汉" onclick="window.location.href='test.html'"/>
<script type = "text/javascript" >
function blinklink() {
    if (!document.getElementById('blink').style.color) {
        document.getElementById('blink').style.color = "red";
    }
    if (document.getElementById('blink').style.color == "red") {
        document.getElementById('blink').style.color = "#F0FFFF";
    } else {
        document.getElementById('blink').style.color = "red";
    }
    timer = setTimeout("blinklink()", 200);
}
function stoptimer() {
    clearTimeout(timer);
}
blinklink()
</script>
<?php
}
else {
?>
<span>
<input type="button" style="cursor:hand; width:60px; height:30px; text-align:center; margin-top:100px;margin-left:91px;margin-right:10px;margin-bottom:-5px;" value="武汉" onclick="window.location.href='test.html'"/>
</span>
<?php
}
?>
使用Ajax实现页面的无刷新更新？解决方法

------解决思路----------------------

本帖最后由 showbo 于 2015-03-24 09:09:07 编辑

f(theDate.indexof('id="blink"')!=-1)
window.timer=setTimeout("blinklink()",1000);

函数名你打错了啊。。是indexOf，没区分大小写，而且blinklink()里面要记住计时器id

  function DisplayHot()
  {

  var theDate = XMLHttpReq.responseText ;//如果出现编码问题,可以在服务端escape一下,然后在这里使用unescape( responseText )
  document.getElementById('result').innerHTML = theDate ;
  clearTimeout(window.timer);
  if(theDate.indexOf('id="blink"')!=-1)
  window.timer=setTimeout("blinklink()",1000);

    function blinklink() {
    if (!document.getElementById('blink').style.color) {
    document.getElementById('blink').style.color = "red";
    }
    if (document.getElementById('blink').style.color == "red") {
    document.getElementById('blink').style.color = "#F0FFFF";
    } else {
    document.getElementById('blink').style.color = "red";
    }
    window.timer=setTimeout("blinklink()",500);

    }

使用Ajax实现页面的无刷新更新？解决方法

相关推荐