如何通过带有历史记录的ajax动态加载页面

Question

i am developing a music playback site and used jplayer to play music but the problem is that i didn't want to stop playing music when new pages are loading so i wanted to load all my pages with ajax inside a div container in this case which is "#main-container" and one important thing is i am wanted to keep showing pages URLs while loading with ajax. this is the code i am currently using.

<div id="vertical-menu">
         <!--<h2 class="logo">LOGO</h2>-->
         <div class="logo">
         <span class="arcd-male97"></span> 
         <h2 class="logo-name">AMR</h2>
         <h6 class="logo-desc">ARCADE MUSIC REPOSITORY</h6>
         </div>
                <ul class="menu-items">
                    <li>
                        <a  href="/index.php"><i class="arcd-archive"></i></br>Browse</a>                             
                    </li>
                    <li>
                        <a  href="../Top-albums/Top_albums_Pop.php"><i class="arcd-music97"></i></br>Top albums</a>                            
                    </li>
                    <li>
                        <a  href="../Top-artists/Top_artists_Pop.php"><i class="arcd-microphone52"></i></br>Top artists</a>                            
                    </li>
                    <li>
                        <a  href="../Top-lists/Top_lists_Pop.php"><i class="arcd-numbered8"></i></br>Top lists</a>
                    </li>
                    <li>
                        <a  href="../Charts/Charts_Pop.php"><i class="arcd-rising9"></i></br>Charts</a>
                    </li>                        
                </ul>

    </div> 

this is the div container where i wanted to sow loading pages contents. by default as you see it has some contents but i supposed to replace them with loading page contents. thanks

<div id="main-container"> <!-- start main container-->
    <!--start header-->
    <div class="header_container" id="header_container"> <!--start header div-->
        <div id="header_titles">
            <h1 class="homepage-heading">Browse</h1>
            <div class="home-page-title"><h2 >select</h2></div>
            <h2 class="homepage-subheading">GENRES & MOODS</h2> 
        </div>  
    </div> <!--end header div-->
<!--includes tabnav menu-->
<?php include   ("/includes/tabnav_Browse.php"); ?>
<ul id="generes-moods_container">
          <li style="padding-top: 18.5px;">
              <a class="pop" href="#"><i class="arcd-microphone48" ></i>pop</a>
          </li>  
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="country" href="#"><i class="arcd-guitar" ></i>country</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Rock" href="#"><i class="arcd-electric13" ></i>Rock</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Blues" href="#"><i class="arcd-harmonic" ></i>Blues</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="EDM" href="#"><i class="arcd-disc62" ></i>EDM</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Jazz" href="#"><i class="arcd-trumpet12" ></i>Jazz</a>
          </li>
          <li style="padding-top: 18.5px;">
              <a class="RnB" href="#"><i class="arcd-guitar" ></i>R&B</a>
          </li>  
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Hip_hop" href="#"><i class="arcd-musicplayer1" ></i>Hip hop</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Reggae" href="#"><i class="arcd-guitar" ></i>Reggae</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Classical" href="#"><i class="arcd-violin62" ></i>Classical</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Folk" href="#"><i class="arcd-guitar92" ></i>Folk</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="soul" href="#"><i class="arcd-guitar" ></i>soul</a>
          </li>  
 </ul>
</div> <!--end main container-->

Answer 1

This is a massive task with a lot of ups and downs making a ajax history website from scratch. You need to push the state to the window so the browser knows an update has occurred that you want it to record in its history.

The below explains it.

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

There are a lot of premade scripts out there to try simplify this for you one example below.

http://tkyk.github.io/jquery-history-plugin/ (no longer maintained)

https://github.com/cowboy/jquery-hashchange

Simple history example:

if (typeof(window.history.pushState) == 'function') {
    window.history.pushState(null, path, path);
} else {
    window.location.hash = '#!' + path;
}

Like I said its not a simple matter, a "quick" example is not easy to do. You need to consider a lot of factors like browser type and how it reacts when refreshing the page etc..

jQuery ajax update a div example:

<div id="pagediv">Default text in the div.</div>
<script>
$(document).ready(function (){
    $.ajax({                                      
      url: '/echo/html/',              
      type: "post",   
      data: {
          html: "<p>Text echoed back to request</p>",
          delay: 3
      },             
      beforeSend: function() {
          $('#pagediv').html("loading..");
          },
      success:  function(data) {
          $('#pagediv').html(data);
          },
   });
});
</script>

This is done using jQuery for ease of use.

FIDDLE