仅在有新数据时重新加载div

Question

If I create a script like this, then it will reload the div every 2.5 seconds. I want a script that only displays if there is new data, if there is no new data it does not have to reload...

<script type="text/javascript">
    function dispMsg() {
        $("#displayMessage").load('load.php');
        var newscrollHeight = $("#displayMessage").attr("scrollHeight") - 20;
        $("#displayMessage").animate({ scrollTop: newscrollHeight }, 'normal');
    }
    setInterval (dispMsg, 2500);
});
</script>

<div id="displayMessage"></div>

and here is the load.php:

$sql = "SELECT * FROM message ORDER BY id DESC LIMIT 1";
$query = mysql_query($sql);
while ($result = mysql_fetch_array($query)) {
    $id = $result['id'];
    $from = $result['user_01'];
    $to = $result['to_usr'];
    $message = $result['message_01'];
    $date = $result['date_send'];

    echo "<span class='from'> $from </span>" 
      . "<span class='message'> $message </span> <br/>";
}

Answer 1

use the parameters and call back of $.load()

$.load(url, {param1:value, param2:value}, function(result){ 
    if(result >5){ 
     //do something
    }
)

Example:

<?php

if($_REQUEST['action'] == 'check'){
    if($_REQUEST['lastId'] < 5 ){
        echo $_REQUEST['lastId']+1;
        die;
    }
}

if($_REQUEST['action'] == 'load'){
    echo 'some conntent!';
    die;
}

?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
<script type="text/javascript">
$(document).ready(function(){
    var lastId = 0;
    function dispMsg() { 
        $.get('tmp.php', {action:'check', lastId: lastId}, function(responce){

            if(responce !== 0){
                alert(responce);
               $('#displayMessage').load('tmp.php', {action:'load'});
            }
        });

    }
    setInterval (dispMsg, 2500);
});
</script>

<div id="displayMessage">1</div>