AJAX using pushState()

Question

I found wonderfull article, which explain how to use pushState with AJAX. https://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

But I can't figure out how organized "content.php" file. In comments this question is often asked, but nobody answered to this. This is quite important, because without "content.php" nothing works.

May be somebody know the example of "content.php"? I will appreciate it. Thanks

`content.php` is irrelevant to `window.history.pushState()` and only relevant to that specific example. You don't need it. — apokryfos, Jul 01 '16 at 08:49
you might want to check this out https://github.com/defunkt/jquery-pjax — Gian Tomakin, Jul 01 '16 at 13:34

score 1 · Answer 1 · answered Jul 01 '16 at 08:48

content.php is not relevant to window.history.pushState() and always context specific.

Longer answer:

Check http://html5.gingerhost.com/

In this case when you click "seattle" then content.php returns:

{"title":"Seattle - Part of a demo for #ProSEO","h1":"Seattle","article #articletext":"
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>
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":""}

This is then used by JavaScript to populate the relevant Div with that information. There's no general rule on naming (it could be content.php or content.aspx or nothing at all).

In particular the code in is : http://html5.gingerhost.com/

$(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');

        }

This is obtainable by inspecting the code source, however you may find yourself in a legal bind if you use their code for your own site.

score 0 · Accepted Answer · answered Jul 01 '16 at 08:45

The code in the link you provided is making a simple get request to a PHP file called content.php. The PHP file then returns a JSON as the response.

What I'm about to write down next is the bare-bones example of how to set up the content.php file, it is not recommended, but for just an example, you can do this

<? php

$contentId = $_GET['contnentid'];
doSomethingWith($contentid) 

public function doSomethingWith($contentId)
{
    //get content with id from db or somewhere
    return json_encode(['Content' => 'Some content']);
}

AJAX using pushState()

2 Answers2