0

精简版

content.php本教程中引用 的文件有哪些内容？

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

带研究的长版

上面的教程是我在实现pushState()和popState()通过 Ajax 加载内容但希望保留书签和浏览器来回导航功能的场景中遇到的最简洁的教程：

已设置演示页面作为概念证明：

http://html5.gingerhost.com/

源代码如下。

实现它需要几个中间步骤，但是我并不完全熟悉：

  • 设置 JSON 格式的 PHP 内容文件
  • 了解 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>
4

1 回答 1

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使用headerPHP 中的方法。

于 2014-09-04T23:40:17.937 回答