javascript - 在 HTML 文档中使用 XML 文件中的数据

Question

正如标题所示，我希望能够在 HTML 页面中使用 XML 文件中的数据。让我解释一下该页面正在尝试执行的操作，以帮助解释我需要帮助的内容..

完成后，HTML 页面将通过搜索查询转至 YouTube 服务器，并检索通过搜索生成的包含最新信息的 XML 文件。然后页面将查看给定的 XML 文件，并找到 <yt:videoid>节点，并将字符串传输到 HTML 文件。然后 HTML 文件可以使用该字符串(可能是 JavaScript)来制作嵌入视频代码。

因此，由于搜索查询，结果页面将始终包含最新视频。

到目前为止，我已经找到了获取 XML 文件的链接(如下)并查看了 XML(链接:https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=1&v=2)

我发现我想要的信息在一个名为<yt:videoid>的节点中位于<media:group>下位于<feed>下

在网上做了一些研究后(因为我不是一个 javascript 程序员，我只有基本知识，我发现你可以使用 XML DOM 从 HTML 页面中读取和改编 XML 文件。但是 XML DOM 的问题代码的一个缺点是它需要将 XML 文件托管在实际服务器本身上，但显然不是这样 - 因为它在 youtube 上。

有谁知道我可以读取数据并将其放入 JavaScript 变量中的方法吗？我不一定希望你花很多时间写一些代码，但至少希望你能引导我走向正确的方向？

非常感谢，

Ant 。

PS，请记住我不是 JS 或 HTML 程序员。我只知道基础知识，如果我在这篇文章中做错了什么，请告诉我，因为这是我在 stackoverflow 上的第一次。

Answer 1

浏览器端无需执行任何操作即可获取 XML 或解析它。

Youtube 的 API 是公开的，允许任何人(？)查询它，这意味着您只需要一个简单的 ajax 调用即可获取 xml 文件。使用一些额外的 jQuery(或任何其他库)，您可以提取视频的 id:

jQuery(document).ready(function() {
    // request xml data
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=1&v=2',{
        dataType:'xml',
        success: function(data,status, xhr ) {
           // process response
           var $_d =$(data);

           var videoTag = $_d.find('yt\\:videoid'); // doesn't seem to work
           var videoTag = $_d.find('videoid'); // works
           var videoId = videoTag.text();

           // do the embedding
           embedYT(videoId);
        }
    });

   // a simple way to embed a youtube player in a page
   function embedYT(id) {
        jQuery(document.body).append("<iframe class='youtube-player' type='text/html' width='640' height='385' src='http://www.youtube.com/embed/"+id+" frameborder='0'></iframe>")
   }
});

jsFiddle