刷新歌曲标题而不重新加载整个页面

Question

我正在制作一个Shoutcast音频播放器，其中包含正在播放的歌曲/艺术​​家的信息。我有两个单独的变量（$ song和$ artist），每次歌曲改变时它们的值都会更新。

以下是代码的摘录：

<?php

$ip = "111.111.111";
$port = "9436";

$fp = @fsockopen($ip,$port,$errno,$errstr,1);
if (!$fp) 
    { 
    echo "Streaming offline momentaneamente"; // Displays when sever is offline
    } 
    else
    { 
    fputs($fp, "GET /7.html HTTP/1.0\r\nUser-Agent: Mozilla\r\n\r\n");
    while (!feof($fp)) 
        {
        $info = fgets($fp);
        }
    $info = str_replace('</body></html>', "", $info);
    $split = explode(',', $info);
    if (empty($split[6]) )
        {
        echo "Streaming offline"; // Displays when sever is online but no song title
        }
    else
        {
        $title = str_replace('\'', '`', $split[6]);
        $title = str_replace(',', ' ', $title);
        $split = explode(' - ', $title);
        $artist = trim($split[0]);
        $song = trim($split[1]);
        }


    }

function truncate($string, $length, $dots = "...") {
    return (strlen($string) > $length) ? substr($string, 0, $length - strlen($dots)) . $dots : $string;
}

?>

<div class="player-item-ref acdc">
    <a class="player-link" href="#">
        <h2>AC/DC</h2>
        <ul><!-- THIS UL CONTAINS THE ITEMS TO BE REFRESHED -->
            <li class="song-title"><?php echo truncate("$song", 35); ?></li>
            <li class="song-artist"><?php echo truncate("$artist", 38); ?></li>
        </ul>
    </a>
</div><!-- /.player-container -->

我尝试在JavaScript中刷新5秒，但它会影响整个页面（包括播放器）。我想创建一个刷新这些变量而不重新加载整个页面的函数。

Answer 1

所有你需要的是你的问题标签：JavaScript，PHP和AJAX。

你需要这个东西：

1. 在PHP中创建一个端点，它只返回歌曲/艺术​​家信息，例如用JSON或XML格式化
2. 使用播放器将JavaScript代码放入页面中，定期（例如，在1或5秒内一次）从第1点调用端点（使用例如JavaScript函数XMLHttpRequest）并替换包含歌曲/艺术​​家信息的DOM的一部分（可能是DIV） /带有一些ID的SPAN）

就这样。这两件事一起叫做AJAX。该缩写最初意味着异步JavaScript和XML，但您也可以使用JSON或纯HTML作为端点的响应，而不仅仅是XML。 AJAX不是真实的东西，它只是JavaScript中异步调用技术的昵称。

以最愚蠢的方式：想象一下你的HTML页面中有一个播放器：

<div>Now playing: <span id="now_playing"></span></div>

创建一个JavaScript代码，每1秒执行一次，它将调用您在问题中发布的PHP脚本，该脚本将当前播放的歌曲作为文本返回而没有任何其他内容（只是“艺术家 - 歌曲”），JavaScript代码会将其放入（覆盖以前的内容）到span＃now_playing。就这样。