Ajax阅读PHP

I think I'm getting ahead of myself, but I tried AJAX tutorials to read from a PHP file. The PHP file simply has an echo statement for the time, and I want to pass that to initialize a javascript clock.

But this is my first time trying AJAX and I can't even seem to get it to activate a test alert message.

Here is the code, it's at the bottom of my PHP page after all of the PHP.

<script type='text/javascript'>
function CheckForChange(){
    //alert("4 and 4");
    //if (4 == 1){
        //setInterval("alert('Yup, it is 1')", 5000);

        //alert('Now it is changed');
    //}

    var ajaxReady = new XMLHttpRequest();
    ajaxReady.onreadystatechange = function(){
        if (ajaxReady.readystate == 4){
            //Get the data
            //document.getElementById('clocktxt').innerHTML = ajaxReady.responseText;
            alert("here");
            alert(ajaxReady.responseText);
        }
    }
    ajaxReady.open("GET","ServerTime.php",true);
    ajaxReady.send(null);
}

setInterval("CheckForChange()", 7000);
</script>

Can somebody tell me why this isn't working? No idea what I'm doing wrong.

You should probably have something like:

setInterval(CheckForChange, 7000);

On an unrelated note, it's common naming convension in JavaScript to have function and methods names' first letters not capitalized, and the rest is in camelCase. i.e. checkForChange().

I'm not sure the exact problem with your code; here's what I use -- I'm sure it will work for you. (plus, it works with more browsers)

var xhr = false;
function CheckForChange(){
    /* Create xhr, which is the making of the object to request an external file */
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        if(window.ActiveXObject){
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){}
        }
    }
    /* End creating xhr */

    /* Retrieve external file, and go to a function once its loading state has changed. */
    if(xhr){
        xhr.onreadystatechange = showContents;
        xhr.open("GET", "ServerTime.php", true);
        xhr.send(null);
    }else{
        //XMLHTTPRequest was never created. Can create an alert box if wanted.
    }
    /* End retrieve external file. */

}

function showContents(){
    if(xhr.readyState==4){
        if(xhr.status==200){
            alert(xhr.responseText);
        }else{
            //Error. Can create an alert box if wanted.
        }
    }
}

setInterval(CheckForChange, 7000);

The problem in your code is an uncapitalized letter. (Oops!) You check ajaxReady.readystate; you need to check ajaxReady.readyState.

Because ajaxReady.readystate will always be undefined, your alerts never fire.

Here's your code fixed and working.


As an aside, have you considered using a library to handle the ugliness of cross-browser XHR? jQuery is your friend:

function CheckForChange(){
    $.get('ServerTime.php', function(data) {
        $('#clocktxt').text(data);
    });
}