使用PHP和Ajax获取/替换div标签的内容

Question

I'm very new to PHP/Ajax/Html so here's my baby problem (I'm making a radio station site),

test.php queries my server for the currently playing song name.

listen.php displays this song name in the 'refreshTitle' div tag.

When my station changes song there is a 30-ish second delay, so what I want to do is get the song title every second and compare / delay the update of the display if the title is different to what is actually being heard, easy peasy right?! Here is listen.php :

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
    function get_XmlHttp() {
        // create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
        var xmlHttp = null;

        if (window.XMLHttpRequest) {        // for Firefox, IE7+, Opera, Safari, ...
            xmlHttp = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {    // for Internet Explorer 5 or 6
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        return xmlHttp;
    }

    function ajaxrequest(php_file, tagID) {
        var request = get_XmlHttp();        // call the function for the XMLHttpRequest instance

        // create pairs index=value with data that must be sent to server
        var d = new Date();
        var t = d.toLocaleTimeString();
        var the_data = 'test=' + t; 
        //append time purely for testing to make sure text updates

        request.open("POST", php_file, true);           // set the request

        // adds  a header to tell the PHP script to recognize the data as is sent via POST
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(the_data);     // calls the send() method with datas as parameter

        // Check request status
        // If the response is received completely, will be transferred to the HTML tag with tagID
        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                document.getElementById(tagID).innerHTML = request.responseText;
            }
        }

    }

    setInterval(
        function () {
            ajaxrequest('test.php', 'refreshTitle')
        }, 1000); // refresh every 10000 milliseconds
    //This time val should vary based on the song title retrieved during the last second

</script>

And somewhere down the rest of the page I have this:

 echo "<div id=\"refreshTitle\" style=\"float:left; padding-top:6px;\">\n";
 echo "</div>\n";

In test.php (the file with the song name) I have this:

if (isset($_POST['test'])) {
$str = $_POST['test']; // get data
echo $dnas_data['SONGTITLE'] . " Current time " . $str;
}

So basically every second I send the time to test.php , which echos it and that echo I assume is put into 'refreshTitle' with this line:

document.getElementById(tagID).innerHTML = request.responseText;

What I want to do is get the song title into my javascript in listen.php and only run the ajax request after some string comparison / delay logic.

Sorry for the long-winded description but I'm fairly confused and think I've done this whole thing backwards :) Please let me know any thoughts...

Answer 1

First, I would recommend to you to update your jQuery version (1.3 is kinda old, the current version is 2+).
What's more, AJAX requesting is very well abstracted in jQuery : you can use the load() function to simply load an element content.
Source : http://api.jquery.com/load/