WD5 - разработка сайтов

Получить JSON по URL на Javascript, аналог функции $.getJSON

Пример кода на jQuery, для получения JSON данных по URL, недостаток - посторонние зависимости

$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback', function(data) {
    //data is the JSON string });

Два варианта кода, аналогичных данной jQuery функции. Данные запрашиваются с помощью GET запроса, в синхронном режиме.


    function getJSONP(url, success) {

    var ud = '_' + +new Date,
        script = document.createElement('script'),
        head = document.getElementsByTagName('head')[0] 
               || document.documentElement;

    window[ud] = function(data) {
        head.removeChild(script);
        success && success(data);
    };

    script.src = url.replace('callback=?', 'callback=' + ud);
    head.appendChild(script);

}

getJSONP('http://soundcloud.com/oembed?url=http%3A//soundcloud.com/forss/flickermood&format=js&callback=?', function(data){
    console.log(data);
});  

Второй пример


    var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        callback(null, xhr.response);
      } else {
        callback(status);
      }
    };
    xhr.send();
};

// использование
getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback',
function(err, data) {
  if (err != null) {
    alert('Something went wrong: ' + err);
  } else {
    alert('Your query count: ' + data.query.count);
  }
});

Политика безопасности по умолчанию CORS не позволяет получать данные с других доменов, или другого порта данного устройства.

Для разрешения необходимо использовать специальный заголовок, Access-Control-Allow-Origin

Пример корректного заголовка для json, с разрешением доступа с любого адреса

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
Яндекс.Метрика