Loading pages into div via ajax navigation - Couple of problems - php

Question

I'm new to this whole programming business and I'm trying to put together a simple website for myself.
At present the website has a header, some navigation links, a makeshift image below the nav(which will be amended later and isn't relevant to the question much), and below that I have 3 content divs. The main content div, and two more to the right of it which I'm intending to be my sidebar widget for maybe a twitter feed, ads, that sort of thing.
I've set up the navigation links so that external pages are loaded inside my left-col div(my main content area). The Ajax works grand, as it is, it does exactly as was said on the tin.
The issue is each nav link reads javascript:ajaxpage('pageaddress.php','left-col');
Couple of things I don't like about that:
When you refresh the page it will naturally load the index.php content
Because the website address remains the same throughout browsing. It doesn't change to, let's say, /About.php.
Also, this doesn't work out well for SEO. Assuming I want individual page addresses, titles, and what not - and I do.
There is no real problem with the script, it works sure enough, it just doesn't work how I want it to work. Here's the Ajax script anyway.
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
and here's and example of a navigation link
<ul id="nav">
<li>Design</li>
Is there a way I can alter the Ajax so that each page loads inside the div, while also changing the url, allowing me to have different titles for each page, and also preventing the website from loading the index.php on refresh?
If not, does anyone know of any other scripts of methods of loading pages - and it doesn't necessarily have to be ajax - into a div only while doing what I want it to do(diff urls, titles, etc,)
This is my first time posting so hopefully my question is clear enough - albeit long - and is formatted properly.
Thanks, Chris.

Answer 1

For easy Ajax handling you can use for example jQuery.
But that doesn't change anything about the "changing the url" problem. For that you should use hashes (#). Your urls would look like index.php#about or ../#about. You can check that string after the # and show an individual page.
var hash = "default.html";
if(window.location.hash)
hash = window.location.hash.substring(1);
switch(hash){
case "default":
showPage(1);
break;
case "news":
showPage(2);
break;
// ...
}

Answer 2

Take a look at this question Redirect all website traffic to PHP handler, pitfalls?
In the handler (index.php) you can set title, content (include) base on $_SERVER['REQUEST_URI'].