Как получить кол-во «расшариваний» (view count) для текущего URL из StumbleUpon (используя jQuery.getJSON)?

Question

[Платон Фёдорович]

Приветствую!

Ищу решение данного вопроса уже довольно давно. Суть такая: нужно через jQuery.getJSON получить кол-во «расшариваний» из сервиса StumbleUpon в свой скрипт (кастомные шейр-кнопки).

Да, у сервиса есть шикарная документация на эту тему, но (по непонятным причинам) не сработывает то, что там написано. Нет, ну работает, конечно же, через адресную строку браузера.. но через jQuery.getJSON никак не получить значение — вылетает ошибка в консоли хрома.

Грубо говоря, если в браузере ввести пример из их API:

http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://www.treehugger.com/

то выдаётся отличный валидный JSON:

{
    "result": {
        "url": "http://www.treehugger.com/",
        "in_index": true,
        "publicid": "1tin26",
        "views": 123623,
        "title": "TreeHugger",
        "thumbnail": "http://cdn.stumble-upon.com/mthumb/428/925428.jpg",
        "thumbnail_b": "http://cdn.stumble-upon.com/bthumb/428/925428.jpg",
        "submit_link": "http://www.stumbleupon.com/badge/?url=http://www.treehugger.com/",
        "badge_link": "http://www.stumbleupon.com/badge/?url=http://www.treehugger.com/",
        "info_link": "http://www.stumbleupon.com/url/www.treehugger.com/"
    },
    "timestamp": 1443261036,
    "success": true
}

Но если попробовать обратиться через jQuery.getJSON из скрипта, то всё время будет вот такая ошибка:

badge.getinfo?url=http%3A%2F%2Fwww.treehugger.com%2F&callback=jQuery111203496418842114508_14…:1
Uncaught SyntaxError: Unexpected token :

При этом, мой скрипт вызова такой:

...
$.getJSON('http://www.stumbleupon.com/services/1.01/badge.getinfo?url=' + encodeURIComponent('http://www.treehugger.com/') + '&callback=?', function(response) {
  console.log(response);
});
...

Да, есть решения с помощью различных сторонних сервисов, типа YQL или Any Origin (и его open source альтернатива — Whatever Origin), через которые всё работает.. но это лишний запрос и время ожидания.

Также у YQL ограничение по запросам в сутки (в час), а Any Origin вообще платный и может забанить «без суда и следствия» при бесплатном использовании (который там разрешён для ознакомления). А вот с Whatever Origin почти всё получилось, но постоянно в реквесте приходит 404-я ошибка сервиса StumbleUpon вместо красивого JSON (который выше).. так что, тоже мимо.

Всё же главный вопрос: почему не работает на прямую через jQuery.getJSON?!
Подскажите чего делаю не так (может есть кейс решения?).. а то уже все ссылки по этой теме в гугле «посещённого цвета» :)

Answer 1

[Денис Инешин]

Потому что кроссдоменный запрос. Не все так просто из-за политики безопасности. Читайте про CORS и JsonP

Comments

[Платон Фёдорович]

Я более чем в курсе. Поэтому стоит параметр &callback=? в конце URL. Да и если бы запрос по CORS не проходил, то была бы вот эта ошибка:

XMLHttpRequest cannot load ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ... is therefore not allowed access.

. Так что тут не в этом проблема...

[Денис Инешин]

Платон Фёдорович: А понял. Вам нужно сначала сформировать URL, а уж потом сделать всему ему encodeURIcomponent. У вас часть урла вроде бы не валидна.

[Платон Фёдорович]

Денис Инешин: Пробую сделать вот так

var url = encodeURIComponent('http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://www.treehugger.com/');

И уже в вызове

$.getJSON(url + '&callback=?', function(response) {...}

Но теперь ошибка вот такая вылезает:

GET http://mysite.ru/testing/http%3A%2F%2Fwww.stumbleupon.com%2Fservices%….com%2F&callback=jQuery111205632902432698756_1443276642670?_=1443276642671
404 (Not Found)

[Денис Инешин]

Платон Фёдорович: к урлу присмотритесь, октуда у вас вылезло: mysite.ru/testing

[Платон Фёдорович]

Денис Инешин: Адрес сайта моего (в качестве примера, на самом деле там другой домен).

Вот пример на jsfiddle https://jsfiddle.net/cmz7mva9/1/ где такая же ошибка, но с их доменом вначале.

[Денис Инешин]

Платон Фёдорович: encodeURIComponent замените на encodeURI и у вас там svar)

[Платон Фёдорович]

Эмм.. не помогло https://jsfiddle.net/cmz7mva9/6/ такая же ошибка, как и в моём самом первом посте
Uncaught SyntaxError: Unexpected token :

[Платон Фёдорович]

Денис Инешин: Такое ощущение, что jQuery.getJSON то свою работу делает, так как если в консоле Хрома нажать на ошибку эту, то он показывает тот самый JSON ответ (как в самом первом моём посте), то есть ответ приходит.. но вот почему-то дальше его не может.. распасить... что ли?!

[Денис Инешин]

Платон Фёдорович: скопируйте тот json и попробуйте его вручную распарсить, может действительно не валидный возвращается.

[Платон Фёдорович]

Денис Инешин: Взял тот JSON и положил сюда https://api.myjson.com/bins/2u6wo и вставил в jQuery.getJSON в качестве URL — ошибка пропала, значит JSON валиден.

[Платон Фёдорович]

Денис Инешин: Мда. Всё ещё борюсь с этой проблемой.

Я тут подумал, а может быть ответ просто приходит не с тем заголовком, поэтому jQuery.getJSON и показывает ошибку связанную с SyntaxError. Можно ли как-то переопределить заголовок перед запросом? Ну то есть, задать сразу, чтобы был application/json какой-нибудь.. Как сделать в PHP — знаю, а вот аналогично в jQuery — прошу помощи :)

[Денис Инешин]

Платон Фёдорович: https://jsfiddle.net/cmz7mva9/10/ ну вот так должно работать, попробуйте на другом сервере, может jsfiddle не позволяет.

[Платон Фёдорович]

Денис Инешин: проверил у себя.
Такая же ошибка, как и была. Зато консоль показала то, что error возвращает:

Error
Object {readyState: 4, status: 200, statusText: "success"}

Серьёзно, уже не знаю куда копать.. в суппорт написал, но там долго молчали и кроме ссылки на API (которую я привёл в первом посте) — больше ничего не ответили.