Страница автоматического обновления после определенного интервала

Question

У меня есть сайт, на котором люди могут добавлять сообщения и комментарии, как и любые социальные сети.

Все работает отлично, кроме функции автоматического обновления: я хочу автоматически обновлять страницу каждые 20 секунд.

Обновляя страницу, я имею в виду, что она автоматически отображает недавно добавленные сообщения и комментарии к странице.

Я могу сделать это с помощью AJAX функции нагрузки, как

$('#divid').load("page.php #divid"); 

Но в этом случае возникает проблема: когда любой пользователь печатает что-то, и если затем DIV перезагружается, текст пользователь теряется; что, если у меня есть, есть бесконечная функция загрузки прокрутки, которая заставляет сайт загружать элементы снова и снова.

Я думаю, что это возможно, так как многие сайты делают эту вещь, подобно gmail, показывает нам новые письма без перезагрузки div.

Answer 1

Что нужно сделать, это добавить новые сообщения в начало страницы вместо перезагрузки всего содержимого.

Пример ответа AJAX должно быть так:

{ 
    "posts": [ 
     { 
      "id": "1234", 
      "title": "Post Title", 
      ... 
     }, 
     { 
      "id": "1235", 
      "title": "Post Title", 
      ... 
     } 
    ], 
    "comments": [ 
     { 
      "id": "12345678", 
      "post_id": "1112", 
      "content": "foo", 
      ... 
     } 
    ] 
} 

posts массив должен предваряться страницу. Каждый элемент массива comments должен быть добавлен к соответствующему сообщению комментариям.