Ajax: добавление новых <div>из JSON с помощью jQuery

Question

На странице у меня есть этот HTML-код:

 
<div id="content">
    <div class="container">
        <div class="author">@Francesc</div>
        <div class="message">Hey World!</div>
        <div class="time">13/06/2010 11:53 GMT</div>
    </div>
    <div class="container">
        <div class="author">@SomeOtherUser</div>
        <div class="message">Bye World!</div>
        <div class="time">13/06/2010 14:53 GMT</div>
    </div>
    <div class="container">
        <div class="author">@Me</div>
        <div class="message">Hey World!</div>
        <div class="time">13/06/2010 18:53 GMT</div>
    </div>
</div>

Я хочу спросить, как получить файл JSON с сервера, на котором есть более свежие сообщения, и поместить их наверх, я имею в виду над первым <div class="container">.

Еще один вопрос, можно ли при GET передать при отправке запроса на сервер время последнего обновления? Как я могу это сделать?
Спасибо.

Answer 1

Я не знаю, как ваш сервер обслуживает новые данные.

Учитывая статический текстовый файл с именем new_data.json в том же каталоге, что и ваша страница, вы можете сделать следующий запрос ajax.

(Если вы обслуживаете страницу из файловой системы, некоторые браузеры могут доставить вам немного хлопот. Safari должен работать.)

Содержимое файла new_data.json:

[ {"author":"@newAuthor","message":"newMessage","time":"newTime"},
  {"author":"@anotherAuthor","message":"anotherMessage","time":"anotherTime"} 
]

jQuery:

  // Stores the latest request timestamp
var lastRequestTime = new Date();

  // Make ajax request
$.ajax({
        // URL of data, with the last time
    url: 'new_data.json?time='+lastRequestTime,
    dataType:'json',
    success: function(data) {
             // Update the lastRequestTime
        lastRequestTime = new Date();

            // Get the length of the array returned
        var length = data.length;

            // Walk backward through the array, adding each new item 
            //    to the top of the container
        while(length--) {
                 // Create new .container div
            $('<div/>', {className:'container'})

                 // Append new divs to the $container with proper class and data.
                 // data[length][...] uses the current index stored in the length variable
                .append( $('<div/>', {className:'author', text:data[length]['author']} ) )
                .append( $('<div/>', {className:'message', text:data[length]['message']} ) )
                .append( $('<div/>', {className:'time', text:data[length]['time']} ) )

                 // Prepend $container to the #content div
                .prependTo( '#content' );
        }
    }
});