Как реализовать pushState() и popState() с ajaxed-контентом в формате JSON?

Краткая версия

Какое содержимое имеет файл content.php, на который ссылается это руководство?

http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

Полная версия с исследованиями

Приведенный выше учебник является наиболее кратким, с которым я столкнулся, для реализации pushState() и popState() в сценарии, когда вы загружаете контент через Ajax, но хотите сохранить функции закладок и навигации браузера назад и вперед:

Демонстрационная страница была настроена как доказательство концепции:

http://html5.gingerhost.com/

Где исходный код, как показано ниже.

Однако для его реализации необходимо несколько промежуточных шагов, с которыми я не совсем знаком:

• Настройка файла содержимого PHP в формате JSON
• Понимание форматирования JSON

Комментарий к этому сообщению пример html5 pushstate и jquery $.getJSON предлагает использовать Firebug чтобы увидеть ответ на HTTP-запрос, чтобы увидеть форматирование JSON.

С загруженным Firebug и выбранным Console> All, когда я нажимаю на навигационные ссылки, я вижу такие записи, как:

GET  http://html5.gingerhost.com/content.php?cid=%2F&format=json    200 OK  869ms
GET  http://html5.gingerhost.com/content.php?cid=%2Fseattle&format=json  200 OK  859ms
GET  http://html5.gingerhost.com/content.php?cid=%2Fnew-york&format=json  200 OK  837ms
GET  http://html5.gingerhost.com/content.php?cid=%2Flondon&format=json  200 OK  863ms

Соответствующее содержимое на вкладке «Ответ» для каждой записи представлено в формате JSON:

{"title":"Title value here","h1":"H1 value here","article #articletext":"<p>Lots of html here.<\/p><p>That includes escaped characters.<\/p>","#image":"<img class=\"thumbnail\" alt=\"\" src=\"and_an_image.jpg\">"}

Итак, после некоторых исследований формат JSON выглядит следующим образом:

{
"myArrayName": [
{ "Key1":"Value1" , "Key2":"Value2" },  // object one
{ "Key1":"Value3" , "Key2":"Value4" },  // object two 
{ "Key1":"Value5" , "Key2":"Value6" },  // object three
]
}

Добавление примера «реального мира» к этому сделает это:

{
"myCDCollection": [
{ "Title":"Trash" , "Artist":"Alice Cooper" },  // object one
{ "Title":"Dr. Feelgood" , "Artist":"Motley Crue" },  // object two
{ "Title":"Cherry Pie" , "Artist":"Warrant" },  // object three
]
}

Таким образом, keys в доказательстве концепции выглядит следующим образом:

title
h1
article #articletext
#image

Итак, мой вопрос: какой контент должен иметь файл content.php, на который ссылается учебник?

Это просто копирование и вставка объектов JSON, разделенных запятыми?

Их нужно инкапсулировать в массив?

Нужно ли массиву имя?

Который затем инкапсулируется в фигурные скобки?

Нужен ли файлу PHP указанный тип носителя MIME, если да, то где и как?

Вот скрипт из доказательства концепции:

<script>
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
$('nav a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");

loadContent(href);

// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();


});

// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};

});

function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
$.each(json, function(key, value){
$(key).html(value);
});
$("#loading").hide();
});

// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');

}

</script>