如何整合 CORS、Google Blog 和 JavaScript？

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 blogging 并拥有一个如下所示的帐户 URL：http://my_name.blogspot.com/feeds/posts/default

但我认为我仍然需要调用 CORS，以便网站上的 JavaScript 可以跨域到 Google 站点。我试过直接使用 Google URL 但脚本没有 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 的情况下工作？

我可以为 Google 博客重新配置 get 以与我的 Github 帐户的 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，您会看到包含在函数调用中的提要数据。要利用这一点，只需使用 callback=? 参数执行 $.get：

$.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 Blog 和 JavaScript？

How to integrate CORS, Google Blog and JavaScript?

javascript

jquery

blogs

cors