Обновить содержимое только div

Question

У меня есть публичный SHOUTcast на моем сайте, и я настроил виджет, чтобы участники могли видеть информацию, такую ​​как текущий воспроизводимый трек, название шоу и т. Д. Что я хочу, это способ обновить часть страница, в которой находится виджет, в отличие от всей страницы. (Я бы использовал iframe, но поскольку мы используем скины, выбранные членами, CSS в iframe не будет соответствовать остальной части страницы.)

Как мне это сделать? AJAX может быть?

Мои знания об AJAX очень ржавые, поэтому, если бы вы были так любезны, чтобы провести меня через это, это было бы очень ценно.

Код для виджета:

<div class='ipsBox table_wrap'>

    <table class='ipb_table' cellspacing='1'>

        <tbody>

            <tr>

                <td class='row2'>Status:</td>
                <td class='row2'><font color='#33ff00'>Online</font></td>

            </tr>

            <tr>

                <td class='row2'>Show:</td>
                <td class='row2'>$servertitle</td>

            </tr>

            <tr>

                <td class='row2'>Listeners:</td>
                <td class='row2'>$currentlisteners / $maxlisteners</td>

            </tr>

            <tr>

                <td class='row2'>Now Playing:</td>
                <td class='row2'><marquee width='200'scrolldelay='1' scrollamount='4'>$song[0]</marquee></td>

            </tr>

            <tr>

                <td class='row2'>Tune In:</font></td>

                <td class='row2'>       

                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/winamp.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/foobar.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/playlist.asx'><img src='public/shoutcast/icons/wmp.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/itunes.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/vlc.png'/></a>
                    <a href='http://xxx.xxx.xx.xx:xxxx/listen.pls'><img src='public/shoutcast/icons/mm.png'/></a>

                </td>

            </tr>

        </tbody>

    </table>

Answer 1

Мне удалось заставить его работать со следующим скриптом:

 $(document).ready(function() {
     $("#refresh").load("radiostatus.php");
   var refreshId = setInterval(function() {
      $("#refresh").load('radiostatus.php?randval='+ Math.random());
   }, 10000);
   $.ajaxSetup({ cache: false });
});




<div id='refresh'>

    <?php include('radiostatus.php'); ?>

</div>

Answer 2

Нечто подобное должно сработать.(не проверено ..) Также потребуется jQuery ...

$.get(window.location.href, function(data) {
    $("ipsBox table_wrap").html( $("ipsBox table_wrap", $(data)).html() );
});

Answer 3

1. Отправьте запрос AJAX.
2. Получите ответ.
3. Подготовьте HTML-код, которым вы хотите заменить <div>.
4. Используйте element.innerHTML для замены <div> содержимого.