使用ajax数据刷新div的更有效方法

I have built an ajax chat app, but now when it refreshes the chats (loading all the new chats) it seems to pause between removing all the current chats and loading all the chats including the new one. This is set on a timer, so whenever it runs, it sort of has this gap of blankness and then jumps to the top of the page (the top of the div getting refreshed) What do I need to do to ensure that this doesn't happen? ie: how do I take the waiting period out / do it different?

$(document).ready(function() {
window.setInterval(function(){
    $('#chat-messages').empty();
    getMessages(meid, friendid);
}, 5000);
});

$.ajax({
    url: 'getAllMessages.php',
    data: 'id='+id+'&&friend='+friendid,
    type: 'POST',
    success: function(res) {
        // processing code goes in here, it was too long so I took it out.
    }
});

$.ajax({
    url: 'getAllMessages.php',
    data: 'id='+id+'&&friend='+friendid,
    type: 'POST',
    success: function(res) {
        $('#chat-messages').empty(); 
        // empty on success to avoid delay caused due to ajax request
    }
});

• Decrease Interval time
• Add new content instead of removing old content and adding new content.
• Use setTimeout call and add it to success block

I think the best thing you can do is add a new parameter named "last-update" and get only the new messages from the last success query...

Than, you just need to do something like

 $('#chat-messages').append(new_messages)

You will optimize chat refresh, network latency and mysql :-)