通过Ajax在html中显示xml信息

时间:2019-01-04 09:18:10

标签: javascript html ajax xml

我正在Web广播电台上工作,并且有一个程序,通过该程序,流技术(jazler)可以通过ftp将xml文件(包含诸如当前歌曲名称,上一首歌曲等信息)通过ftp发送到Web服务器,这些文件会在歌曲更改时自动更新。.

NowOnAir.xml代码:

<Schedule System="Jazler">
    <Event status="happening" startTime="10:05:40" eventType="song">
        <Announcement Display=""/>
        <Song title="Forbidden Voices">
            <Artist name="Martin Garrix"> </Artist>
            <Jazler ID="7304"/>
            <PlayLister ID=""/>
            <Media runTime="03:05"/>
            <Expire Time="10:08:44"/>
        </Song>
    </Event>
</Schedule>

立即要注意的是,我不是一名程序员,而且我对编码知之甚少!我在Internet上找到了以下脚本并对其进行了测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
var speed = 10000; // 10 seconds

function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);if(v!=null)n.push(v)}return n};

ajax={};
ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e) {try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}};
ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.get=function(url,func){ajax.send(url,func,'GET')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.post=function(url,func,args){ajax.send(url,func,'POST',args)};
ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f)};
ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax.serialize(frm))};

function process(xml) {
document.getElementById('contentfile').innerHTML=xml;
var title = document.getElementById('contentfile').getElementsByTagName('Song')[0].title;
var name = document.getElementById('contentfile').getElementsByTagName('Artist')[0].name;
document.getElementById('contentfile').innerHTML='NOW ON AIR: '+name+' | '+title;
}
function checkXml() {
ajax.get('http://website.com/jazler/NowOnAir.xml',process)
}
window.onload=function() {
checkXml();
tId=setInterval('checkXml()',speed)
}

</script>

</head>
<body >
<div id="contentfile">
</div>
</body>
</html>

这将显示当前歌曲的名称,但是应在作者姓名的书写位置写上“ undefined”。

注意:一切都在wordpress平台上。

1 个答案:

答案 0 :(得分:0)

titlename是属性,所以我建议像这样使用getAttribute方法:

var title = document.getElementById('contentfile').getElementsByTagName('Song')[0].getAttribute("title");
var name = document.getElementById('contentfile').getElementsByTagName('Artist')[0].getAttribute("name");

我已经使用您的代码对其进行了测试,它显示NOW ON AIR: Martin Garrix | Forbidden Voices

编辑以进一步说明:
我还要补充一点,title起作用的原因是因为您将XML直接放入HTML DOM中,而title是HTML DOM属性。
最好创建一个新的DOM文档来存储XML:

parser = new DOMParser();
xmlDoc = parser.parseFromString(xml,"text/xml");
var title = xmlDoc.getElementsByTagName('Song')[0].getAttribute("title");
var name = xmlDoc.getElementsByTagName('Artist')[0].getAttribute("name");