AJAX xmlhttprequest弹出窗口

时间:2011-05-21 19:45:50

标签: javascript ajax xmlhttprequest

基本上,我要做的是在页面的一角有一个淡入/淡出弹出窗口。例如John Doe刚刚上线。我正在使用AJAX检查最新的更新,如果它们是新的,则显示弹出窗口。

显示弹出窗口的函数(使用jquery)是:

function hidepop(){
  $("#popup").fadeOut("slow");
}

function showpop(){
  $("#popup").fadeIn("slow");
  setTimeout("hidepop()",4000);
}

如有必要,更新和显示弹出窗口的代码是:

function getHTTPObject(){
  if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
  else if (window.XMLHttpRequest) return new XMLHttpRequest();
  else {
    alert("Your browser does not support AJAX. Please download Google Chrome or Firefox.");
    return null;
  }
} 


function checkUpdates(old){
  httpObject = getHTTPObject();
  var randomnumber=Math.floor(Math.random()*10000);
  if (httpObject != null) {
    link = "updates.php?rnd="+randomnumber;
    httpObject.open("GET", link , true);
    httpObject.onreadystatechange = function() {
      if(httpObject.readyState == 4){
        var response = httpObject.responseText;
        var objDiv = document.getElementById("popup");
        objDiv.innerHTML = response;
        if(response == old){
          var time = setTimeout(function(){checkUpdates(response); response = null},5000);
        }else{
          var objDiv = document.getElementById("popup");
          objDiv.innerHTML = response;
          showpop();
          var time = setTimeout(function(){checkUpdates(response); response = null},5000);
        }
      }
    }
  }
}

然后,全力以赴:

onload="checkUpdates('');" 
身体标签上的

所以,我的问题是......没有任何反应。我知道显示弹出窗口是有效的,因为如果我调用showpop()它将显示。

这可能是一些愚蠢的错误,但是,请你给我一些想法/指针以解决问题以及解决方法。

非常感谢, Calum。

1 个答案:

答案 0 :(得分:0)

我首先使用jquery的'get'方法,因为你似乎已经使用了jquery。

var old = '';
function checkUpdates() {
    var randomnumber = Math.floor(Math.random() * 10000);
    link = "updates.php?rnd=" + randomnumber;
    $.get(link, function(data) {
        /* called when the resource was successfully retrieved */
        if (old != data) {
            $('#popup').html(data); // set the new data in the popup element
            showpop();              // show the popup
            old = data;             // store the retrieved data
        }
        setTimeout(checkUpdates, 5000);
    });
}

你的showpop和hidepop功能并没有真正定义正确 也许你可以阅读document.ready(...)

这应该可以解决问题(请注意,使用jquery的delay函数可以很好地链接所有内容:

function hidepop(){
    $("#popup").fadeOut("slow");
}

function showpop(){
    $("#popup").fadeIn("slow");
    setTimeout(function() {hidepop();}, 4000);
}