<div id="names"></div>
<!-- AJAX: Asynchronious Javascript And XML -->
<form action="test.php" method="post">
  <input type="text" name="firstname" id="firstname"><br>
  <input type="text" name="lastname" id="lastname"><br>
  <button type="button" name="myBtn" onclick="ajax_post();">Отправить</button>
</form>
<script type="text/javascript">
  function ajax_post(){
    var hr = new XMLHttpRequest();
    var url = "test.php";
    var fn = document.getElementById('firstname').value;
    var ln = document.getElementById('lastname').value;
    var vars = "firstname="+fn+"&lastname="+ln;
    hr.open("POST",url,true);
    hr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    hr.onreadystatechange = function(){
      if(hr.readyState == 4 && hr.status == 200){
        var return_data = hr.responseText;
        document.getElementById('names').innerHTML = return_data;
      }
    }
    hr.send(vars);
    document.getElementById('names').innerHTML = 'Данные отправляются, пожалуйста, подождите...';
  }
</script>