Question

我现在已经对着奶酪刨丝器敲了一会儿。我有一个组件为我的网站添加一个新闻自动收报机，正在使用html中硬编码的div

没有xml的工作新闻自动收录：https://github.com/PitPik/tinyColorPicker

我希望更新此内容，以便用户可以更新内容，而无需或担心通过拥有xml文件来更改html; div需要有一个活跃的类来显示在自动收报机上

<div class="newsTicker active">Latest News updates/ticker 1</div>
<div class="newsTicker">Latest News updates/ticker 2</div>
etc....

我尝试了几种不同的方法和攻击，但似乎没有正确地在整个地方发出错误和/或在html页面上没有输出

XML文件

<?xml version="1.0" encoding="UTF-8"?>
<NEWSFEED>

    <STATUS>
        <UPDATE>Latest News updates/ticker 1</UPDATE>
    </STATUS>

    <STATUS>
        <UPDATE>Latest News updates/ticker 2</UPDATE>
    </STATUS>

    <STATUS>
        <UPDATE>Latest News updates/ticker 3</UPDATE>
    </STATUS>

    <STATUS>
        <UPDATE>Latest News updates/ticker 4</UPDATE>
    </STATUS>

</NEWSFEED>

html / xml更新代码（newsFeed.xml）

$(document).ready(function () {

    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            myFunction(xmlhttp);
        };

        xmlhttp.open("GET", "newsFeed.xml", true);
        xmlhttp.send();

    };

    function myFunction(xmlhttp, test) {

        var x, i, xmlDoc, feed;

        xmlDoc = xml.responseXML;
        feed = "";
        x = xmlDoc.getElementsByTagName("UPDATE");

        for (i = 0; i < x.length; i++) {
            feed += x[i].childNodes[0].nodeValue;
        }

        document.getElementByClassName("newsContent").innerHTML = '<div class="newsTicker">' + feed + '</div>';
    }

});

更新

看来我的主要问题是检索xml文件本身;在测试此脚本时产生错误。根据xmlhttp.open的位置，我得到一个0或1的就绪状态，从不4或以下错误：

XMLHttpRequest无法加载
交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。

我哪里错了？我也试过ajax并得到同样的问题

$(document).ready(function () {

    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            alert(success);
        } else {
            alert(failed to get file);
        };

        xmlhttp.open("GET", "newsFeed.xml", true);
        xmlhttp.send();

    };

Answer 1

如果您正在获取xml文档，则可能有效：

function myFunction(xmlhttp, test) {

    var x, i, xmlDoc, feed;

    xmlDoc = xml.responseXML;
    feed = "";
    i = 0;
    $('STATUS',xml).each(function() {
       feed = $(this).find('UPDATE').text(); 
       if (i == 0){
          html = html + '<div class="newsTicker active">' + feed + '</div>'
       } else  {
          html = html + '<div class="newsTicker">' + feed + '</div>'
       }
       i++
    }); 
$('.newsContent').html(html);
}

Answer 2

我已经解决了正在阅读的文档的主要问题。显然ie和chrome不喜欢代码“new XMLHttpRequest（）;”正在本地电脑上运行测试。在firefox中运行相同的代码产生了响应和状态correclty。

谢谢Jeremy然后更多的方式。在切换浏览器进行验证和测试之后，我能够正确接听电话并完成阅读.....你的救生员！

通过jquery用xml内容更新html div

2 个答案: