title: How to load Ajax content from Url with out using hash
body: <p>I have tried looking for many topics but none of them fixes my problem.</p>
  
  <p>I'm currently developing my portfolio site but this is my first time using Ajax. I stuck on this for many days.</p>
  
  <p>I used source code from html5.gingerhost.com and tweak the php part a little bit because I'm not used to php. It only loads [title] of the page into index.html's title and get all the content from html file (only html elements, no js, no css) with the same name as href. </p>
  
  <p><strong>here's the js.</strong></p>
  
  <pre><code>$(document).ready(function(){
  
      $('.nav a').click(function(e) {
  
          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) {
      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);
          });
      });
  
      //  SUBTRACT '/'
      url = url.substr(1);
  
      if(url == ""){
          url = "home"    
      }
  
      //  ADD '.html"
      url = url.concat(".html")
  
      //  REPLACE CONTENT INTO THE DIV
      $.ajax({
          url: url
      })
          .done(function(html) {
              $(".content-box").html(html);
          }); 
  }
  </code></pre>
  
  <p>This is working fine when I hit back and forward buttons. </p>
  
  <p>The problem is I'm trying to find how to load Ajax content from the specific Url. </p>
  
  <p>For example, </p>
  
  <p>I want to go directly to <strong>www.mysite.com/about</strong> but in my directory there's no such directory name 'about', so it returns 'Not found' page to me. </p>
  
  <p>In <a href="http://html5.gingerhost.com/" rel="nofollow">http://html5.gingerhost.com/</a> if I type <a href="http://html5.gingerhost.com/seattle" rel="nofollow">http://html5.gingerhost.com/seattle</a> It shows the Seattle page instead of 'Not found' page like mine.</p>
  
  <p>Please suggest me how to achieve that or give me the keywords of the technique to do these things.</p>
  
  <p>Thank you in advance,</p>
  
  <p>Puck</p>