为什么AJAX POST请求不起作用

Question

    <script>
        function postComment() {
            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("commentHint").innerHTML = xmlhttp.responseText;
                }
                var comment = document.getElementById("comment").value;
                var id = document.getElementById("postID").value;
                xmlhttp.open("POST", "commentpost.php", true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.send("comment=" + comment + "&postID=" + id);
            }
        }

    </script>
    <form>
        <div id="comment">
            <textarea name="comment" id="comment" rows="4" cols="125" style="max-width: 950px; max-height: 140px;" placeholder="<?php echo $_SESSION["name"] ?>, Write Your Comment Here" class="form-control"></textarea><br>
            <div id="commentHint"></div>
            <input type="submit" onclick="postComment()" value="Submit Comment"  class="btn btn-success btn-sm ">

            <input type="hidden" id="postID" name="postID" value="<?php echo $post_id ?>">

        </div>
    </form>

I have no idea why my AJAX POST request isn't working... Here's the POST vars in my corresponding PHP FILE:
$comment = $_POST["comment"];
$postID = $_POST["postID"];

When ever I click the submit comment button it refreshes the page first and bring me back to the home page. It does not fire the php script either.. I'm new to AJAX can someone please tell me what's wrong

Answer 1

Your xmlhttp.send(...) call is within the onreadystatechange handler, for the handler method to get called you need to send the request so the ajax method is never executed.

The code that is responsible to send the request should be outside of the handler method.

function postComment() {
    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("commentHint").innerHTML = xmlhttp.responseText;
        }
    }//need to close onreadystatechange here
    var comment = document.getElementById("comment").value;
    var id = document.getElementById("postID").value;
    xmlhttp.open("POST", "commentpost.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("comment=" + comment + "&postID=" + id);
}

Note: If you use proper code indentation this kind of issues can be easily avoided.