HTML5 History API, New page markup not downloading
===

I have just started working my way around the HTML 5 history API from the tutorial on dive into html5.

Changing the url in the address bar works perfectly but downloading the new page to the div titled #page doesn't work. 

Here's the markup for the page with the links to other pages on

    <div id="page">
     <div id="wrapper">
	 <div id="content">
      
	  <p class="photonav">
       <a id="photonext" href="login.html">Login &gt;</a>
       <a id="photoprev" href="index.html">&lt; Hime</a>
      </p>
   
      </div>  
     </div>
    </div>


The history.js script


    function supports_history_api() {
    return !!(window.history && history.pushState);
     }

    function changePage(href) {
    var req = new XMLHttpRequest();
    req.open("GET",
           "localhost/" +
             href.split("/").pop(),
           false);
    req.send(null);
  
  
    if (req.status == 200) {
    document.getElementById("page").innerHTML = req.responseText;
    setupHistoryClicks();
    return true;
    }
    return false;
    }

    function addClicker(link) {
    link.addEventListener("click", function(e) {
    changePage(link.href);
    history.pushState(null, null, link.href);
    e.preventDefault();
    }, false);
    }

    function setupHistoryClicks() {
    addClicker(document.getElementById("photonext"));
    addClicker(document.getElementById("photoprev"));
    }

    window.onload = function() {
    if (!supports_history_api()) { return; }
    setupHistoryClicks();
    window.setTimeout(function() {
    window.addEventListener("popstate", function(e) {
      changePage(location.pathname);
    }, false);
    }, 1);
    }


Please note that both files being referenced in the <a> have the same markup as shown with the exclusion of the #page. Also the history API is needed for continuous play in the play and for a faster site experience.



