Question

我进行了广泛的搜索，并在网络上找到的教程和解决方案的示例之后尝试了示例，但仍无法在本地计算机或服务器上运行。非常感谢您的帮助。

现在，开始营业......

我正在尝试在某个站点或服务器上以某种形式提取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>

Answer 1

你有几个问题密谋使这不起作用。

首先：您被same origin policy阻止。

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

另请注意，在Chrome（可能还有其他浏览器）中，您无法通过file:///网址的AJAX加载数据。因此，如果您直接从硬盘驱动器打开HTML文件（以便Chrome中的位置字段以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很棘手，因为我们正在谈论相同的原始政策。他们对此有documentation，但它可能会带来比你想要的更多的复杂性。

最后，我相信FireFox会为您提供AJAX本地file:///网址，因此这可能是一种选择。

您需要到达脚本警告的位置＆＃34;我们有XML数据！＆＃34;。如果它没有这么说，那么AJAX请求本身就失败了。再次，请关注错误控制台。

第二：处理AJAX响应时代码结构错误。

＆＃34; A＆＃34;在AJAX中代表＆＃34; Asynchronous＆＃34;。这意味着AJAX操作独立于脚本本身的执行线程运行。所以当你这样做时：

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

...

var xmlDoc = $.parseXML( xml );

最后一行在AJAX加载完成之前执行得很好。将$ .ajax视为＆＃34;背景＆＃34;处理。您的脚本将在加载时继续运行。

您需要在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 ...
})

在 ajax加载完成后，done内的代码将执行，并且它将接收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); } })

第三：您指定的数据类型为＆＃34; xml＆＃34;所以你不需要解析XML。 Jquery会为你做这件事。

我们在这里超出了我的舒适区域，因为我从不在jQuery中处理XML（我已经完成了几次，但我的所有网站都更喜欢JSON）。但我模糊的回忆是，data回调的success将可以随时查询。

最后：我不确定您要对XML数据做些什么。

看起来您可能已经对代码进行了几次调整，但评论并没有跟上。我只是假设您要从XML中获取文本并将其放入#someElement div。

所以你的最终代码是这样的：

$.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％正确。把它全部放在我的身上是很乏味的，所以我在这里没有经过考验。但希望它能让你走上正轨。

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

1 个答案: