HTML, Javascript: difference between an ajax call and changing the source of an iframe

Question

Context: I'm trying to code a javascript function to like a certain post on tumblr, based on this link . I tried using an ajax call instead of changing the source of an iframe, but it doesn't work. Of course, changing the source of an iframe works.

So, what can be the difference that make this not work?

$baseUrl = 'http://tumblr.com/like/';

function LikePost( $postID, $reblogUrl )
{
    /*
    http://www.tumblr.com/<command>/<oauthId>?id=<postId>
    <command>: like or unlike
    <oauthId>: last eight characters of {ReblogURL}
    <postId>: {PostID}

     Exemple of Url
     http://www.tumblr.com/like/fGKvAJgQ?id=16664837215

    */
    $oauthId = $reblogUrl.substring( $reblogUrl.length - 8, $reblogUrl.length);
    $likeUrl = $baseUrl + $oauthId + '?id=' + $postID;

    $.ajax({
        url: $likeUrl,
        type:'POST'            
        });

}

Answer 1

AJAX requests are bound by same domain policy, with some exceptions that aren't worth listing since they don't work unless you control both domains.

In this case, you're calling a tumblr domain from your website, which you can't do through AJAX. However, iframes, script elements, and img elements can point to any domain, so if the like url isn't returning any content to you, you can use any of those means to record the like.

If you didn't want to use an iframe, the other method you could use would be to make a request to your server via AJAX, then proxy the request to tumblr. Your server can go to any url it wants.

However, the iframe approach is easiest. I suggest going that route since you already got it working. ;)

Answer 2

They are intended for different purposes. As jmort253 noted above, AJAX calls work only for the same domain, whereas Iframes may span different domains. But if you are interested in loading data from the same domain, AJAX may be a better option. Many times, while using IFrame, you will see a loading sign on the tab-bar of the page, showing that something inside it is loading (it's the IFrame page which is loading, not the entire page), which you don't want the user to see, because that is the point of AJAX, loading data seamlessly, giving the user the illusion that the data is coming almost simultaneously. With AJAX, you won't have these problems.

And even if you want to load data from different domains, while Javascript itself is not upto the task, you can use PHP to do the loading part, then use Javascript to fetch the data from there.