Question

I am creating a small commercial website where I want only the content to change, and the header/footer to stay. My goal is to change the content without changing the URL.

I originally was planning to use AJAX but I realized that each page has a different layout so I wasn’t sure how to accompany this. If I were to use AJAX, I would store all the data in XML. In that case, would I have to create a new XSLT for each page? Is there a better solution then this?

Answer 1

2 main ways :

1) you can include html in all your pages with a common js file. This is coherent with your initial choice.

Your fonction could be like this (supposing you use jquery, which I recommend) :

// that's in the js file
function addHeaderAndFooter() {   
    var html = '<div id=myheader>header stuff</div>';
    $(html).prependTo('body');
}

You then would call it like this :

// that's in each html file
$(window).load(function(){
    addHeaderAndFooter(); // that's your function defined in your common js
});

2) a server side generation system : With PHP for example it’s easy to include constant elements in all your pages. Fact is that very few commercial sites can really avoid the use of server side generation.

Usage of XML and XSLT is possible but not so frequent today as it is heavy and not human friendly.

It’s hard to say without more requirements if you should use solution 1 or 2, but for somebody not really versed in hardcore developpement and supposing your site will have more that 3 o 4 pages, I’d recommend to use something like PHP : it’s more classical.