Javascript 如何防止Ajax长轮询在Chrome中重新加载div？_Javascript_Php_Css_Ajax

Javascript 如何防止Ajax长轮询在Chrome中重新加载div？

javascript php css ajax

Javascript 如何防止Ajax长轮询在Chrome中重新加载div？,javascript,php,css,ajax,Javascript,Php,Css,Ajax,编辑：经过更多的研究，我想我可能会找到答案，但我仍然需要一些帮助。如果我理解正确的话，我的php脚本在查询MySQL数据库后返回空答案，但没有找到任何内容，因此，如果请求没有要发送的内容，它将返回get请求的空答案，而我刚刚使用的JavaScript将打开另一个请求，导致偏离预期的“长轮询”行为。因此，我现在认为问题在于我的chatserver.php脚本。我如何让它停止返回空答案？if（true）{break；}else{continue；}这是我最初编写chatserver脚本时遇到的问题，

编辑：经过更多的研究，我想我可能会找到答案，但我仍然需要一些帮助。如果我理解正确的话，我的php脚本在查询MySQL数据库后返回空答案，但没有找到任何内容，因此，如果请求没有要发送的内容，它将返回get请求的空答案，而我刚刚使用的JavaScript将打开另一个请求，导致偏离预期的“长轮询”行为。因此，我现在认为问题在于我的chatserver.php脚本。我如何让它停止返回空答案？if（true）{break；}else{continue；}这是我最初编写chatserver脚本时遇到的问题，我甚至不知道它为什么会工作

我正在开发一个规模相当大的web应用程序，其中有很多东西，Chrome让我感到很不舒服。我会尽量简明扼要地解释我的问题，但是在创建这个问题时有很多代码

我正在使用一个长轮询Ajax请求，该请求调用一个php脚本将消息推回到客户端页面中的一个div。以下是Ajax代码：

function poll(){
var messageListener = new XMLHttpRequest();
messageListener.onreadystatechange=function(){
    if(messageListener.readyState==4 && messageListener.status==200){
        document.getElementById("main_view").innerHTML+=messageListener.responseText;
        document.getElementById("main_view").scrollTop = document.getElementById("main_view").scrollHeight;
        poll();
    }
}
messageListener.open("GET","chatserver.php",true);
messageListener.send();
}


poll();

如您所见，该功能在页面加载时启动，并在收到响应后再次运行，因此我总是打开一个请求，服务器可以使用该请求推送聊天信息。所有这些都在最新版本的Chrome、IE和Firefox中得到了很好的应用。当我用CSS工具提示发送到div的链接时，问题就出现了。我已设置指针事件：无；除了定位和z索引CSS中的所有元素外，工具提示在IE和Firefox中的表现也非常出色，但在Chrome中，我得到了臭名昭著的“工具提示闪烁”

php脚本基本上运行在一个无限while循环中，该循环查询数据库中的新聊天消息并对其进行响应

while(true){
    if(true){
    //query database for new messages and echo them
    break;
    } else {
    continue;
    }
}

问题的出现是因为每次循环运行时，Chrome似乎都在不断刷新“main_view”div。我可以在Chrome的“Inspect Element”中看到这种情况。其他浏览器在实际有新信息之前不会更新div

这是css

*{
margin: 0px;
padding: 0px;

}
#view_wrapper{
width:1010px;
height:705px;
position: relative;
overflow: hidden;

}
#main_view{
position: relative;
z-index: 96;
width: 1000px;
height: 700px;
font-family: Lucida Console;
text-align: left;   
overflow: auto;
margin-right: 30px;
padding-right: 30px;
pointer-events: none;
}

#command_line{

width: 964px;
height: 25px;
border: 1px solid #000;
}
#submit{

width: 45px;
height: 25px;

}
#main_view a{
pointer-events: auto;
position:relative;
z-index:98;
}

#main_view a span{
pointer-events: none;
position:absolute;
z-index: 97;
}
.tooltip {outline:none; color: crimson; pointer-events: none;}
.tooltip strong {line-height:30px; color: crimson; pointer-events: none;}
.tooltip:hover {text-decoration:none; pointer-events: none;}
.tooltip span {
pointer-events: none; left:100%; bottom: 25%;
position:absolute; visibility:hidden; padding:10px;
width:300px; height: 110px;line-height:16px;
} 
.tooltip:hover span{
pointer-events: none;
position:absolute;  
border:2px solid #FFF;  color:#EEE;
background:#333 url(css-tooltip-gradient-bg.png) repeat-x 0 0;
border-radius:2px;        
box-shadow: 0px 0px 8px 4px #666;
visibility:visible; z-index:97;
}

页面的html结构基本上是：

<html>
    <body>
    <center>
    <div id="view_wrapper>
    <div id="main_view">
    </div>
    </div>
    </center>
    </body>
</html>


这修复了我的工具提示闪烁问题：
function poll(){
var messageListener = new XMLHttpRequest();
messageListener.onreadystatechange=function(){
    if(messageListener.readyState==4 && messageListener.status==200)    {

        if(messageListener.responseText.length != 0){
            document.getElementById("main_view").innerHTML+=messageListener.responseText;
            document.getElementById("main_view").scrollTop = document.getElementById("main_view").scrollHeight;
        }
        poll();
    }
    }
    messageListener.open("GET","chatserver.php",true);
    messageListener.send();
}

我仍然存在Chrome打开一百万个get请求的问题，因为它从PHP脚本中得到空答案，但是由于这超出了原问题的范围，所以我会考虑这个问题。 您正在函数中调用函数，因此在函数中重新加载div、查找集超时和延迟poll（）调用是一个永无止境的循环。感谢您的响应，但这并不能真正解决我的问题。它减缓了chrome中的闪烁，但也在聊天中引入了延迟，并完全中断了Internet Explorer中的聊天。我可能会使用一些浏览器黑客，这样更改只适用于Chrome，但聊天服务器推送的不仅仅是聊天信息，在游戏环境中，这是很重要的，这些是实时传递的。如果你不想用GET请求轰击你的服务器，考虑一下HTML5 WebSooC窝。这正是我现在正在研究的问题，谢谢你的建议。