jQuery - использует ресурсы JSON - некоторые возвращают данные, другие нет.Зачем? - PullRequest
3 голосов
/ 18 июня 2010

Я пытаюсь выяснить, как использовать URL-адреса json в браузере и отображать данные на моих веб-страницах с помощью DOM.Я не получаю последовательного или предсказуемого ответа.

Я нашел JSON-URL в Календаре Google , который показывает ответ json в моем браузере, если я просто набрал URL-адрес в адресной строке.

Я нашел другой JSON URL на business.gov , который показывает другой ответ json в моем браузере, если я просто наберу URL в адресной строке.,

Затем я попытался использовать jQuery для выполнения вызовов $ .ajax, чтобы использовать и отобразить оба этих ресурса JSON.

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  htmlobj=$.ajax(
            {url:"http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json",
             async:false} 
            );

  if (jQuery.isEmptyObject(htmlobj.responseText)===true) {
    alert("htmlobj.responseText is empty");
  } else {
    alert("htmlobj.responseText has stuff in it");
  }

  $("#myDiv").html(htmlobj.responseText).fadeIn();

  htmlobj1=$.ajax(
         {url:"http://api.business.gov/geodata/city_county_links_for_state_of/CA.json",
                async:false, 
                dataType:'text', 
                });

  if (jQuery.isEmptyObject(htmlobj1.responseText)===true) {
    alert("htmlobj1.responseText is empty");
  } else {
    alert("htmlobj1.responseText has stuff in it");
  }

  $("#myGovDiv").html(htmlobj1.responseText).fadeIn();
});
</script>
</head>
<body>
   <h3>Google Calendar - json only</h3>
   <div id="myDiv" style="display:none"></div>

   <h3>Business.Gov</h3>
   <div id="myGovDiv" style="display:none"></div>
</body>

Ресурс JSON Календаря Google использовался нормально, но ресурс JSON business.gov даже не вернулся в ответе.(Я проверил с Firebug, и он возвратил HTTP-код 200 без текста в ответе).

Как получается, что оба URL-адреса JSON возвращают хорошие данные JSON в браузере, но jQuery.ajax может использовать только URL-адрес Календаря Google, в то время как URL-адрес business.gov не может использоваться jQUery.ajax?

РЕДАКТИРОВАТЬ - 19 июня 2010 г., 6:36 EST - Спасибо @ Хуан Мануэль и @ TheJuice .Я попробовал jsonp ... вот что я получил.

Если я переключу вызов на следующий, я смогу заставить браузер прекратить блокировать ответ от api.business.gov, но я не могу получить данные (например, htmlobj2 - ноль)

  htmlobj2=$.ajax(
        {url:"http://api.business.gov/geodata/city_county_links_for_state_of/CA.json",
         async: false,
         dataType: 'jsonp',
         success: function(data, textStatus) {
            alert("Success");
            $('#myDiv').html("Your data: " );
       },
         error: function ( XMLHttpRequest, textStatus, errorThrown){
                    alert('error');
                }
    }
);

Использую ли я dataType 'jsonp' или 'script', я получаю одинаковый результат.htmlobj2 равен nil, но заголовок ответа содержит всю строку данных json.Более того, если я попытаюсь связать функцию обратного вызова с вызовом .ajax с «данными» в качестве параметра, этот параметр «данных» также будет нулевым объектом.Кроме того, не вызывается ни обработчик успеха, ни неудачи.

Как мне извлечь эти данные JSON из строки ответа и представить их на моей веб-странице?

РЕДАКТИРОВАТЬ - 22 июня 2010 г., 11:17

Я нашел скрипт Ruby и настроил его, чтобы попытаться использовать URL-адреса.Я запустил его в интерактивном Ruby (irb).

require 'rubygems'
require 'json'
require 'net/http'

url = "http://api.business.gov/geodata/city_county_links_for_state_of/CA.json"
resp = Net::HTTP.get_response(URI.parse(url))
data = resp.body
result = JSON.parse(data)
result.each{|entry| p entry["name"] + "," + entry["full_county_name"] }

Мне удалось использовать аналогичный сценарий Ruby, чтобы также использовать URL-адрес Календаря Google.

Итог?Я смог использовать оба JSON-ресурса (api.business.gov и Google Calendar), используя Ruby, но только ресурс Google Calendar, использующий Javascript / jQuery в моем браузере.

