Loading content into a post via AJAX in Wordpress

Question

So I have this website that I run as a hobby and I am using Wordpress as the content management system, and now, I'm trying around different stuff as part of my posts, just to expand my horizons a little.

Now I learned some basic AJAX, like having XMLHttpRequest load an entire html page into a given div without reloading all the elements of the parent webpage. So I tried to recreate this within an individual post on my website. I have a test.htm page which contains some text, and inside my wordpress post, I have this:

<script type="text/javascript">
    function loadFile(url)
    {
       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("subContent").innerHTML=xmlhttp.responseText;
           }
       }
       xmlhttp.open("GET",url,true);
       xmlhttp.send();
       return xmlhttp.responseText;
    }
</script>
<div name="subContent" style="width: 100%; display: block;"><a href = "#" onclick="loadFile('/test.htm')">Click here to display the post</a></div>

I have the test.htm page in the root directory, and wordpress itself is located in its own directory called wordpress which has all of its files like wp-content, wp-includes and everything else.

Basically, the code above isn't doing what I hoped it would and the content of the test.htm page isn't being displayed when I click the ahref link above. It just simply refreshes the page and sits there. Btw, I have also tried passing the url of the .htm file as ../test.htm rather than what it is in the code snippet above (/test.htm). It still doesn't work. Does anyone know how to fix this, and give me some insight on this? Thank you.