I donīt know if this is the right place but I did not find an ajax forum so here it goes.

I am trying to have a page where I have a div called content, "the div is empty" I want to load some content using ajax, there is a menu with 4 items

item1 = ajax.php
item2 = ajax2.php
item3 = ajax3.php
item4 = ajax4.php

then I have this code

Code JavaScript:
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("content").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax.php",true);
xmlhttp.send();
}

What I am trying to do is use the same code for every item in the menu with its respective page without having to copy paste the code 4 times, can someone give me an idea on how I can do this.

I was thinking of having a variable that changes the ajax.php with a for loop but the page names are not exactly the way I typed them so I canīt just have

var number=1;
var page="ajax" + number + ".php";

since the names might be index.php history.php about.php or other names, I am starting to build this site so I dont have the exact names at the moment