How can I load different html pages without refreshing, but changing the url?

How can I load different html pages without refreshing, but changing the url?

Hi, I'm trying to use a navigation system for a website where there is no refresh at all, through jQuery, I don't know if using ajax is possible, but I'd prefer that approach, however, this is what I have so far:

jQuery script
  1. $(document).ready(function(e){
  2. var page;
  3. var prevPage;
  4. $('ul#nav li a').click(function(){
  5. prevPage = getPrevUrl(window.location.href);
  6. page = $(this).attr('href');

  7. $('#content').load(page + '.html');
  8. if(page + '.html'!= window.location){
  9.  window.history.pushState({path:page + '.html'},'',page + '.html');
  10. }
  11. return false;
  12. });
  13. });
HTML
  1. <body>
  2. <ul id="nav">
  3. <li><a href="dynamicLoad_TEST2"><b style="color:white;">Click here 1</b></a></li>
  4.         <li><a href="dynamicLoad_TEST"><b style="color:white;">Click here 2</b></a></li>
  5.     </ul>
  6.     <div id="content"></div>
  7. </body>
It works, and it changes the url, the called page is loaded into the div, however, the back button in the browser does not work, and I think there's a better way by using ajax, but I don't know how to start, I've seen a few tutorials using ajax and php, and the returned data is being sent using echo, but if I do it with only html, I don't know how to return the html to ajax. I will appreciate any help, thanks!