Website including pages/pages to my site

Question

Hello.. I have my site on index.html made in html+css., at my index.html i have this div id "content", where you put in main content to the page, and there's a link at the menubar that src to page2.php. When you press on the link it goes to the page2.php, but i want it to display inside the < div "content". In page2 i have Hello this is a test, in a echo..

I dont want to use frames.. should i split up my design on index.php, and then on page2.php include top & footer? or is there another way

function test() {
var xhr = XMLHttpRequest();
xhr.onreadystatechange = function(){
   if(xhr.readystate==4 && xhr.status=200)
      document.getElementById('content').innerHTML = xhr.responseText;
};

xhr.open("GET", "start.php", false);
xhr.send(null);
}

<a href="start.php" onclick="test(); return false;">Hjem </a> | 

<div id="content" ></div>

Answer 1

Use AJAX to post a HTTP GET request to page2.php and display the result(echo) in the div container.

Somewhat like following, (will not work in IE)

<script>
function test(){
   var xhr = XMLHttpRequest();
   xhr.onreadystatechange = function(){
      if(xhr.readystate==4 && xhr.status=200)
         document.getElementById('content').innerHTML = xhr.responseText;
   };

   xhr.open("GET", "page2.php", false);
   xhr.send(null);
}

</script>

Try AJAX online

Answer 2

You can use XMLHttpRequest() and not only "Hello this is a test", but you can also set any data from your MySQL database to <div id="content"> innerHTML.

Answer 3

Like you suggested in your question, you should look into splitting the index.html into a header and a footer. This will allow your site to work without javascript, and you may find that it is easier or makes more sense.

There's some quite good tutorials around, such as this one, but googling for php header footer returns plenty of options.