使用xmlhttprequest从另一个xml文件中指定的xml文件中显示html中的xml数据

时间:2010-09-01 08:24:02

标签: javascript xml xmlhttprequest

你能帮忙,我有一个基本的xml文件,它在html中显示得很好。

xml文件就是这样......

<videoList>
        <video>
            <pointer>
                <type><![CDATA[image]]></type>
                <lat><![CDATA[52.1]]></lat>
                <long><![CDATA[1.0]]></long>
            </pointer>
            <speaker>
                <firstName><![CDATA[Mr Car Dealer]]></firstName>
                <town><![CDATA[]]></town>
                <description><![CDATA[Car Dealer]]></description>
                <longDescription><![CDATA[A car dealer selling BMW's and Audi's]]></longDescription>
                <videoCaption><![CDATA[captions/bmw.xml]]></videoCaption>
                <video><![CDATA[video/9ADA1C9.flv]]></video>
                <story><![CDATA[]]></story>
                <picture><![CDATA[images/bmw.jpg]]></picture>
            </speaker>
        </video>

除了<videoCaption>标记内的数据外,所有内容都显示良好 - 这链接到另一个由以下内容组成的XML文件...

<?xml version="1.0" encoding="utf-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
   <styling>
      <style id="1" tts:textAlign="right"/>
      <style id="2" tts:color="transparent"/>
      <style id="3" style="2" tts:backgroundColor="white"/>
      <style id="4" style="2 3" tts:fontSize="10"/>
   </styling>
  </head>
  <body>
   <div xml:lang="en">
    <p begin="00:00:00.20" dur="00:00:02.00">My name is Mr Car.</p> 
    <p begin="00:00:02.30" dur="00:00:03.00">We offer original car parts.</p>

</div>
</body>
</tt>

我正在尝试做的没有成功是显示第二个xml文件中的数据和相应的数据,在第一个xml文件中有大约10个条目,每个条目链接到一个单独的xml文件<videoCaption>代码。

到目前为止,我已经设法在iFrame中显示第二个xml文件,但是我无法使用css对其进行样式化,也不能在Firefox中使用它。

目前我正在使用Dreamweaver spry方法在html中显示数据。

我得到了很好的回应......

  

简而言之,我会抓住它   第二个XML文件(假设它是相同的   域)通过xmlhttprequest然后   适当地插入a   DIV。

     

那样CSS样式仍然是   可用,似乎不是   使用iframe的情况。

将xmlhttprequest与当前工作的html一起使用的最佳方法是什么?我已经设置了一个表来显示xml,我已经包含了XMLHttpRequest.js,但是我没有显示来自第二个文件的实际数据的快乐....

<table width="600" border="0" align="center" cellpadding="0" cellspacing="14" class="storyContainerBack">
<tr>
   <td width="144" align="left" valign="top">{firstName}<br />
    {description}<br />
     <br />
       <img src="{picture}" width="80" height="80"/></td>
          <td width="424" align="left" valign="top"><p class="storyTableTitle">{longDescription}</p>
        <p class="storyTableCaption">
<script type="text/javascript">
var req = new XMLHttpRequest(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4 && (req.status == 200 || req.status == 304)) { alert(req.responseText); } }; req.open('GET', '{videoCaption}'); req.send(null); } 
    </script>
</p>
</td>

  

如果有人能说明我如何显示第二个xml文件的结果会很棒。

由于

1 个答案:

答案 0 :(得分:0)

这可能有用(未经测试,可能是一些小的语法问题),你可以把它放在TABLE标记下面:

function getVideoChild() {
    var req = new XMLHttpRequest();
    req.open("GET", "whatever-file-name-is.xml");
    req.onload = function() {

       var result = req.responseText; 
           // If you need to manipulate result, do it here, then this:
       var target = document.getElementsByClassName('storyTableCaption')[0].innerHTML = result;

    };
    req.send();
}

我把它移到了标记之外,因为AJAX请求需要时间,因此document.write(result);不是一个好主意。

其次,为XML提供ID的周围标记可能更容易,因此您不必执行getElementsByClassName事情并在结果数组中查找第一个结果。

最后,我不确定你是否在搞乱XML,以便它显示在你的网页中,但如果你需要做任何事情,我已经在代码评论中指出了一个好位置。