AJAX Javascript元素未更新

时间:2015-12-28 09:39:53

标签: javascript php ajax

我的Internet Explorer / EDGE浏览器存在问题。基本上,我有一个脚本从远程XML文件中提取数据并将其显示在页面中(实例:http://www.oldiesplus.com/ - 无线电信息部分,页面顶部)

它的工作方式是每隔15秒读取一次XML文件并更新歌曲标题(即滚动位)。这在IE / EDGE下的Google Chrome中完美运行,但是,脚本会执行(请参阅控制台日志),但该元素永远不会更新。

使用Curl抓取XML文件,并将CURLOPT_FRESH_CONTENT设置为true。

那么问题是,为什么元素没有用IE / EDGE中的新内容进行更新?

这里有一些代码可以提供帮助:

sc_conn.inc(PHP):

$ch             = curl_init($sc_host . '/admin.cgi?mode=viewxml');
    curl_setopt($ch, CURLOPT_PORT, $sc_port);
    curl_setopt($ch, CURLOPT_USERAGENT, $useragent);
    curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
    curl_setopt($ch, CURLOPT_USERPWD, $sc_admin.':'.$sc_pass);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_FRESH_CONNECT, TRUE);
    $curl = curl_exec($ch);

shoutcast.js(JavaScript):

function getStreamData() {
        var ajax;
        if (window.XMLHttpRequest) {
                ajax = new XMLHttpRequest();
        } else {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
        }
        ajax.open('GET','/sc_data.php', true);
        ajax.send();
        ajax.onreadystatechange = function() {
                if (ajax.readyState == 4 && ajax.status == 200) {
                        var data = ajax.responseText.split("|");
                        var song = (data[1] == '') ? 'some music.' : data[1];
                        var cta = (player_state == 0) ? '/new/img/play.png' : '/new/img/pause.png';
                        if (data[2]) {
                                document.getElementById('radio-info').innerHTML = '<h2>'+data[2]+'</h2>';
                                document.getElementById('radio-info').innerHTML += '<p><span class="dj_name">'+data[0]+' is playing</span> '+song+'</p>';
                        }else{
                                document.getElementById('radio-info').innerHTML = '<p><span class="dj_name">'+data[0]+' is playing</span> '+song+'</p>';
                        }
                        document.getElementById('tunein').src = cta;
                        console.log("Title Updated!");
                }
        }
}

1 个答案:

答案 0 :(得分:1)

解决方案是绕过AJAX请求的缓存 - 在PHP脚本调用结束时附加一个随机数:

Math.random();