Question

被修改

我需要使用存储在外部XML文件中的内容填充网页。我找到了一个有效的例子：http://jsfiddle.net/9eqvq/

但是，在此示例中，数据直接写入HTML文档。

应用程序应该能够从远程XML文件中读取。我尝试使用jQuery parseXML方法执行此操作，但我无法访问XML文档。

当我尝试在控制台中输出XML文档的整个内容时，如下面的代码所示，我在Chrome控制台中看到以下错误：

XMLHttpRequest cannot load file://localhost/Users/Fabi/Documents/xml/xml.xml. 
Cross origin requests are only supported for protocol schemes: 
http, data, chrome-extension, https, chrome-extension-resource.   VM71 jquery-1.10.1.js:8724
send                                                              VM71 jquery-1.10.1.js:8724
jQuery.extend.ajax                                                VM71 jquery-1.10.1.js:8154
(anonymous function)                                              VM72 index.html:19
fire                                                              VM71 jquery-1.10.1.js:3074
self.fireWith                                                     VM71 jquery-1.10.1.js:3186
jQuery.extend.ready                                               VM71 jquery-1.10.1.js:433
completed                                                         VM71 jquery-1.10.1.js:104

以下是我使用的代码：

<html>
<head>
<title>Parsing XML File</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>  
</head>

<body>
    <div id="output">Default text without manpulation</div>

    <script>

        $(document).ready(function()
        {
          $.ajax({
            url: "xml/xml.xml",
            dataType: "xml",
            success: function(data)
            {
                console.log(data);
                $("#output").text("Message from Success function"); 
            }, 
            error:function()
            {
                $("#output").text("Message from Error function");   
            }
          });
        }); 

    </script>
</body>
</html>

当我打开包含上述脚本的index.html（双击）时，我看到了成功消息

Message from Success function

但不是XML文档的数据。当我用$("#output").text("Message from Success function"); Safari替换$("#output").text(data);时，Chrome和Firefox只会向我显示

[object XMLDocument]

有人可以告诉我我做错了什么吗？是否有可能不需要本地网络服务器的工作演示文件？顺便说一句，我还尝试在XAMPP和Node.js网络服务器上运行Safari，Chrome，Firefox代码 - 但没有成功。任何帮助将不胜感激。

Answer 1

charlietfl是对的：

如果成功处理程序正在运行，则表示您正在接收数据

我尝试在Chrome，Firefox和Safari中启动相同的HTML-doc。以前我主要依靠Chrome。 Chrome未显示使用XML数据生成的HTML文档。然而，Firefox和Safari完成了这项工作。进行一些研究我发现我必须以这种方式启动Chrome：转到终端并通过输入以下内容启动Chrome并使用allow-file-access-from-files - 标志：

Google\ Chrome.app --args --allow-file-access-from-files

对于那些有同样问题的人 - 这是一个演示。对我来说这很有用。将index.html和cd_catalog.xml文件保存在同一目录中，然后在浏览器中打开index.html。我无法记住我在哪里找到这个例子，但我有足够的自由来修改它:-)你最好不要在Chrome中这样做。喜欢Firefox或Safari。

的index.html

<html>
<body>

<script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>

</body>
</html>

cd_catalog.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Edited by XMLSpy -->
<CATALOG>

    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
    <CD>
        <TITLE>When a man loves a woman</TITLE>
        <ARTIST>Percy Sledge</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Atlantic</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Black angel</TITLE>
        <ARTIST>Savage Rose</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Mega</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1995</YEAR>
    </CD>

</CATALOG>

使用jQuery读取外部XML文件

1 个答案: