continuos ajax request gives error net::ERR_EMPTY_RESPONSE

steps to reproduce the error

  1. open http://www.blackboardjournals.com/test2.php
  2. click on the next button continuously for 30-40 times
  3. the counter stops after a certain count
  4. the console shows an error net::ERR_EMPTY_RESPONSE
  5. if you refresh immediately after the counter stops, the site becomes unresponsive

I am not able to understand why this error is occurring. can somebody help me understand what is wrong?

My code:

<?php

if(isset($_POST['btn_num'])){
    $btn_name=$_POST['btn_num'];
    echo $btn_name+1;
    exit();
};
?>
<script type="text/javascript">
function ajaxObj( meth, url ) {
    var x = new XMLHttpRequest();
    x.open( meth, url, true );
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    return x;
}
function ajaxReturn(x){
    if(x.readyState == 4 && x.status == 200){
        return true;    
    }
}

function call_next(){
    var new_ans=$('.number').html();
    var ajax =ajaxObj("POST",'test2.php');
    ajax.onreadystatechange=function(){
        if(ajaxReturn(ajax)==true){
            $('.number').html(ajax.responseText);           
        }
    }
    ajax.send('btn_num='+new_ans);
}

</script>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/pwa/js/jquery.js" ></script>
</head>
<body>
<div class="number">1</div>
<button onclick="call_next();">next</button>
</body>
</html>