Буду признателен за любую информацию, которую смогу получить.Из документации в Интернете и описаний API не ясно, почему фид Google Calendar работает в браузере, несмотря ни на что, но фид api.business.gov не работает в браузере с использованием JSON или JSONP.

Ответы [ 3 ]

4 голосов
/ 19 июня 2010

Как отметил Хуан Мануэль, это ваш браузер, защищающий вас от межсайтовых скриптов.Если вы посмотрите на ваши запросы в Fiddler, вы увидите, что происходит.

Это часть заголовка ответа от Google:

HTTP/1.1 200 OK
Content-Type: application/json; charset=UTF-8
Access-Control-Allow-Origin: *
Rest Omitted...

Это от business.gov:

HTTP/1.1 200 OK
Date: Fri, 18 Jun 2010 21:52:10 GMT
Server: Mongrel 1.1.4
Status: 200 OK
X-Runtime: 0.36775
ETag: "172ec84fa79f748265e96d467af3d3dd"
Cache-Control: private, max-age=0, must-revalidate
Content-Type: application/json; charset=utf-8
Via: 1.1 api.business.gov
Content-Length: 229427
Proxy-Connection: Keep-Alive
Connection: Keep-Alive
Set-Cookie: .....7c5; path=/
Age: 0

[
  {"name": "Adelanto" ,
   "fips_county_cd": "71" ,
   "feat_class": "Populated Place" ,
   "county_name": "San Bernardino" ,
   "primary_latitude": "34.58" ,
   "state_name": "California" ,
..... (rest omited)

Вы видите, что ваш ответ от business.gov действительно возвращен, но заблокирован браузером.

Обновление для вашегоОбновления: веб-сервис Google обрабатывает JSONP для вас вместе с jQuery.Веб-сервис business.gov, очевидно, не поддерживает JSONP.Вам нужно будет использовать Ruby (код на стороне сервера) для работы в качестве прокси-сервера и использовать службу business.gov, а затем вернуть ответ клиенту.

2 голосов
/ 19 июня 2010

Это может быть проблема с той же политикой происхождения

Можете ли вы попробовать использовать JSONP ?
У меня была та же проблема (firebug, показывающий пустые данные), и я решил ее, но у меня был контроль над веб-сервисом, и я мог изменить его для поддержки.

1 голос
/ 22 июня 2010

Разница между ними заключается в Content-Type, который сервер сообщает о результатах:

Fiddler показывает, что вызов Календаря Google возвращается как Content-Type: text/plain; charset=UTF-8, тогда как business.gov не указывает Content-Type. application/json; charset=utf-8 (отредактировано, мой первоначальный ответ был из ответа в кэше).

Content-Type, по сути, сообщает браузеру, какой тип файла является ответом - он довольно похож на расширение файла в Windows. Он также известен как MIME-тип и имеет довольно далеко идущие последствия (например, он имеет приоритет над DTD в файле HTML / XHTML - поэтому, если вы обслуживаете XHTML с типом содержимого text / html Content-Type, тогда Браузер будет обрабатывать ответ как HTML - , поэтому многие сайты, утверждающие, что они совместимы с XHTML, фактически обслуживают недопустимый HTML .


TheJuice , похоже, видел разные результаты в Fiddler, поэтому для сравнения вот заголовки, которые я видел при тестировании:

Календарь Google

HTTP/1.1 200 OK
Content-Type: text/plain; charset=UTF-8
Expires: Tue, 22 Jun 2010 15:25:41 GMT
Date: Tue, 22 Jun 2010 15:25:41 GMT
Cache-Control: private, max-age=0, must-revalidate, no-transform
Vary: Accept, X-GData-Authorization, GData-Version
GData-Version: 1.0
Last-Modified: Tue, 22 Jun 2010 12:19:15 GMT
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Server: GSE
Content-Length: 49803

Business.gov:

HTTP/1.1 200 OK
Date: Tue, 22 Jun 2010 15:34:33 GMT
Server: Mongrel 1.1.4
Status: 200 OK
X-Runtime: 0.37833
ETag: "172ec84fa79f748265e96d467af3d3dd"
Cache-Control: private, max-age=0, must-revalidate
Content-Type: application/json; charset=utf-8
Content-Length: 229427
Via: 1.1 api.business.gov
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
...