Geek asks and answers

Learning API Stories

I am trying to learn the history API after writing to http://diveintohtml5.info/history.html . My simple test web page is as follows

<body>
<ul>
    <li><a class="test" id="foo" href="/?a=foo">This is foo</a></li>
    <li><a class="test" id="bar" href="/?a=bar">This is bar</a></li>
    <li><a class="test" id="baz" href="/?a=baz">This is baz</a></li>
    <li><a class="test" id="qux" href="/?a=qux">This is qux</a></li>
</ul>

<script type="text/javascript">
//<![CDATA[
var A = {
    "test" : function(loc) {
        $.ajax({
            url : loc,
            type    : "GET",
            data    : "",
            dataType: "json",
            error   : function() { alert("Error"); },
            success : function(res) {
                var divs = ["foo", "bar", "baz", "qux"];
                for (var i = 0; i <= divs.length; i++) {
                    $("#" + divs[i]).html( res[ divs[i] ] );
                }
                history.pushState(null, null, loc);
            }
        });
    },

    "setupClicks" : function() {
        $(".test").click(function() {
            PK.test($(this).attr("href"));
            return false;
        });
    }
};

$(document).ready(function() {
    A.setupClicks();

    window.setTimeout(function() {
        window.addEventListener("popstate", function(e) {
            A.test(location.href);
        }, false);
    }, 1);
});
//]]>
</script>
</body>

Almost everything works well. When I click on the link, the URL changes correctly, new fragments of the page are extracted from the server via ajax and inserted in the right place.

, . , , , . , "foo", "bar", "baz" , "qux", "", "qux" "baz" . , , , "baz" "bar", "foo".

? ( jQuery . ).

+3
1

, , . , -

<script type="text/javascript">
//<![CDATA[
var A = {
    "test" : function(loc) {
        $.ajax({
            ..
            success : function(res) {
                ..
**** >          history.pushState(null, null, loc);
            }
        });
    }
};

$(document).ready(function() {
    window.setTimeout(function() {
        window.addEventListener("popstate", function(e) {
++++ >      A.test(location.href);
        }, false);
    }, 1);
});
//]]>
</script>

, history.pushState() ( **), . popstate ( ++++), , history.pushState(), loc . , A → B → C, A, B C. , B, B . , B .

, ,

<script type="text/javascript">
//<![CDATA[
var A = {
    "test" : function(loc, how) {
        $.ajax({
            ..
            success : function(res) {
                ..
                if (how !== "back") {
**** >              history.pushState(null, null, loc);
                }
        });
    }
};

$(document).ready(function() {
    window.setTimeout(function() {
        window.addEventListener("popstate", function(e) {
++++ >      A.test(location.href, "back");
        }, false);
    }, 1);
});
//]]>
</script>

?

+1

More articles:


All Articles