How to load an external XML from JavaScript?

Question

I have a problem. I want to load an XML file and extract particular nodes from it for displaying using JavaScript.

I have found the following tutorial: http://www.w3schools.com/dom/dom_nodes_get.asp

And based on that I tried my own, but it doesn't work and I don't know what I am doing wrong.

So basically I would like to load a weather forecast in an XML document, for example this one: http://weather.yahooapis.com/forecastrss?w=2442047&u=c

And lets say I want to read the first value, the node "title".

Now based on the tutorial I used the following script:

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
    xmlDoc = loadXMLDoc("http://weather.yahooapis.com/forecastrss?w=2442047&u=c");
    x = xmlDoc.getElementsByTagName("title");
    document.write(x.nodeValue);
</script>
</body>
</html>

But I do not get any result. Could anyone help me where I make the mistake?

check this link out, it has valuable information [XML parsing of a variable string in JavaScript](http://stackoverflow.com/questions/649614/xml-parsing-of-a-variable-string-in-javascript) — Mike, Jul 12 '13 at 15:29

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

This most likely has to do with the same origin policy. What that means is that you are not allowed to fetch data from another domain than the domain where your JavaScript is running from.

To explain a little further, if I have a page at www.example.com/ I can use the function to fetch xml-files from www.example.com/example1/data.xml but I am not allowed to fetch data from www.someothersite.com. There are ways to work around this problem: Ways to circumvent the same-origin policy

You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

edited May 23 '17 at 10:26

Community

1
1

answered Jul 12 '13 at 15:30

Reason

1,410
12
33

It depends a little on the settings that openweathermap.org/api uses. Please look into how the same origin policy works and you will hopefully learn some more. – Reason Jul 12 '13 at 15:34
Hm, thankx for advice. I am a beginner and basically all I need is to load the weather using javascript so that I can use the variables of the weather. From OpenMaps, this should be possible, but from the description here http://openweathermap.org/api I do not understand how to do it... – Jachym Jul 12 '13 at 15:43

score 0 · Answer 2 · answered Jul 12 '13 at 15:32

0

You need to put the XML files in your own domain.It's not permitted for cross-domain request.

answered Jul 12 '13 at 15:32

Fly_pig

155
8

I see, could I somehow work around it by using JSON? How would I load it in JSON? Lets say using instructions here: http://openweathermap.org/api I want to load http://api.openweathermap.org/data/2.5/weather?id=2172797 – Jachym Jul 12 '13 at 15:35
No, using JSON or XML is not the problem. Please see my answer and the link. – Reason Jul 12 '13 at 15:37
@user2370078 as Reason mentioned, it's not matter of the data format,but the same origin policy---by which browser ensure user's information safety.The policy forbidden you from requesting data across domain.If you want to use the api, you need to obtain the data on server-side, and provide your own api for ajax request. – Fly_pig Jul 12 '13 at 16:07

score 0 · Answer 3 · answered Aug 12 '13 at 17:40

//
//  you can do that using 'curl-lib', say in php, ( if your server support it, usualy they do ) like this:
//  
//    create this php file:
//  
//  doc_reader.php
//  ***********************************************************
//  <?php
//  
//  header('Content-Type: '. $_POST['url_mime']);
//  
//  $url  = $_POST['fetch_url'];
//  
//  $ch   = curl_init( $url );
//  
//  curl_setopt( $ch, CURLOPT_HEADER, false );
//  curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
//  
//  echo curl_exec( $ch );
//
//  
//  exit;
//  
//  
//  ************************************************************
//  
//      and put it in the same directory where your page is.
//  
//      send http post request to the php file ( use jQuery ) :
//  
//  
$.ajax({
            url       :'doc_reader.php', 
            type      :'post', 
            dataType  :'xml', 
            data      :{ 
                        fetch_url  :'http://weather.yahooapis.com/forecastrss?w=2442047&u=c', 
                        url_mime   :'application/xml'
                      }, 
            success:function ( doc ) { 
               console.log( doc );
            }
      });

//
//   hope it helps...
//

How to load an external XML from JavaScript?

3 Answers3

Linked