Получить файл JSON по URL-адресу и отобразить

После стольких месяцев поисков я нашел решение. Следовательно, я отвечаю на свой вопрос.

Когда JSON не поддерживается и когда мы застряли с той же политикой происхождения, мы должны обернуть наш JSON отступом и сделать его JSONP.

Для этого у нас есть спасательный веб-сайт http://anyorigin.com/.

Вы можете вставить свой URL-адрес и получить соответствующий код JQuery примерно так:

$.getJSON('http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', function(data){
$('#output').html(data.contents);
});

Если вы хотите использовать свой собственный код, просто используйте URL-адрес из приведенного выше кода, который

http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?

Этот URL-адрес выше предоставит вам те же данные JSON, что и JSONP, и решит все проблемы.

Я использовал следующий код, который в случае успеха вызывает функцию displayAll

$.ajax({
        url: 'http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?',
        type: 'GET',
        dataType: "json",
        success: displayAll
    });

function displayAll(data){
    alert(data);
}

Если вы посмотрите в инспекторе Chrome, вы, вероятно, увидите эту ошибку:

XMLHttpRequest не может загрузить http://webapp.armadealo.com/home.json. Источник http://stackoverflow.com не разрешен Access-Control-Allow-Origin.

Это означает, что сервер не хочет, чтобы клиентская веб-страница читала файл. Клиенту не доверяют. Это базовая функция безопасности XMLHttpRequest, которая предотвращает загрузку данных с mybank.com таким сайтом, как mybank.evil.com. К сожалению, это затрудняет тестирование из локального файла.

Если вы доверяете любому сайту свои данные или определенное количество сайтов, вы можете настроить сценарий сервера на отправку Access-Control-Allow-Origin, чтобы разрешить доступ определенным сайтам.

Подробнее см. https://developer.mozilla.org/en/http_access_control.

Он должен работать.

1. Вы смотрели запрос в firebug или другой консоли отладки, что происходит и какой ответ возвращается?

2. Обратите внимание на одинаковую-политику-происхождение, поэтому скрипт, выполняющий этот запрос, также должен быть загружен с webapp.armadealo.com. В противном случае вам понадобится jsonp-запрос. Посмотрите: http://api.jquery.com/jQuery.ajax/

Насколько я могу судить, ваш сервер не поддерживает JSONP со своими запросами. Например

var getUrl = 'http://webapp.armadealo.com/home.json';
                $.ajax({
                    url : getUrl,
                    type : 'GET',
                    dataType : 'jsonp text',
                    jsonp: 'jsonp',
                    crossDomain : true,
                    success: function() { console.log('Success!'); },
                    error: function() { console.log('Uh Oh!'); },
                });

Это сказал бы SyntaxError: invalid label. Возврат в том виде, в котором он есть, имеет неправильный формат JSONP. Чтобы он работал как JSONP, его нужно обернуть, потому что этого требует jQuery.

Итак, вы получаете правильный ответ, но это не то, что вам нужно. То, что вам нужно для вызовов JSONP, будет выглядеть так:

functionName({
  "mall": {
  "name": "South Shore Plaza",
  "city": "Braintree",
  "directory": "/assets/directory/0000/0094/show_floorplan.aspx",
  "postal_code": "02184",
  "street": "250 Granite St",
  "lng": -71.023692,
  "id": 147,
  "phone": "(781) 843-8200",
  "lat": 42.218688,
  "state": "MA"
}
});

... поскольку то, что возвращается в настоящее время, является недействительным JavaScript (сам по себе, а это то, что он есть), и именно так работает JSONP, ответ на самом деле должен быть исполняемым JavaScript.

Вы можете получить ту же ошибку, просто вставив этот код прямо на свою страницу в <script> блок.

Если вы сразу после встраивания данных, я рекомендую плагин, например jQuery-oembed, чтобы это сделать. Если вам нужны данные, вам понадобится что-то на вашем сервере для обработки JSON, а затем получить данные с вашего сервера после этого.

Например

Итак, допустим, мы хотели бы создать междоменный доступ с помощью jQuery. Вот как должен выглядеть вызов jQuery $.ajax:

$.ajax({
  dataType: 'jsonp',
  data: 'id=test',
  jsonp: 'jsonp_callback',
  url: 'http://www.differentdomain.com/get_data.php',
  success: function () {
    // do something
  },
});

Теперь на стороне сервера (в файле get_data.php) нам нужно получить имя обратного вызова и отправить данные в формате JSON, заключенные в функцию обратного вызова. Что-то вроде этого:

<?php
$jsonp_callback = $_GET['jsonp_callback'];
$data = array('1','2','3');
echo $jsonp_callback . '('.json_encode($data).');';
?>

JSONP можно использовать только в том случае, если сервер правильно встроил ответ в вызов функции JavaScript.