加载内容而不刷新

Question

I have codeigniter website which is done 1 year ago. No, I want to implement new HTML5 history API (pushstate) function to enable change content based on the url without header refresh. Is there any simple way, to avoid url restructure and load whole content using new HTML5 history API? I was trying to find some way, but most of them are using get methods.

$(function() {
        $('nav a').click(function(e) {
    $("#loading").show();
            href = $(this).attr("href");

            loadContent(href);

            // HISTORY.PUSHSTATE
            history.replaceState('', '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');

    }

Here is demo for this : http://sandbox.cergis.com/html5-historyAPI/page1.php

Answer 1

I want to implement new HTML5 history API (pushstate) function to enable change content based on the url without header refresh.

pushState is there to allow you to change the url without loading a new page.

Is there any simple way, to avoid url restructure and load whole content using new HTML5 history API?

Changing the content is the job of DOM.

You can use XMLHttpRequest (or other Ajax techniques) to load new content from the server (and then insert that into the page using DOM manipulation)

Generally, you should use the history API in combination with DOM manipulation. You change the content of the page with DOM, then change the URL to one that the server can use to generate the same page from scratch. This means the page still works for users (including search engines) without JavaScript, and it avoids the homepage loading before being replaced (after a few seconds) with different content.