Display a single post in an Overlay window using XMLHttp Request

Hi, I am new to WordPress and not really sure if what I am doing is right. Please let me know if its right or the correct way of doing it.

This what I want to do.

I display the excerpts of posts in my home page. When a user clicks on the title I would like to retrieve the entire post from the server using XMLHttp request and display it on the user’s browser through an Overlay Window.

To go about it what I do is, when the user clicks on the title, I call a JavaScript function which uses XMLHttp request and calls a PHP file using GET method. In the PHP file I get the Post ID of the post clicked by the user, then check if the $post->ID variable equals to the Post ID clicked. If that condition is true, I store the contents of the post in a variable called $response and return it using “echo”.

The problem is, I keep getting the following error msg:
Call to undefined function wp_head() in D:\Inetpub\wwwroot\staffclub\wp-content\themes\default\get_data_post.php on line 7
Call to undefined function have_posts() in D:\Inetpub\wwwroot\staffclub\wp-content\themes\default\get_data_post.php on line 7

If any of you guys know the reason for it, I would be happy to know about. Any form of suggestions are welcome. If you guys know any plugins that can do the task which I want to do, please let me know as well.

The code is attached below. The webpage can be accessed at https://dev-aserv.nus.edu.sg/staffclub/. (Note: When accessing the site there might be some certificate issue as the site is still under development. Generally it is fine to accept the certificate.)

The HTML code snippet that corresponds to user click:

<a onclick="showPost('<?php the_ID(); ?>')" style="color:#FF9933;"><?php the_title(); ?></a>

JavaScript Code:

var xmlHttp;

function showPost(Post_ID) {
  document.getElementById('SinglePostBox').style.display = "none";
  document.getElementById('Load').style.display = "block";
  xmlHttp = GetXmlHttpObject();
  if (xmlHttp == null) {
    alert ("Browser does not support HTTP Request");
    return;
  }
  var url = "wp-content/themes/default/get_data_post.php";
  url = url + "?postInfo=" + Post_ID;
  url = url + "&sid=" + Math.random();
  xmlHttp.onreadystatechange = statePChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

function statePChanged() {
  if (xmlHttp.readyState == 4) {
    if (xmlHttp.status ==200) {
      document.getElementById('Load').style.display = "none";
      document.getElementById('SinglePostBox').style.display = "block";
      document.getElementById('PostDisplay').innerHTML = xmlHttp.responseText;
    }
  }
}

function GetXmlHttpObject() {
  var xmlHttp = null;
  try {
    // Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  }
  catch (e) {
    // Internet Explorer
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return xmlHttp;
}

PHP code from the file get_data_post.php:

<?php

$Post_ID = $_GET["postInfo"];

wp_head();

if (have_posts()) :

  while (have_posts()) : 

    the_post();

    if ($post->ID == $Post_ID) :

      $response = "test" /* Add the entire post content here */;

      break;

    endif;

  endwhile;

endif;

echo $response;

?>