ホームページ  >  記事  >  ウェブフロントエンド  >  JSONP クロスドメイン アクセス プロキシ API-yahooapis 実装 code_jquery

JSONP クロスドメイン アクセス プロキシ API-yahooapis 実装 code_jquery

WBOY
WBOYオリジナル
2016-05-16 17:47:411338ブラウズ

AJAX を使用していくつかのパブリック API にアクセスしたいが、独自のプロキシ サービスを構築したくないという状況に遭遇したことはありますか?迷惑なブラウザの同一生成元ポリシーにより、ajax 呼び出しが妨げられます。
たとえば、天気 Restfull API にアクセスしたい場合は、直接 GET に移動します:

コードをコピーしますコードは次のとおりです:

$.get("http://m.weather.com.cn/data/101010100.html");


この質問を参照してください。誰もがこれに慣れており、自然に解決策が見つかると思いますが、ここではサーバー側のコードには触れたくありません。jsonp を使用しますが、サーバー側は行います。契約を履行しない。
ここで、主人公 yahoo が提供する jsonp プロキシを紹介します: http://query.yahooapis.com/v1/public/yql
クロスドメイン アクセスを実装するコードは次のとおりです: http: //jsfiddle.net/whitewolf /4UDpf/9/
html:
コードをコピー コードは次のとおりです:

< script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js">



コードをコピーします コードは次のとおりです: js:
$(function(){
$.getJSON("http://query.yahooapis.com/v1/public /yql", {
q: "select * from json where url="http://m.weather.com.cn/data/101010100.html"",
format: "json"
}, function(data) {
var $content = $("#content")
if (data.query.results) {
$content.text(JSON.stringify(data.query.results) ));
} else {
$ content.text('そのようなコードはありません: ' code)
}
}); >効果:


複数 言うまでもなく、jsonp の原理は誰もが知っていると思います。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。