JavaScript - Deseja acessar o conteúdo de outro domínio com o Ajax?
Pergunta
Estou tentando escrever um aplicativo JavaScript que carregue dados da API OpenStreetMap (http://wiki.openstreetmap.org/wiki/osm_protocol_version_0.6), que é basicamente apenas uma API XML RESTful. Estou tentando usar o jQuery para acessar o XML. No entanto, recebo erros de segurança. Este é um bloqueio de script de site cruzado.
Como posso acessar esse XML? O AFAIK OSM não oferece JSONP, então isso não funciona. Existe alguma coisa?>>
Solução
A postagem do blog vinculada por Dan mostra como resolver esse problema, mas aqui estão os antecedentes:
A única maneira de fazer uma chamada JavaScript de domínio cruzado de uma página da web é via JSONP. Se você não é oferecido JSONP, precisará recorrer ao uso de um script proxy, pois os navegadores impedirão propositadamente scripts do site de fazer essas chamadas.
Observe que, se você estiver escrevendo uma extensão do Firefox, estará executando em um espaço privilegiado e, portanto, poderá fazer essas chamadas cruzadas sem restrições.
Outras dicas
As duas maneiras de obter scripts redondos de sites cruzados é configurar um proxy do lado do servidor para ligar para o URL com seu script chamando seu proxy do lado do servidor. A outra maneira é chamar os dados usando a tag de script que não possui restrições nas chamadas cruzadas do site.
A API nominatim do OpenStreetMap agora suporta o JSONP para que você possa obter dados puramente com o código lateral do cliente, não precisando de nada extra em seu próprio servidor. Aqui está um jsfiddle exemplo - Se você pode fazer isso no JSFiddle, poderá fazê -lo em qualquer lugar.
Para a questão mais geral de como acessar as APIs de outros domínios, aqui estão algumas coisas úteis que aprendi enquanto percorri as muitas respostas parcialmente completas e frequentemente contraditórias por aí e por tentativa e erro. Por favor, edite ou comente se alguma coisa for ou se tornar imprecisa.
- Se você não pode usar uma API que suporta JSONP, você precisa procurar plugins como jQuery-xDomain-AJAX usando coisas como Yql e entender como eles funcionam. Geralmente, esses plugins parecem marcados para ler mais do que as APIs de consulta.
- Para poder acessar diretamente uma API, ela deve a) oferecer resultados em JSON e B) construíram suporte JSONP, o que significa:-
- A API deve ser configurada para ouvir um parâmetro que diz o nome da função para envolver seu resultado em
- Você deve descobrir como esse parâmetro é chamado. No caso do OSM, é chamado
json_callback
, JQuery's Padrãocallback
só funcionará se por acaso é isso que a API estiver programada para ouvir - Com o jQuery, é essa chave de parâmetro específica da API que deve ir no final do seu URL de consulta com
?
(por exemplo, se forjson_callback
, entãosomeurl.com/api?json_callback=?
). jQuery descobre o que é isso, troca o?
Para uma corda comojQuery1712164863864387412
, nomeia a função embutida com a mesma string e aguarda para receber algum código que desencadeia que funcione pelo nome e passa pelo JSON.- Se a solicitação funcionar, mas o retorno de chamada não dispara e você verá um erro como
parseerror jQuery17109935275333671539_1300495251986 was not called
, isso significa que o jQuery tem a função nomeada, pronta e espera, mas a API não usou essa string para envolver o json para que a função não seja chamada - provavelmente significando que você não está usando o nome do parâmetro certo
- Se a solicitação funcionar, mas o retorno de chamada não dispara e você verá um erro como
- Sem jQuery, você precisa passar nessa chave de parâmetro o nome de uma função nomeada que receberá o JSON
- Como essencialmente tudo o que está acontecendo é o navegador está carregando de uma maneira controlada executando um trecho de código JavaScript equivalente a
someFunction({"some": "argument"});
, o manuseio de erros é limitado (mas veja o jsfiddle para o que o jQuery oferece se você usar o completo$.ajax
sintaxe em vez de despojar$.getJSON
atalho) - Em Firebug para mim, pelo menos as solicitações JSONP não aparecem no console como outras chamadas do Ajax; em vez disso, eles estão na parte inferior do painel da rede (já que, sob o capô, é essencialmente uma maneira de voltar atrás código, tratado mais como dizer
<script>
).
Espero que isso ajude alguém!