Javascript - Flickr retriever cross domain issue

Hello everyone!

I’m new to this forum so forgive me If I make mistakes

I have a little problem with the code below. I was given it with the instruction to change only the “getFeed” method.
The purpose is to retrieve the FLICKR json and show pictures on the screen. As simple as that.
I have added the code in the “getFeed” method but I’m getting the typical Cross Domain error and I don’t know how to fix it despite I’ve looked for solutions.

Anyone can help maybe? Would be great.
Many thanks!

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <ul id="data">

    </ul>

    <script>

        var MyFeed = function() {
            
        }

        var f = new MyFeed();

        MyFeed.prototype.setFeedUrl = function(url)
        {
            this.feedUrl = url;
            return this;
        }

        MyFeed.prototype.getFeed = function(data)
        {
            // placeholder is here...
            // you are only allowed to do modify the body of this method
            // it's not allowed to modify any other part of this template
 
            var xhr = new XMLHttpRequest();
            xhr.open('GET', encodeURI(f.setFeedUrl));
            xhr.onload = function() {
                if (xhr.status === 200) {
                    alert('User\'s name is ' + xhr.responseText);
                   
                }
                else {
                    alert('Request failed.  Returned status of ' + xhr.status);
                  
                }
            };
            xhr.send();
        }
        
        f.setFeedUrl("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback={callback}&tags=london&tagmode=any&format=json").getFeed();

    </script>

</body>
</html>

Hi gsca, welcome to the forums!

As this sounds like either homework or a skill assessment of some sort, it seems unsporting to just give you the answer :wink: I would suggest though that you could try searching for how to make JSONP requests with vanilla JS.

Hello!

Thank you!

Yeah it’s homework.
I’ve found a solution just now. Do you mind having a quick look and check if it’s correct? That would be great.

Here is the fiddle → http://jsfiddle.net/beppe0/dw2wtksf/2/

Thanks

No problem :smile:

I don’t know how much you’re allowed to change, as the comments mention only changing the body of the getFeed method, but normally you wouldn’t hard-code the callback function in there. Instead, you’d pass it into the method as an argument. The MyFeed object shouldn’t know or care what happens to the data once it’s retrieved, it just passes it on for processing elsewhere.

There’s a good example here that shows this, and adds some code to allow you to make multiple JSONP requests without the callback functions overwriting each other. It also cleans up the global functions afterwards.

Thanks for the explanation :wink:

Yeah I cannot change or add anything outside the “getFeed” method. So I’m not able to do much else I presume. Or maybe it’s just me who cannot do more than this :slight_smile:

That example is great although, as I said, I cannot do much in my code to make it better due to those constraints.

Any additional suggestion?

Thanks again!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.