Question

我进行非常非常简单的内部网聊天。我将每2秒数据从URL加载到DIV。但是我想（并且我不知道如何）将数据加载到变量，比较来自DIV的数据以及if！=，在DIV中更新。并滚动到此DIV中的“页面”。请帮帮我stackoverflowers！ :)

var chatInterval;

function chatLoad(){

    chatInterval = setInterval(function(){
        $('#chat-conversations').load('/AJAX/Chat.app');
    }, 2000);
}

Answer 1

不是直接加载它而是先将它放在变量上并进行比较。这就是为什么我使用.get代替.load，.load将内容直接加载到元素中。

var chatInterval;
var chatContent = "";
function chatLoad(){
    chatInterval = setInterval(function(){
        $.get('/AJAX/Chat.app',function(data){
            if(data!=chatContent){
                $('#chat-conversations').html(data);
                chatContent = data;
            }
        })
    }, 2000);
}

Answer 2

首先，您必须明白，比较所有数据是个坏主意，您只需要检查用户是否有新消息。此外，您现在必须进行长轮询和短轮询good explanation。

为什么比较所有数据的坏主意？因为在5分钟之后，您将收到大量数据（性能）。

如果你愿意，可以比较一下：

var _current_data = null;
var interval = setInterval(function(){

  // your logic to receive data, we receive response from server
  if(!_current_data) _current_data = response;

  else if(_current_data != response){
    // Render logic (insert data into html tags and return html as string)
    $("div").html(render(current_data));
  }

}, 2000);

Answer 3

你可以使用ajax来获取最新的帖子而无需像你所说的那样以2秒的间隔重新加载页面。

    function getXmlHttpRequest() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        // code for IE7+, Firefox, Chrome, Opera, Safari

    }
    else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        // code for IE5 and IE6
    }
    else {
        alert("Browser doesn't support Ajax..!!");
    }

    return xmlhttp;
}

    function loadData() {

    xmlhttp = getXmlHttpRequest();
    if (xmlhttp !== null) {

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState < 4) {
                document.getElementById('your-div').innerHTML = "<img src = 'loader-animation.gif'/>";

            }
            else if (xmlhttp.readyState === 4) {
                var res = xmlhttp.responseText;
                if (res.trim() !== "error") {
                    document.getElementById('your-div').innerHTML = res;

                } else {
                    document.getElementById('your-div').innerHTML = "<img src = 'error.png' style='vertical-align:middle;'/>";

                }
            }
        }
        xmlhttp.open("POST", "data_loading_page.php", true);
        xmlhttp.send(null);

    } 
}

on data_loading_page.php（你使用php或jsp或任何东西的任何媒体）使用一段时间打印你的帖子。因此，每当函数调用php页面时，您将获得更新;

通过

调用脚本

    setInterval(function() {
      loadData();
}, 2000);

jQuery - 将数据加载到变量，检查数据并在DIV中更新

3 个答案: