Refesh содержание только 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

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

Answer 2

Что-то вроде этого должно сделать трюк. (Непроверенные ..) также требует JQuery ...

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

Answer 3

мне удалось получить его работу со следующим сценарием:

$(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>