javascript - 使用 Reqwest.js 获取 twitter 和 facebook 分享

Question

我对 ajax 请求使用 Reqwest.js，因为我根本不使用 jQuery https://github.com/ded/reqwest

看起来 Reqwest 支持 jsonp 请求，但我遇到了一些麻烦。

这是我使用 jQuery 获取 facebook 和 twitter 分享的代码:

  // facebook
  $.ajax({
    url: 'http://graph.facebook.com/http://google.com',
    type: 'GET',
    dataType: 'JSONP'
  }).always(function(data) {
    if (data.shares) {
      alert(data.shares);
    }
  });

  // twitter
  $.ajax({
    url: 'http://urls.api.twitter.com/1/urls/count.json?url=http://google.com',
    type: 'GET',
    dataType: 'JSONP'
  }).always(function(data) {
    if (data.count) {
      alert(data.count);
    }
  });

jQuery 代码运行良好，jsonp 按预期运行。

这是我用于 Reqwest.js(ajax 请求的 jQuery 替换)的代码:

// facebook
reqwest({
  url: 'http://graph.facebook.com/http://google.com',
  type: 'JSONP',
  complete: function(data) {
    var response = parse(data.response);

    if (data.response && response.shares) {
      count.facebook = response.shares;
    }

    update('fb');
  }
});

// twitter
reqwest({
  url: 'http://urls.api.twitter.com/1/urls/count.json?url=http://google.com',
  type: 'JSONP',
  complete: function(data) {
    var response = parse(data.response);

    if (data.response && response.count) {
      count.tw = response.count;
    }

    update('tw');
  }
});

此处的 Facebook 代码运行良好，这是一个演示 http://jsbin.com/jaxuniya/1/edit?html,js,console,output

Twitter 代码返回了几个错误，这是一个演示 http://jsbin.com/tadejayi/1/edit?html,js,output

看起来 jsonp 没有按预期工作，我是否以错误的方式使用它？

这是一个错误文本:

Failed to load resource: the server responded with a status of 501 (Not Implemented) http://urls.api.twitter.com/1/urls/count.json?url=http://google.com

Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://jsbin.com' is therefore not allowed access. http://urls.api.twitter.com/1/urls/count.json?url=http://google.com

XMLHttpRequest cannot load http://urls.api.twitter.com/1/urls/count.json?url=http://google.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://jsbin.com' is therefore not allowed access. 1:1

Uncaught SyntaxError: Unexpected end of input 1:1 (JSON.parse)

我该如何解决？

Answer 1

错误检查说的太明显了:

Failed to load resource: the server responded with a status of 501 (Not Implemented) http://urls.api.twitter.com/1/urls/count.json?url=http://google.com

• 服务器似乎无法消化请求方法，我认为这似乎是合理的，因为您确实使用 jQuery 方法 type: 'GET' 指定了请求类型，但使用的是 Reqwest 方法你没有。作为一种变通方法，首先看到库表明您需要添加 method: 'get':

  // Facebook 要求西({ 网址:'http://graph.facebook.com/http://google.com ', 方法:'获取'， 类型:'JSONP'， 完成:函数(数据){ var response = parse(data.response); 如果(数据.response && response.shares){ count.facebook = response.shares; } 更新(' Facebook ')； }});

XMLHttpRequest cannot load http://urls.api.twitter.com/1/urls/count.json?url=http://google.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://jsbin.com' is therefore not allowed access. 1:1

• 您正在尝试实现一个跨域请求，并且该请求曾经使用 jQuery 代码，因为您使用 jsonp 指定了 dataType > 作为值(value)。尝试以下操作:

  // twitter
  reqwest({
    url: 'http://urls.api.twitter.com/1/urls/count.json?url=http://google.com',
    type: 'JSONP',
    jsonpCallback: 'url',
    jsonpCallbackName: 'http://google.com',
    complete: function(data) {
      var response = parse(data.response);
      if (data.response && response.count) {
        count.tw = response.count;
      }
      update('tw');
    }
  });