Using History.js with AJAX


Using History.Log() we can check the data stored to the history of our browser in object representation.

Source Code

<!DOCTYPE html>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src=""></script>
    <script type="text/javascript" src="js/jquery.history.js"></script>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <br />
    <div class = "container">
        <nav class="navbar navbar-default">
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="home">Home</a></li>
                    <li><a href="about">About</a></li>
                    <li><a href="contact">Contact</a></li>      
        <div class = "content"></div>

<script type='text/javascript'>
    var History = window.History;
    if (History.enabled) {
        var page = get_url_value('page');
        var path = page ? page : 'home';
        // Load the page
    } else {
        return false;

    // Content update and back/forward button handler
    History.Adapter.bind(window, 'statechange', function() {
        var State = History.getState(); 
        // Do ajax
        // Log the history object to your browser's console

    // Navigation link handler
    $('body').on('click', 'nav a', function(e) {
        var urlPath = $(this).attr('href');
        var title = $(this).text(); 
        History.pushState({path: urlPath}, title, './?page=' + urlPath); // When we do this, History.Adapter will also execute its contents.        
    function load_page_content(page) {
            type: 'post',
            url: page + '.html',
            data: {},                       
            success: function(response) {
    function get_url_value(variable) {
       var query =;
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}


Related Post

Latest Post

Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.