Multiple AJAX Requests Freezing Browser

Question

On page load, I'm making two AJAX requests: one to pull the newest video from a Youtube channel, and one to pull the newest post from a blog. Both scripts work correctly.

For whatever reason, I haven't been able to test it in any browser (Chrome, Firefox, Safari, and Opera). Is the request too big? I've been running into issues with CORS support (at least that's what I think is going on) while using Chrome, so the blog request isn't working there and completely offsets the video request (it doesn't work).

Here's the error I get in the Javascript Dev Console in Chrome:

XMLHttpRequest cannot load http://devingraham.blogspot.com/rss.xml. Origin null is not allowed by Access-Control-Allow-Origin.

If I change...

var tmp = $(this).find("content:first").text();

...to just find the "title:first" instead, it renders fine in Safari without freezing. If I keep it at content and load the page, I can see the post loads in just fine, but the page freezes and won't load the video. So perhaps it's just too much? I know for a fact that the post I'm pulling is quite long, but it seems silly that it would cause any issues. So do you have any ideas?

Here's the script:

<script type="text/javascript" charset="utf-8">

    $(function() {
          $.ajax({
            type: "GET",
            url: "http://gdata.youtube.com/feeds/base/users/devinsupertramp/uploads?orderby=updated&alt=rss&client=ytapi-youtube-rss-redirect&v=2",
            dataType: "xml",
            success: parseVideo
          });
          $.ajax({
            type: "GET",
            url: "http://devingraham.blogspot.com/rss.xml",
            dataType: "xml",
            success: parseBlog
          });
    });

    function parseVideo(xml) {
        $(xml).find("item:first").each(
            function() {
                var tmp = $(this).find("link:first").text();
                tmp = tmp.replace("http://www.youtube.com/watch?v=", "");
                tmp = tmp.replace("&feature=youtube_gdata", "");
                tmp2 = "http://www.youtube.com/embed/" + tmp + "?autoplay=1&controls=0&rel=0&showinfo=0&autohide=1";
                var iframe = $("#ytplayer");
                $(iframe).attr('src', tmp2);
            }
        );
    }

    function parseBlog(xml) {
        $(xml).find("entry:first").each(
            function() {
                var tmp = $(this).find("content:first").text();
                var post = $("#blog");
                post.append(tmp);
            }
        );
    }
</script>

Open Firebug, open the NET tab and take a look at the request/response sequence. This may give you a clue. — Diodeus - James MacFarlane, May 22 '12 at 15:17
All I can see is that Origin is null. But I'm not sure what this means. — Jon, May 22 '12 at 15:35
Are you aware of the same origin policy regarding AJAX requests? http://www.w3.org/Security/wiki/Same_Origin_Policy — Diodeus - James MacFarlane, May 22 '12 at 15:37
I have read a little bit about it, but I don't know what it means in regards to my requests or how I can fix it (I'm very new to AJAX/jQuery). — Jon, May 22 '12 at 15:47

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

By default, you cannot make cross-domain AJAX requests because of the Same Origin Policy.

You can get around this, but it requires the cooperation of the site on the other domain to explicitly allow this type of request.

See: Ways to circumvent the same-origin policy

edited May 23 '17 at 11:49

Community

1
1

answered May 22 '12 at 15:53

Diodeus - James MacFarlane

112,730
33
157
176

I'll look into these. I guess I didn't realize how convoluted it was regarding request origins. – Jon May 22 '12 at 15:57

Multiple AJAX Requests Freezing Browser

1 Answers1