Question

我在一个网页上有一个有效的JavaScript，get我的博客来自博客网站，并将其显示在我的网页的侧边栏中。换句话说，我在一个地方写博客，但也在另一个地方（我的网页）显示我的博客内容。

该脚本使用跨源共享（CORS），如下所示：

$(
  function () {
    $.get(
     'http://www.corsproxy.com/my_name.soup.io/rss/original',
     function (data) {
      var items = data.getElementsByTagName('item');
      var thoughts = $('#activity ul');
      var count = 0;
      $(items).each(function (i, e) {
        count++;
        if (count > 10) return;
        thoughts.append('<li>'
          + e.getElementsByTagName('description')[0].textContent
          + '<small>' 
          + $.timeago( new Date(e.getElementsByTagName('pubDate')[0].textContent) )
          + '</small></li>');
     });
    }, 'xml'
   );
  }
);

我想将我的博客移至Google博客，并拥有如下所示的帐户网址：http://my_name.blogspot.com/feeds/posts/default

但我认为我仍然需要调用CORS，以便网站上的JavaScript可以跨域到Google网站。我已尝试直接使用Google网址，但脚本不会get内容。

我应该如何更改JavaScript，以便运行JavaScript的网页会显示来自Google博客的内容？

顺便说一下：使用相同的JavaScript，我可以在我的网页上的Github帐户中显示内容（提交的标题）。在这种情况下，我不使用CORS;以下JavaScript按预期工作：

$.getScript(
  '/public/bin/jquery.timeago.js',
  function () {
    $.getScript(
      '/public/bin/jquery.github-activity.js',
      function () {
        $("#gh-activity ul").githubActivityFor("my_name", { limit: 10 });
      }
    );
  }
);

为什么Github get在不使用CORS的情况下工作？

我是否可以为我的Github帐户重新配置Google博客的get以与get相同的方式进行操作？

Answer 1

检查code for the githubActivityFor call，我们看到：

$.get('https://api.github.com/users/' + username + '/events?callback=?', function(activity) {
    ...
},
"jsonp");

"jsonp"参数告诉jQuery这里使用的是JSONP，资源应该加载到<script>标记内，而不是用Ajax获取。果然，我们实际上看一个user's activity feed from that URL template，它是一个脚本。因此，jQuery可以通常的方式执行JSONP脚本加载：

将回调函数（即第二个参数）存储在变量中，该变量具有随机的长名称，如jQuery35758395
使用相同的值替换?中的callback=?（例如jQuery35758395）
在<script>标记

Github资源（与任何传统的JSONP服务器端端点一样）设置为在脚本开头的函数调用中使用callback参数的值（例如，jQuery35758395（{'some'： 'data'}）。当脚本运行时，执行函数调用，它会触发我们在获取之前设置的随机命名的回调。

结果Blogger已经在他们的服务器上支持JSONP。如果您访问http://foobar.blogspot.com/feeds/posts/default?callback=foobaz，您会看到包含在函数调用中的Feed数据。要利用此功能，只需使用$.get参数执行callback=?：

$.get(
     'http://my_name.blogspot.com/feeds/posts/default?callback=?',
     function (data) {
         ...
     },
     "jsonp");

这将在幕后自动执行JSONP并使用XML字符串正确调用您的回调函数。不幸的是，字符串不会被解析为DOM结构，但jQuery函数（a.k.a。，$）可以为您解析data字符串：

var feedDOM = $(data).get(1);

get调用将DOM结构从jQuery对象中拉出来，但您也可以将它保存在jQuery对象中并使用jQuery函数来检查它。或者，您可以提供XML字符串作为jQuery选择器的上下文参数：

var authorTags = $("author", data);

如何整合CORS，Google博客和JavaScript？

1 个答案: