display xml data in html from an xml file specified within another xml file with xmlhttprequest_问答_开发者

can you help, I have a basic xml file which is displaying well in html.

The xml file is as such...

<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><![C开发者_开发知识库DATA[]]></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>

All is displaying well except the data within the <videoCaption> tag - this links to another XML file which is made up of the following...

<?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>

What I'm trying to do with no success is display the data from the 2nd xml file along side the corresponding data, in the first xml file there are around 10 entries, and each one links to a separate xml file in the <videoCaption> tag.

So far I have managed to display the 2nd xml file within an iFrame, but I'm not able to style it using css, also it dose not work in Firefox.

At the moment I'm displaying the data in html using the dreamweaver spry method.

I had a very good response ....

In a nutshell, I would grab the the 2nd XML file (assume its on same domain) via an xmlhttprequest and then insert it into the a appropriately positioned DIV.

That way the CSS styles will still be available to it, which seems is not the case when you use an iframe.

What would the be the best way of using the xmlhttprequest with the current working html. I have set up a table to display the xml and I have included the XMLHttpRequest.js but I'm having no joy displaying the actual data from the 2nd file....

<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>

If anyone can shed some light on how I display the results of the 2nd xml file that would be great.

Thanks

This might work (untested so maybe some minor syntax issues) and you would place it below the TABLE markup:

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();
}

I moved this outside of the markup since an AJAX request takes time so document.write(result); wouldn't be a good idea.

Second, it might be easier to give the surrounding markup for the XML an ID so you don't have to do the getElementsByClassName thing and look for first result in array of results.

Finally, I'm not sure if you are messing with the XML so that it displays in your web page but if you need to do anything I've pointed out a good spot in the code comments.