HTML、Javascript：ajax 调用和更改 iframe 源之间的区别

Question

上下文：我正在尝试编写一个 JavaScript 函数来喜欢 tumblr 上的某个帖子，基于此 link 。我尝试使用 ajax 调用而不是更改 iframe 的源，但它不起作用。当然，更改 iframe 的来源是可行的。

那么，有什么区别导致这不起作用？

$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

它们用于不同的目的。正如上面提到的 jmort253，AJAX 调用仅适用于同一个域，而 Iframe 可能跨越不同的域。但如果您有兴趣从同一个域加载数据，AJAX 可能是更好的选择。很多时候，在使用 IFrame 时，您会在页面的选项卡栏上看到一个正在加载的标志，显示其中的某些内容正在加载（正在加载的是 IFrame 页面，而不是整个页面），这是您不想要的用户看到，因为这是AJAX 的点，无缝加载数据，给用户一种数据几乎同时到来的错觉。使用AJAX，您将不会遇到这些问题。

即使你想从不同的域加载数据，而 Javascript 本身并不能胜任这项任务，你可以使用 PHP 来完成加载部分，然后使用 Javascript 从那里获取数据。

Answer 2

AJAX 请求受相同的域策略约束，但有些例外情况不值得列出，因为除非您同时控制两个域，否则它们将不起作用。

在这种情况下，您是从您的网站调用 tumblr 域，而您无法通过 AJAX 进行此操作。但是，iframe、script 元素和 img 元素可以指向任何域，因此如果 like url 没有向您返回任何内容，您可以使用其中任何一种方式来记录 like。

如果您不想使用 iframe，您可以使用的另一种方法是通过 AJAX 向您的服务器发出请求，然后将该请求代理到 tumblr。您的服务器可以访问它想要的任何 url。

但是，iframe 方法是最简单的。我建议走那条路，因为你已经开始工作了。 ;)