Convert PHP site to Ajax-driven site

Question

After weeks of failure, I am completely lost as to how I can covert my site to be ajax based. The main purpose is that I have a bar at the bottom that plays music and I would like it to play as the pages change. Please help me figure this out!

The Ajax area includes:

• Google AdSense and Adbrite ads (although I can go without these in Ajax area)
• Several jQuery plugins and javascript functions (NEED these to work in Ajax area)
• Normal links so that non javascript users can still browse + for SEO purposes (so links need to look like "/Link/Page/1/"
• ALL content is grabbed used php switch statements and $_GET

What I've Tried:

• jQuery History Plugin
• Asual Address Plugin
• http://www.malbecmedia.com/blog/development/coding-a-ajax-site-that-degrades-gracefully-with-jquery/
• jQuery ajax calls (jQuery.ajax)

That's the majority of the situation, minus some small details, I am definitely not going to use frames and would really like to figure something out. Also note that the ajax area contain links that change the music, so everything needs to correspond together.

Answer 1

add this link to your list. Give it a read. It will help you for sure.

Answer 2

I am not sure what language you are using, but what you probably want is to look into using the tag with the "innerHtml" attribute. You can also use to accomplish what you are looking to do. The would link to your other page.

For "real" AJAX, use xmlhttp=new XMLHttpRequest(); instead. This will make calls to your other pages, and your other pages will respond without sending all of the additional coding information. It is basically the same idea as loading iframes without all of the overhead.

Take a look at this page for a simple idea:

http://www.sipen.com/viewproduct.php?id=37

As you click on each of the images to the right, the big image changes. This is basically Ajax in its simplest form. You can also use the following for an easy solution:

  <script language="javascript">
  function setRPS (rps)
  {
    document.getElementById('rpschoice').value = rps;
    document.forms[0].submit();
  }

  function countdown(timerValue)
  {
    if (timerValue < 16)
    {
      document.getElementById('countdown').style.color = '#FF0000';
    }
    if (timerValue < 6 && timerValue > -1)
    {
      document.getElementById('countdown').innerHTML = "Auto-selecting in " + timerValue.toStrin
    }
    else
    {
      document.getElementById('countdown').innerHTML = timerValue.toString();
    }
    if (timerValue < 0)
    {
      timerValue = 0;
      setRPS("auto");
    }
    else
    {
      setTimeout("countdown(" + timerValue + "- 1)", 1000);
    }
  }
</script>