[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

javascript question on window.XMLHttpRequest

Posted on 2010-04-02
15
Medium Priority
?
762 Views
Last Modified: 2013-11-18
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

0
Comment
Question by:ashley2009
  • 10
  • 5
15 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 29482319
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
 
LVL 3

Author Comment

by:ashley2009
ID: 29520344
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
 
LVL 83

Expert Comment

by:leakim971
ID: 29523177
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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
LVL 83

Expert Comment

by:leakim971
ID: 29524016
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
 
LVL 3

Author Comment

by:ashley2009
ID: 29525176
Well, do you have any idea how to get the attribute from the media:thumbnail element?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 29525602
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
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 29526305
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
 
LVL 3

Author Comment

by:ashley2009
ID: 29526703
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
 
LVL 83

Expert Comment

by:leakim971
ID: 29526971
I don't understand. What I missed in ID:29526305 ?

You can see the pictures in the feed
0
 
LVL 83

Expert Comment

by:leakim971
ID: 29527170
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
 
LVL 3

Author Comment

by:ashley2009
ID: 29528008
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
 
LVL 83

Expert Comment

by:leakim971
ID: 29528411
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
 
LVL 83

Expert Comment

by:leakim971
ID: 29528624
0
 
LVL 3

Author Comment

by:ashley2009
ID: 29529145
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
 
LVL 83

Expert Comment

by:leakim971
ID: 29529342
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

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

ASP.NET AJAX callbacks to web service are becoming very popular and unavoidable these days. The feel that the user gets when only a part of the page is updated without even hindering the UI is the advantage that the callbacks offer. The wait for the…
The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The video provides a quick and easy steps to migrate MBOX file to well known Outlook PST and Office 365. Besides this, it also supports and migrates more than 20 email clients of MBOX which include AppleMail, Opera, Thunderbird and SeaMonkey effortl…
Suggested Courses
Course of the Month11 days, 11 hours left to enroll

640 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question