ashley2009
asked on
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.
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>
ASKER
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.
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({"count":2,"value":{"title":"myPipe","description":"Pipes Output","link":"http:\/\/pipes.yahoo.com\/pipes\/pipe.info?_id=f7f4175d493cf1171aecbd3268fea5ee","pubDate":"Fri, 02 Apr 2010 17:59:22 -0700","generator":"http:\/\/pipes.yahoo.com\/pipes\/","callback":"piper",
"items":
[{
"rights":"Attribution - Noncommercial - No Derivative Works",
"link":"http:\/\/vodo.net\/mixtape1",
"y:id":{"value":null,"permalink":"true"},
"content":{"content":"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.","type":"text"},
"author":
{"name":"Various"},
"description":"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.",
"media:thumbnail":
{
"url":"http:\/\/vodo.net\/\/thumbnails\/Mixtape1.jpg"
},
"published":"2010-03-08-09:20:20 PM",
"format":
{
"audio_bitrate":null,
"width":"608",
"xmlns":"http:\/\/xmlns.transmission.cc\/FileFormat",
"channels":"2",
"samplerate":"44100.0",
"duration":"3092.36",
"height":"352",
"size":"733925376.0",
"framerate":"25.0",
"audio_codec":"mp3",
"video_bitrate":"1898.0",
"video_codec":"XVID",
"pixel_aspect_ratio":"16:9"
},
"y:title":"Mixtape #1: VODO's favourite short films",
"title":"Mixtape #1: VODO's favourite short films",
"id":null,
"pubDate":"2010-03-08-09:20:20 PM",
"y:published":{"hour":"3","timezone":"UTC","second":"0","month":"4","minute":"10","utime":"1270264200","day":"3","day_of_week":"6","year":"2010"
}},
{"rights":"Attribution - Noncommercial - No Derivative Works","link":"http:\/\/vodo.net\/gilbert","y:id":{"value":"cd6584e06ea4ce7fcd34172f4bbd919e295f8680","permalink":"true"},"content":{"content":"A documentary short about Gilbert, the Beacon Hill \"town crier.\" 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 \"Blue Bicycle\" 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 \"on the fringe,\" 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.","type":"text"},"author":{"name":"Nathaniel Hansen"},"description":"A documentary short about Gilbert, the Beacon Hill \"town crier.\" 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 \"Blue Bicycle\" 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 \"on the fringe,\" 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.","media:thumbnail":{"url":"http:\/\/vodo.net\/\/thumbnails\/gilbert.jpeg"},"published":"2010-03-03-10:37:05 AM","format":{"audio_bitrate":null,"width":"624","xmlns":"http:\/\/xmlns.transmission.cc\/FileFormat","channels":"2","samplerate":null,"duration":"373.673","height":"352","size":"123321266.0","framerate":null,"audio_codec":"mp3","video_bitrate":null,"video_codec":"XVID","pixel_aspect_ratio":"16:9"},"y:title":"Gilbert","title":"Gilbert","id":"cd6584e06ea4ce7fcd34172f4bbd919e295f8680","pubDate":"2010-03-03-10:37:05 AM","y:published":{"hour":"3","timezone":"UTC","second":"0","month":"4","minute":"10","utime":"1270264200","day":"3","day_of_week":"6","year":"2010"
}}
]
}})
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 " in code snippet, I will try to play with it to give you a correct/best solution)
but seems you "just" have a "quote" problem, you can try :
(if you can post the "json" string with the " in code snippet, I will try to play with it to give you a correct/best solution)
// replace " by double quotes
var s = str.replace(/"/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)
}
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(/"/g,'"')
Again no problem on my side to display the feed clearly (no ") with your code on Firefox
So the following will not work : var s = str.replace(/"/g,'"')
Again no problem on my side to display the feed clearly (no ") with your code on Firefox
ASKER
Well, do you have any idea how to get the attribute from the media:thumbnail element?
Like this : feed.value.items[i]['media
I see only one : url
so : feed.value.items[i]['media
or to get all (if more than one and not only url) in a loop :
for(attr in feed.value.items[i]['media
alert(attr + " : " + feed.value.items[i]['media
}
I see only one : url
so : feed.value.items[i]['media
or to get all (if more than one and not only url) in a loop :
for(attr in feed.value.items[i]['media
alert(attr + " : " + feed.value.items[i]['media
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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].m
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?
it will not work as media:thumbnail is a child element of items.
The best way to go is:
tmp+=feed.value.items[i].m
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?
I don't understand. What I missed in ID:29526305 ?
You can see the pictures in the feed
You can see the pictures in the feed
It's your code in the code snippet with feed.value.items[i]['media
<!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>
ASKER
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.
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.
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'].thumbna
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) : "media:thumbnail"
Another good link to test json string : http://www.jsonlint.com/
This is the only ressources of information I use.
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'].thumbna
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) : "media:thumbnail"
Another good link to test json string : http://www.jsonlint.com/
This is the only ressources of information I use.
ASKER
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.
Thank you a lot again.
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!
json is json... feed or not :)) you did most parts of the code : YOU're smart! Have a nice week-end!
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","proxyvod
Open in new window