无法通过 jQuery 从其他域加载 XML

我已经搜索了很远的地方，并尝试了一个又一个在网上找到的教程和解决方案的例子，仍然不能在我的本地机器或服务器上工作。非常感谢您的帮助。

现在，谈正事…

我试图在某些站点或服务器上以XML的形式提供提要，并将其显示在页面上。看起来很简单，对吧?下面是我的代码，我使用基于jQuery文档…

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Get XML Demo</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p id="someElement"></p>
<p id="anotherElement"></p>
<script>
    $(document).ready(function(){        
        var xml = $.ajax({
            url: "http://www.w3schools.com/xml/note.xml",
            dataType: "xml"
        })
        .done( function() {
            alert("We have XML data!");
        })
        .fail(function() {
            alert("Failed to get XML");   
        });
        var xmlDoc = $.parseXML( xml ),
            $xml = $( xmlDoc ),
            $heading = $xml.find( "heading" );
        // Append "Reminder" to #someElement
        $( "#someElement" ).append( $heading.text() );
        // Change the title to "XML Title"
        $heading.text( "XML Title" );
        // Append "XML Title" to #anotherElement
        $( "#anotherElement" ).append( $heading.text() );
    });
</script>
</body>
</html>

您有几个问题共同导致这个不能工作。

First:您被同源策略阻止。

除非您正在加载数据的站点明确允许您这样做，否则您将无法加载文件。如果无法从数据源获得合作，则需要将数据加载移到服务器端。

还请注意，在Chrome(和可能的其他浏览器)，你不能通过AJAX从file:/// url加载数据。因此，如果您直接从硬盘打开HTML文件(例如Chrome中的Location字段以file:///开头)，并尝试以AJAX加载另一个本地文件，则会失败。

提示:密切关注您的错误控制台。浏览器应该会告诉你发生了什么。例如，当我在Safari中运行代码时，我得到这个明确的错误:

XMLHttpRequest无法加载http://www.w3schools.com/xml/note.xml。Access-Control-Allow-Origin不允许访问http://fiddle.jshell.net。_display: 29日

测试AJAX的最佳方法是使用本地web服务器。如果这是不可能的，考虑获得一个免费的托管帐户，在那里你可以上传HTML, XML等。并通过浏览器进行测试。

jsfiddle.net也是一个选项，尽管测试AJAX是棘手的，因为我们正在谈论的同源策略。他们有关于这个的文档，但是它可能会引入比你想要的更多的复杂性。

最后，我相信FireFox将允许您AJAX本地file:/// url，所以这可能是一个选项。

您需要到达脚本提醒"我们有XML数据!"的点。如果没有说明，那么AJAX请求本身就是失败的。同样，请密切关注错误控制台。

秒:处理AJAX响应的代码结构是错误的。

AJAX中的"A"代表"异步"。这意味着AJAX操作独立于脚本本身的执行线程运行。当你这样做的时候:

var xml = $.ajax({
   url: "http://www.w3schools.com/xml/note.xml",
   dataType: "xml"
});
...
var xmlDoc = $.parseXML( xml );

最后一行在AJAX加载完成之前执行得很好。想想$。Ajax作为"后台"进程。你的脚本会在加载时继续运行。

您需要在jquery ajax调用的一个回调中执行所有 XML处理。

var xml = $.ajax({
   url: "note.xml",
   dataType: "xml"
})
.done( function() {
   alert("We have XML data!");
})

首先是$。ajax函数返回一个jquery jqXHR对象，而不是XML。因此，您不想将其分配给xml变量。相反，您需要这样做:

$.ajax({
   url: "note.xml",
   dataType: "xml"
})
.done( function(data) {
   alert("We have XML data!");
   ... do all your xml processing here ...
})

done中的代码将在 ajax加载完成后执行，并将接收ajax响应数据作为其第一个参数。

另外，请注意，您可以使用ajax success回调来代替，我觉得这有点不那么神秘:

var xml = $.ajax({
   url: "note.xml",
   dataType: "xml",
   success: function(data) {
      alert("We have XML data!");
      ... your processing here ...
   },
   error: function(xhr, status, error) {
      alert("XML failed with error: " + error);
   }
})

第三:指定数据类型为"xml"，因此不需要解析xml。Jquery会为你做这些。

我们在这里超出了我的舒适区，因为我从来没有在jQuery中处理XML(我已经做过几次，但我所有的网站都更喜欢JSON)。但我模糊的回忆是，data给你的success回调将准备查询。

最后:我不知道你想用XML数据做什么。

看起来可能你已经调整了代码几次，而注释没有跟上。我只是假设您想从XML中提取文本并将其放入#someElementdiv。

所以你的最终代码应该是这样的:

$.ajax({
   url: "note.xml",
   dataType: "xml",
   success: function(data) {
      alert("We have XML data!");
      var heading = $xml.find( "heading" );
      $( "#someElement" ).append( $heading.text() );
   },
   error: function(xhr, status, error) {
      alert("XML failed with error: " + error);
   }
})

这可能不是100%正确的。在我这边设置是很繁琐的，所以我在这里不进行测试。但希望它能让你走上正确的轨道。

相关内容

最新更新

热门标签：