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

Question

Укороченная версия

Какой контент делает 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 и выбранной Консолью> Все, когда я нажимаю на навигационные ссылки, я вижу такие записи:

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, разделенных запятыми?

Они должны быть заключены в массив?

Массиву нужно имя?

Что тогда заключено в фигурные скобки?

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

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

<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>

Answer 1

Неважно, что содержит content.php, просто он должен возвращать некоторый контент, который затем обрабатывается javascript и загружается в DOM. Вы не можете реально определить, что содержит его content.php, но, учитывая ограниченный объем страницы, есть одна возможность:

<?php
    $page = $_GET['cid'];

    $pageData = array();
    switch ($page) {
        case '/':
            $pageData = array(
                'title' => 'Seattle - Part of a demo for #ProSEO',
                'h1' => 'Seattle',
                'article #articletext' => '<p>Seattle is the northernmost major city in the contiguous United States, and the largest city in the Pacific Northwest and the state of Washington. It is a major seaport situated on a narrow isthmus between Puget Sound (an arm of the Pacific Ocean) and Lake Washington, about 114 miles (183 km) south of the Canada - United States border, and it is named after Chief Sealth \"Seattle\", of the Duwamish and Suquamish native tribes. Seattle is the center of the Seattle-Tacoma-Bellevue metropolitan statistical area--the 15th largest metropolitan area in the United States, and the largest in the northwestern United States.<\/p><p>Seattle is the county seat of King County and is the major economic, cultural and educational center in the region. The 2010 census found that Seattle is home to 608,660 residents within a metropolitan area of some 3.4 million inhabitants. The Port of Seattle, which also operates Seattle-Tacoma International Airport, is a major gateway for trade with Asia and cruises to Alaska, and is the 8th largest port in the United States in terms of container capacity.<\/p>',
                '#image' => '<img class=\"thumbnail\" alt=\"\" src=\"seattle.jpg\">'
            );
            break;
        case '/new-york':
            $pageData = array(
                'title' => 'New York - Part of a demo for #ProSEO',
                'h1' => 'New York',
                'article #articletext' => '<p>New York is the most populous city in the United States and the center of the New York metropolitan area, which is one of the most populous metropolitan areas in the world. New York City exerts a significant impact upon global commerce, finance, media, culture, art, fashion, research, technology, education, and entertainment. As the home of the United Nations Headquarters, it is also an important center for international affairs. The city is often referred to as New York City or the City of New York, to distinguish it from the state of New York, of which it is a part.<\/p>',
                '#image' => '<img class=\"thumbnail\" alt=\"\" src=\"new-york.jpg\">'
            );
            break;
        case '/london':
            // similar code for london
            break;
        case '/seattle':
            // similar code for seattle
            break;
    }

    header('Content-Type: application/json');
    echo json_encode($pageData);
?>

На самом деле он, скорее всего, извлекает данные страницы из внешнего источника, такого как база данных.

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

Ничего не нужно инкапсулировать в массиве - не имеет значения, как он туда попадает (вы можете вручную сгенерировать JSON), если только это и есть вывод (файл в формате json). И вы указываете MIMEtype ответа на application/json с использованием header метод в PHP.