title: Ajax database browser page Refresh changes the page instead of refreshing it
body: <p>I am facing a problem with my AJAX and PHP database. I bet many other new Ajax programmers would also be facing this problem. Although I have shortened the code but it is still somehow lengty, so please be patient. I have a button on the homepage index.php which when clicked, loads the Books Management System as it is Ajax database so the Books Management system is loaded on a div('mainDiv') on the same page. The problem is that when Books Management System is open whenever I refresh/reload the page(by clicking browsers Refresh button) it unexpectedly return to the homepage with button. On refresh the page contents should remain the same. But it never happens here. Doing it in Ajax makes it more complicated. Is there any simple/easy Ajax solution to it? Also kindly point out if something in this code is against good programming practises.
  Here is my code:
  ** script portion of Database Home page/index.php**</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  function submitData(dataSource,divID,formId)
  {
  var PostData;//assuming the form's post data has been already serialized to keep the question simple
  var dataSource;
  /*setting up XMLHttpRequestObject*/
  var XMLHttpRequestObject = false;
  if (window.XMLHttpRequest) 
  {   XMLHttpRequestObject = new XMLHttpRequest();}
  else if (window.ActiveXObject) 
  { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}
  else if (window.ActiveXObject)
  { XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");}
  else {  alert ("XMLHttpRequestObject can not be created");}
  
  /*processing sending of the form's post data*/
  if(XMLHttpRequestObject) 
  {
  var obj = document.getElementById(divID);
  XMLHttpRequestObject.open("POST", dataSource);
  XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  XMLHttpRequestObject.onreadystatechange = function()
  {
  if (XMLHttpRequestObject.readyState == 4 &amp;&amp;
  XMLHttpRequestObject.status == 200) {
  obj.innerHTML = XMLHttpRequestObject.responseText;
  }
  }
  XMLHttpRequestObject.send(PostData);
  }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Body portion of Database Homepage/index.php:</strong>    </p>
  
  <pre><code>&lt;h2&gt;
  Ajax Books Database
  &lt;/h2&gt;
  &lt;div id="mainDiv"&gt;
  &lt;form id="books-management-sys-targeting-form"&gt;
  &lt;input type="hidden" name="open-bms" value="open-jms" /&gt;
  &lt;input type="button" onclick="submitData('phpcontroller.php','mainDiv','books-management-sys-targeting-form')" value="Open Books Management System" /&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>When the Button on above home page is Clicked The PHP controller executes this code:</strong></p>
  
  <pre><code>/*Opening Books Management System*/
  if(isset($_REQUEST['open-bms']))
  {
  include 'books-management-system.html.php';
  }
  </code></pre>
  
  <p><strong>Here is the books-management-system.html.php code:</strong></p>
  
  <pre><code>//manage books categories link
  &lt;form id="to-manage-book-categories-form"&gt;
  &lt;input type="hidden" name="manage-book-categories" value="manage-book-categories" /&gt;
  &lt;a href="#" onclick="submitData('phpcontroller.php','mainDiv','to-manage-book-categories-form','personalform.txt')" &gt;Manage Books Categories&lt;/a&gt;
  &lt;/form&gt;
  .
  .
  //other tasks related to managing books
  .
  .
  </code></pre>
  
  <p>What changes I have to make in this code so as when I refresh it, it should display the same presently opened page/contents,not the main page. Is there an easy way to do it in Ajax? Please Help!</p>