AJAX: getElementById().innterHTML not working

问题

The following code does not work and I don't know why. i.e. the text from the server file is not printing on the screen. So, the text I'm looking to change, does not change.

The first section setting up the ajaxRequest has worked for other sample codes.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>

</head>
<body>

<script type="text/javascript">

//Browser Support Code
function ajaxFunction()
{
var ajaxRequest;  

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}

I'm pretty sure the problem is somewhere down here, but I don't see where:

ajaxRequest.onreadystatechange = function()
    {
    if(ajaxRequest.readyState == 4)
            {
                document.getElementById("time").innerHTML = ajaxRequest.responseText;
    }
}
ajaxRequest.open("POST", "serverTime.php", true);
ajaxRequest.send(null); 
}


</script>

<form name='myForm'>
    Name: <input type='text' onChange="ajaxFunction();" name='username' /> <br />
      <p id="time">Original text</p>
</form>


</body>
</html>

following is the code for serverTime.php:

<?php

echo "Hello world."; 
?>

The browser looks like this when I type "test" into the 'username' input:

http://localhost/ajax_testing/ajax_tut.html?username=test

来源：https://stackoverflow.com/questions/15526666/ajax-getelementbyid-innterhtml-not-working

标签

ajax

innerhtml