javascript question on window.XMLHttpRequest

Hello,

I cannot open an url for an rss feed. The situation is like this:

I am trying to display the rss atom feed of http://vodo.net/feeds/public

If I copy the  atom feed content as an xml file in my public computer or in my hosting provider, I can display the rss feeds in my html page by using java script; however, if I try to fetch the atom feeds directly from http://vodo.net/feeds/public by using java script, the feeds don't get displayed, and I believe that the reason is this url
-----> http://vodo.net/feeds/public 
does not end with a file name, and that is why, my java script function cannot load this file ( the following code does not work if I put url as http://vodo.net/feeds/public)

var url="http://vodo.net/feeds/public";
xhttp.open("GET",url,false);

However, if I copy the content of http://vodo.net/feeds/public in an xml file and upload it in my server or in my local machine, then the java script works and the atom feeds get displayed in my html page.

So, Instead of writing,
var url="http://vodo.net/feeds/public";
xhttp.open("GET",url,false);

if I write

var url="http:www.mysite.com/atom.xml";
xhttp.open("GET",url,false);

I can display content as java script works.

But I need to load the remote xml file with address http://vodo.net/feeds/public

Please tell me how can I load the content of http://vodo.net/feeds/public to display its content by using java script.

Thank you.


function process(){
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest()
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
  var url="http://vodo.net/feeds/public";
xhttp.open("GET",url,false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("entry");
document.write("There is " + x.length+ " item<br/>......................................................................................................<br/>");
for (i=0;i<=x.length;i++)
  { 
  	document.write(i+" <b>Title: " + xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue+"</b><br/>");
  	document.write("Published: " + xmlDoc.getElementsByTagName("published")[i].childNodes[0].nodeValue+"<br/><br/>");
  	document.write("<img src='"+xmlDoc.getElementsByTagName("media:thumbnail")[i].attributes[0].value +"' width='100' height='100'/><br/>");
  	document.write("Content: " + xmlDoc.getElementsByTagName("content")[i].childNodes[0].nodeValue+"<br/>");
  	document.write("Image Url: " + xmlDoc.getElementsByTagName("media:thumbnail")[i].attributes[0].value+"<br/>");    
  	document.write(".................................................................................................................................<br/>");
  }
}




...................................................
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple document</title>
<script type="text/javascript" src="processAtom.js"></script>

</head>
<body onload="process()">





</body>
</html>

Open in new window

LVL 3
ashley2009Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Hello ashley2009,

You can't use ajax to directly retrieve datas from another domain as the script run.
So your script (page) run on www.yourdomain.com and you do a request (XMLHttpRequest) to vodo.net

You need to use a proxy (php, java, jsp, asp or what you want) to get the page for you on the server side so your script use this proxy to get the url.

Regards.

Example with php :

( so you save this page on your site, example : proxyvodo.php and use : xhttp.open("GET","proxyvodo.php",false); )
<?php
   echo file_get_contents("http://vodo.net/feeds/public");
?>

Open in new window

0
ashley2009Author Commented:
Hello leakin971,

thank you a lot for your response, but I cannot use any server side coding and scripting. However, I have solved this problem that is to load atom feed from an external side by using only client side scripting.

I made a yahoo pipe that pulls up the atoms as json format; however, I can fetch and display all the elements in my html page except for the <media:thumb> element's attribute.

Would anyone tell me how to fetch the media:thumb element's attribute from a json feed?

I am pasting the html page's code with javascript. If you save the html page and then view it in browser, you will see that all the necessary elements get output at html page except for the media:thumb as I cannot display the attribute of media:thumb when the feed is formatted as json.

I am also pasting the json feed so that you can have an idea what i am talking about.

Please tell me how to retrieve attribute from media:thumb element of a json feed by using plain javascript but no server side code or javascript library.

Thank you.











<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
      <script type="text/javascript">
      function getFeed(feed){
      	var newScript = document.createElement('script');
      	newScript.type = 'text/javascript';
      newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=40616620df99780bceb3fe923cecd216&_render=json&_callback=piper';
 		document.getElementsByTagName("head")[0].appendChild(newScript);
      }
      function piper(feed){
 		var tmp='';
            for (var i=0; i<feed.value.items.length; i++) {
               tmp+='<a href="'+feed.value.items[i].link+'">';
               tmp+=feed.value.items[i].title+'</a><br>';
               tmp+=feed.value.items[i].author.name+'<br>';
               tmp+=feed.value.items[i].published+'<br><br>';
               if (feed.value.items[i].description) {
                  tmp+=feed.value.items[i].description+'<br>';
                  
               }
               tmp+='<hr>';
            }   
            document.getElementById('rssLayer').innerHTML=tmp; 
      }       
         
      </script>
   </head>
   <body onload="getFeed('http://del.icio.us/rss/popular/javascript')">
       <div id='rssLayer'>bchnbc</div>
   </body>
</html>   


..............................................................
Some portion of the json feed that gets generated by yahoo pipe
..............................................................
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
piper({&quot;count&quot;:2,&quot;value&quot;:{&quot;title&quot;:&quot;myPipe&quot;,&quot;description&quot;:&quot;Pipes Output&quot;,&quot;link&quot;:&quot;http:\/\/pipes.yahoo.com\/pipes\/pipe.info?_id=f7f4175d493cf1171aecbd3268fea5ee&quot;,&quot;pubDate&quot;:&quot;Fri, 02 Apr 2010 17:59:22 -0700&quot;,&quot;generator&quot;:&quot;http:\/\/pipes.yahoo.com\/pipes\/&quot;,&quot;callback&quot;:&quot;piper&quot;,


&quot;items&quot;:

[{

&quot;rights&quot;:&quot;Attribution - Noncommercial - No Derivative Works&quot;,
&quot;link&quot;:&quot;http:\/\/vodo.net\/mixtape1&quot;,
&quot;y:id&quot;:{&quot;value&quot;:null,&quot;permalink&quot;:&quot;true&quot;},
&quot;content&quot;:{&quot;content&quot;:&quot;We're proud to be releasing this first VODO MIXTAPE. Actual tape might be a thing of the past, but before P2P, mixtapes were the most popular way of sharing popular culture the world had known -- and once called the 'most widely practiced American art form'. We want to resuscitate the spirit of the mixtape for this VODO MIXTAPE series: compilations of our favourite shorts, the weird, the wild and the wonky, all brought together in a temporary and uncomfortable company.&quot;,&quot;type&quot;:&quot;text&quot;},

&quot;author&quot;:
{&quot;name&quot;:&quot;Various&quot;},
&quot;description&quot;:&quot;We're proud to be releasing this first VODO MIXTAPE. Actual tape might be a thing of the past, but before P2P, mixtapes were the 
most popular way of sharing popular culture the world had known -- and once called the 'most widely practiced American art form'. We want to resuscitate the spirit
of the mixtape for this VODO MIXTAPE series: compilations of our favourite shorts, the weird, the wild and the wonky, all brought together in a temporary and 
uncomfortable company.&quot;,
&quot;media:thumbnail&quot;:
{
	&quot;url&quot;:&quot;http:\/\/vodo.net\/\/thumbnails\/Mixtape1.jpg&quot;
},
&quot;published&quot;:&quot;2010-03-08-09:20:20 PM&quot;,
&quot;format&quot;:
{
	&quot;audio_bitrate&quot;:null,
	&quot;width&quot;:&quot;608&quot;,
	&quot;xmlns&quot;:&quot;http:\/\/xmlns.transmission.cc\/FileFormat&quot;,
	&quot;channels&quot;:&quot;2&quot;,
	&quot;samplerate&quot;:&quot;44100.0&quot;,
	&quot;duration&quot;:&quot;3092.36&quot;,
	&quot;height&quot;:&quot;352&quot;,
	&quot;size&quot;:&quot;733925376.0&quot;,
	&quot;framerate&quot;:&quot;25.0&quot;,
	&quot;audio_codec&quot;:&quot;mp3&quot;,
	&quot;video_bitrate&quot;:&quot;1898.0&quot;,
	&quot;video_codec&quot;:&quot;XVID&quot;,
	&quot;pixel_aspect_ratio&quot;:&quot;16:9&quot;
},
&quot;y:title&quot;:&quot;Mixtape #1: VODO's favourite short films&quot;,
&quot;title&quot;:&quot;Mixtape #1: VODO's favourite short films&quot;,
&quot;id&quot;:null,
&quot;pubDate&quot;:&quot;2010-03-08-09:20:20 PM&quot;,
&quot;y:published&quot;:{&quot;hour&quot;:&quot;3&quot;,&quot;timezone&quot;:&quot;UTC&quot;,&quot;second&quot;:&quot;0&quot;,&quot;month&quot;:&quot;4&quot;,&quot;minute&quot;:&quot;10&quot;,&quot;utime&quot;:&quot;1270264200&quot;,&quot;day&quot;:&quot;3&quot;,&quot;day_of_week&quot;:&quot;6&quot;,&quot;year&quot;:&quot;2010&quot;
}},


{&quot;rights&quot;:&quot;Attribution - Noncommercial - No Derivative Works&quot;,&quot;link&quot;:&quot;http:\/\/vodo.net\/gilbert&quot;,&quot;y:id&quot;:{&quot;value&quot;:&quot;cd6584e06ea4ce7fcd34172f4bbd919e295f8680&quot;,&quot;permalink&quot;:&quot;true&quot;},&quot;content&quot;:{&quot;content&quot;:&quot;A documentary short about Gilbert, the Beacon Hill \&quot;town crier.\&quot; For the last 9 years, since losing his job and becoming homeless, Gilbert has delivered the weather, sports, and breaking headlines from his spot on the Boston Common. Music (used with permission) in this piece is called \&quot;Blue Bicycle\&quot; by Dusseldorf-based pianist \/ composer Volker Bertelmann also known as Hauschka. Artistic Statement: This is the first in a series of profiles of people who I think are interesting, and who I see on almost a daily basis. I don't want to limit the series to people who live \&quot;on the fringe,\&quot; but it would be appropriate to say that most of the people I interview are eclectic, eccentric, and just a little bit unique. The art is in the viewing - but I hope to turn my lens on individuals that don't always color in the lines, whether they can help it or not.&quot;,&quot;type&quot;:&quot;text&quot;},&quot;author&quot;:{&quot;name&quot;:&quot;Nathaniel Hansen&quot;},&quot;description&quot;:&quot;A documentary short about Gilbert, the Beacon Hill \&quot;town crier.\&quot; For the last 9 years, since losing his job and becoming homeless, Gilbert has delivered the weather, sports, and breaking headlines from his spot on the Boston Common. Music (used with permission) in this piece is called \&quot;Blue Bicycle\&quot; by Dusseldorf-based pianist \/ composer Volker Bertelmann also known as Hauschka. Artistic Statement: This is the first in a series of profiles of people who I think are interesting, and who I see on almost a daily basis. I don't want to limit the series to people who live \&quot;on the fringe,\&quot; but it would be appropriate to say that most of the people I interview are eclectic, eccentric, and just a little bit unique. The art is in the viewing - but I hope to turn my lens on individuals that don't always color in the lines, whether they can help it or not.&quot;,&quot;media:thumbnail&quot;:{&quot;url&quot;:&quot;http:\/\/vodo.net\/\/thumbnails\/gilbert.jpeg&quot;},&quot;published&quot;:&quot;2010-03-03-10:37:05 AM&quot;,&quot;format&quot;:{&quot;audio_bitrate&quot;:null,&quot;width&quot;:&quot;624&quot;,&quot;xmlns&quot;:&quot;http:\/\/xmlns.transmission.cc\/FileFormat&quot;,&quot;channels&quot;:&quot;2&quot;,&quot;samplerate&quot;:null,&quot;duration&quot;:&quot;373.673&quot;,&quot;height&quot;:&quot;352&quot;,&quot;size&quot;:&quot;123321266.0&quot;,&quot;framerate&quot;:null,&quot;audio_codec&quot;:&quot;mp3&quot;,&quot;video_bitrate&quot;:null,&quot;video_codec&quot;:&quot;XVID&quot;,&quot;pixel_aspect_ratio&quot;:&quot;16:9&quot;},&quot;y:title&quot;:&quot;Gilbert&quot;,&quot;title&quot;:&quot;Gilbert&quot;,&quot;id&quot;:&quot;cd6584e06ea4ce7fcd34172f4bbd919e295f8680&quot;,&quot;pubDate&quot;:&quot;2010-03-03-10:37:05 AM&quot;,&quot;y:published&quot;:{&quot;hour&quot;:&quot;3&quot;,&quot;timezone&quot;:&quot;UTC&quot;,&quot;second&quot;:&quot;0&quot;,&quot;month&quot;:&quot;4&quot;,&quot;minute&quot;:&quot;10&quot;,&quot;utime&quot;:&quot;1270264200&quot;,&quot;day&quot;:&quot;3&quot;,&quot;day_of_week&quot;:&quot;6&quot;,&quot;year&quot;:&quot;2010&quot;
}}

]
}})

Open in new window

jsonImageElementAttr.jpg
0
leakim971PluritechnicianCommented:
Strange work fine for me :

but seems you "just" have a "quote" problem, you can try :

(if you can post the "json" string with the &quot; in code snippet, I will try to play with it to give you a correct/best solution)
// replace &quot; by double quotes
var s = str.replace(/&quot;/g,'"');
// eval the json string to have a json object
var json = eval(s);
// for each json elements
for(j in json) {
// play with each json element (hash table)
}

Open in new window

feed.jpg
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

leakim971PluritechnicianCommented:
OK, I get the json string you already put in code snippet. there's no simple way to distinguish double quotes of the json element and double quotes in text.
So the following will not work : var s = str.replace(/&quot;/g,'"');

Again no problem on my side to display the feed clearly (no &quot;) with your code on Firefox
0
ashley2009Author Commented:
Well, do you have any idea how to get the attribute from the media:thumbnail element?
0
leakim971PluritechnicianCommented:
Like this : feed.value.items[i]['media:thumbnail']

I see only one : url
so : feed.value.items[i]['media:thumbnail'].url

or to get all (if more than one and not only url) in a loop :

for(attr in feed.value.items[i]['media:thumbnail']) {
   alert(attr + " : " + feed.value.items[i]['media:thumbnail'][attr])
}
0
leakim971PluritechnicianCommented:
work fine for me on FF, Chrome and IE and Opera :


media_thumbnail = feed.value.items[i]['media:thumbnail'];
			tmp += '<img src="' + media_thumbnail.url + '" width="96" /><br>';
			tmp += '<hr>';
		}
		document.getElementById('rssLayer').innerHTML=tmp;

Open in new window

feed2.jpg
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ashley2009Author Commented:
Hi,

it will not work as media:thumbnail is a child element of items.

The best way to go is:

tmp+=feed.value.items[i].media:thumbnail.url;

which is not working; therefore, I guess I am wrong.

Will anyone please tell how to extract attribute from an element from a json feed?
0
leakim971PluritechnicianCommented:
I don't understand. What I missed in ID:29526305 ?

You can see the pictures in the feed
0
leakim971PluritechnicianCommented:
It's your code in the code snippet with feed.value.items[i]['media:thumbnail'];
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
	function getFeed(feed){
		var newScript = document.createElement('script');
		newScript.type = 'text/javascript';
		newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=40616620df99780bceb3fe923cecd216&_render=json&_callback=piper';
		document.getElementsByTagName("head")[0].appendChild(newScript);
	}
	function piper(feed) {
		var tmp = '';
		for (var i=0; i<feed.value.items.length; i++) {
			tmp += '<a href="'+feed.value.items[i].link+'">';
			tmp += feed.value.items[i].title+'</a><br>';
			tmp += feed.value.items[i].author.name+'<br>';
			tmp += feed.value.items[i].published+'<br><br>';
			if(feed.value.items[i].description) {
				tmp+=feed.value.items[i].description+'<br>';	
			}
			media_thumbnail = feed.value.items[i]['media:thumbnail'];
			tmp += '<img src="' + media_thumbnail.url + '" width="96" /><br>';
			tmp += '<hr>';
		}
		document.getElementById('rssLayer').innerHTML=tmp; 
	}       
</script>
</head>
<body onload="getFeed('http://del.icio.us/rss/popular/javascript')">
	<div id='rssLayer'>bchnbc</div>
</body>
</html>

Open in new window

0
ashley2009Author Commented:
Hi leakim971,

you are right. Thank you; however, I am still not sure why
items[i] ['media:thumbnail']; is working. I thought that there should be a dot like items[i].['media:thumbnail'];

However, thank you a lot as the media:thumbnail elements' images can be retrieved. I have last request. Please let me know from where did you find this information: please give me the web side address as nowadays I am learning json and ajax.
0
leakim971PluritechnicianCommented:
THE link for json : http://www.json.org
For javascript : http://www.json.org/js.html

Yes I understand what you mean :
items[i].['media:thumbnail']
and not items[i].media.thumbnail
 or why not items[i].['media'].thumbnail

but 'media:thumbnail' is really the attribute and not a key:value pair

You see in the json string (your picture here : http://filedb.experts-exchange.com/incoming/2010/04_w14/283701/jsonImageElementAttr.jpg) : &quot;media:thumbnail&quot; and not &quot;media&quot;:&quot;thumbnail&quot;

Another good link to test json string : http://www.jsonlint.com/

This is the only ressources of information I use.
0
leakim971PluritechnicianCommented:
0
ashley2009Author Commented:
Thank you a lot. However, they do not cover jason feed nor how to extract attribute from an element of json feed; I know as from yesterday,  I covered www.w3school's xml and Dom,  and http://msdn.microsoft.com/en-us/library/bb299886.aspx#intro_to_json_topic4. These two websites are not covering json feed in detail at all.  I am not sure how did you solve this. You are smart.

Thank you a lot again.
0
leakim971PluritechnicianCommented:
You're welcome!Thanks a lot for the points!

json is json... feed or not :)) you did most parts of the code : YOU're smart! Have a nice week-end!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Components

From novice to tech pro — start learning today.