Новичок, подскажите как оптимизировать скрипт.

[asdds]

Доброго времени суток.
JS только начал изучать, ну и,вероятно раньше времени, решил реализовать ajax.
Скрипт рабочий, но громоздкий, и оставлять в таком виде его никак нельзя.
Делает он следующее - в навигации, onclick, меняет div с основным контентом и заодно меняет у элемента навигации класс на активный.

У меня рабочим получился только такой велосипед:

function services()
{
document.getElementById('main').className = 'nav-cell';
document.getElementById('services').className = 'nav-active';
document.getElementById('job').className = 'nav-cell';
document.getElementById('about').className = 'nav-cell';
document.getElementById('contacts').className = 'nav-cell';
loadXMLDoc("services.html",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("main-content").innerHTML=xmlhttp.responseText;
    }
  });
}

function job()
{
document.getElementById('main').className = 'nav-cell';
document.getElementById('services').className = 'nav-cell';
document.getElementById('job').className = 'nav-active';
document.getElementById('about').className = 'nav-cell';
document.getElementById('contacts').className = 'nav-cell';
loadXMLDoc("job.html",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("main-content").innerHTML=xmlhttp.responseText;
    }
  });
}

..... и так далее, всего 5 раз, каждому элементу навигации по функции :(

Собственно вопросы:
1. Нужно как-то находить элемент навигации, который был активным до клика, и возвращать ему стандартный класс. Я это, в силу скромных познаний представляю примерно так:

var active = document.getElementsByClassName('nav-active').id;
document.getElementById(active).className = 'nav-cell';

или так:

var active = document.getElementsByClassName('nav-active');
document.getElementById(active.id).className = 'nav-cell';

Но, по причине моей безграматности в js, оно так работать не хочет.
2. Вот эту ajax функцию можно не повторять пять раз а вынести отдельно, и просто менять аргументы?

loadXMLDoc("services.html",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("main-content").innerHTML=xmlhttp.responseText;
    }
  });
}

Просто я пробовал, и оно перестает работать.
3. Здесь вообще нужно пять отдельных функций, подозреваю что хватит одной с аргументами.

Буду благодарен за любой совет. Ногами не пинайте, просто полез изучать не с того конца, и надо уже довести до конца и разобраться.

[danik.js]

document.getElementById('main').className = 'nav-cell';

Зачем проставлять классы из js? Пропиши их в html.

document.getElementsByClassName('nav-active').

Зачем? Ты собственноручно выставляешь этот класс элементу. Не проще запомнить его в переменную, а потом не искать по классу, а обращаться сразу к переменной?

[asdds]

Зачем проставлять классы из js? Пропиши их в html.

Зачем? Ты собственноручно выставляешь этот класс элементу. Не проще запомнить его в переменную, а потом не искать по классу, а обращаться сразу к переменной?

Наверное ссылка на проект в текущем состоянии прояснит лучше всего:
http://themvm.wc.lt/

Я кое-что там поменял уже, относительно того что писал в шапке.

В scripts.js сейчас 5 почти идентичных функций. Я пытаюсь свести все к одной но с аргументами. Функция navigate в scripts.js - это как раз прообраз единой функции, и она пока не рабочая. Остальные 4 функции рабочие, но я от них хочу избавиться.
Есть две проблемы :
1.В html я вызываю функцию onclick="navigate(this.id,"main.html")".
Вопрос, почему аргумент "main.html" не передается во вложенную функцию loadXMLDoc(url,rewrite) ?
2. В основном занимался первым вопросом, но пока так и не придумал как менять классы для уже не активных элементов. Как видно по ссылке, вариант прописать в html мне не подходит, там одна страница по сути.

[danik.js]

Если нравится ООП подход:

<nav>
	<ul id="menu">
		<li><a href="a.html" class="nav-cell nav-cell-active">Бла бла</a></li>
		<li><a href="b.html" class="nav-cell">Бла бла</a></li>
	</ul>
</nav>
<main id="content"></main>
<script>
function Menu(menuElement, contentElement, linkClass, activeClass) {
	var links = menuElement.querySelectorAll('.' + linkClass);
	var activeLink = menuElement.querySelector('.' + activeClass);

	var menu = this;
	var onclick = function() {
		menu.activateLink(this);
		return false;
	};
	for (var i = 0; i < links.length; i++) {
		links[i].onclick = onclick;
	}
	this.links = links;
	this.activeLink = activeLink;
	this.activeClass = activeClass;
	this.contentElement = contentElement;
}

Menu.prototype.activateLink = function(link) {
	var request = new XMLHttpRequest();
	request.open('GET', link.href);
	var menu = this;
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			if (request.status == 200) {
				menu.displayContent(request.responseText);
			} else {
				menu.displayContent(menu.errorMessage);
			}
		}
	};
	request.send(null);
	this.activeLink.className = this.activeLink.className.replace(new RegExp('\\s*' + this.activeClass), '');
	this.activeLink = link;
	this.activeLink.className += this.activeClass;
};
Menu.prototype.displayContent = function(content) {
	this.contentElement.innerHTML = content;
};
Menu.prototype.errorMessage = '<b>Ошибка при загрузке</b>';

var menu = document.querySelector('#menu');
var content = document.querySelector('#content');
new Menu(menu, content, 'nav-cell', 'nav-cell-active');
</script>