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

我正在用正在播放的歌曲/艺术家的信息构建一个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秒钟，但它会影响整个页面（包括播放器）。我想创建一个函数，在不重新加载整个页面的情况下刷新这些变量。

您所需要的只是问题的标签：JavaScript、PHP和AJAX

你需要这些东西：

在PHP中创建一个端点，它只返回歌曲/艺术家信息，例如以JSON或XML格式的信息

将JavaScript代码放在带有播放器的页面中，播放器会定期（例如1秒或5秒一次）从第1点调用端点（例如使用JavaScript函数

XMLHttpRequest

），并替换部分DOM，其中包含歌曲/艺术家信息（可能是带有某个ID的DIV/SPAN）

就这些。这两样东西合在一起叫做。该缩写最初表示异步JavaScript和XML，但您也可以使用JSON或纯HTML作为来自端点的响应，而不仅仅是XML。AJAX不是一个真正的东西，它只是JavaScript中异步调用技术的一个昵称

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

正在播放：

---

创建一个JavaScript代码，每1秒执行一次，它将调用您在问题中发布的PHP脚本，该脚本将当前播放的歌曲作为文本返回，而不包含任何其他内容（仅为“艺术家歌曲”），JavaScript代码将其（覆盖以前的内容）放入span#now_播放中。仅此而已。

您有任何示例代码或小提琴吗？但似乎您已经知道如何解决它。您将问题标记为“ajax”，所以是的，这是正确的方法-使用ajax动态更新页面的一部分（DOM）。嗨，Chris和Dawid，我刚刚添加了一段代码摘录，我想我必须使用ajax做一些事情。只需使用您在问题中发布的脚本作为我在回答中描述的端点。您可以只打印想要显示的文本（歌曲/艺术家信息），但最好将其封装为JSON/XML。但是你可以从文本开始。用JavaScript调用该端点，并定期用返回的内容覆盖某个标记的内容。你可以在谷歌上搜索大量的例子。谢谢你的回复，Dawid，我将进一步调查，因为我是Ajax和PHP的新手。欢迎你。如果你有什么事要做，尽管问。但是不要害怕——AJAX真的没有任何意义。这只是异步JavaScript调用的昵称。您已经将我的帖子标记为答案。这是否意味着你已经解决了这个问题？是的！但是我没有使用JSON，而是使用了jQuery+AJAX（），我将继续改进！谢谢，道伊德。好的，太好了！但正如我所写的，它被称为AJAX，即使您使用了JSON或纯文本。