Почему в моем коде XMLHttpRequest не получает содержимое example.html и не меняет содержимое index.html?

content_change.js

function content_change(content_id)
{
    event.preventDefault();

var request = new XMLHttpRequest;
var url = content_id + '.html'
request.onreadystatechange = function()
{
    if(request.readyState == 4 && request.status == 200)
    {
        document.getElementById('content').innerHTML = request.responseText;
    }
};
request.open('GET', url);
request.send();}

index.html

<div id="header">
<a id="menu" onclick="content_change('index')" href="/">Home</a>
<a id="menu" onclick="content_change('example')" href="/example">Example</a>
</div>

<div id="content">
<p>Главная</p>
</div>

<script src="content_change.js" type="text/javascript"></script>

example.html

<div id="content" class="content">
<p>Тест</p>
</div>