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

Question

正如标题所暗示的，我希望能够在HTML页面中使用XML文件中的数据。让我解释一下该页面试图做什么，以便帮助解释我需要帮助的内容。

完成后，HTML页面将使用搜索查询转到YouTube服务器，并检索搜索生成的包含最新信息的XML文件。然后，页面将查找给定的XML文件，找到<yt:videoid>节点，并将字符串传输到该文件。然后，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从HTML页面中读取和调整XML文件。但是XML DOM代码的问题在于，它需要将XML文件托管在实际的服务器本身上，但显然不是这样的-因为它在youtube上。

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

非常感谢你的进阶，

蚂蚁。

另外，请记住我不是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

Answer 2

示例php代码：

// content of example.php
<?php

$xml = simplexml_load_file('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=1&v=2');
foreach( $xml->children() as $child) {
    if($child->getName() == 'yt:videoid'){
        echo $child->asXML();
    }
}

?>

示例jQuery代码：

var ytUrlThing;
$.post('example.php', function(data) { ytUrlThing = data; });