XMLHttpRequest.open无效的上下文错误

Question

I'm getting

InvalidStateError: XMLHttpRequest has an invalid context.

on the line beginning with xmlhttp.open below:

function ShowData(str) {
    document.write('<div>Started</div>');
    if (str == "") {
        document.write('str null');
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            document.write('<div>Setting http</div>');
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            document.write('<div>onreadystatechange event</div>');
            if (this.readyState == 4 && this.status == 200) {
                document.write('<div>Getting response</div>');
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","testquery.php", true); // error here
        xmlhttp.send();
    }
}

Here's "testquery.php", I've tested it by just echoing the results in the html without JS and the data is returned OK:

<?php

$con=mysqli_connect("xxx","xxx","xxx") or die ("failed to connect to server !!");
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"testdb");
$sql="SELECT * FROM tblComments";
$result = mysqli_query($con,$sql);

echo "<table>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['comment'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);

?>

Please keep it noob friendly! Thanks.