jquery＆＃x27; s jsonpは例で説明しました-jsチュートリアル-php.cn

jQuery's JSONP Explained with Examples

キーポイントの概要

概要

jsonp（json with padding）により、クロスドメインのajaxコールが許可されており、さまざまなソースからのデータへのデータへのアクセスを制限する相同ポリシーを回避します。これは、ブラウザが解釈できる関数呼び出しを含むサーバーを返すJSONデータを返すことによって行われます。
JSONPは、さまざまなソースからデータを取得し、さまざまなサービスのコンテンツにアクセスするのに役立ちますが、いくつかの制限もあります。 JSONPは、クロスドメインのGETリクエストのみを実行でき、サーバーによって明示的にサポートされる必要があります。また、クロスサイトスクリプティング（XSS）攻撃の可能性を開くため、セキュリティの問題が潜在的に問題を抱えています。
相同政策に対するその他のソリューションには、プロキシの使用またはクロスオリジンリソース共有（CORS）の実装が含まれます。プロキシを使用すると、サーバー側のコードがクロスオリジン要求を実行できますが、CORSでは、応答に新しいアクセス制御コントロールオリジンHTTPヘッダーを含めることにより、ブラウザがドメイン間で通信できます。ただし、各方法には独自の欠点と制限があります。

この記事は、品質の問題に対処するために2016年6月23日に更新されました。古い記事に関連するコメントは削除されています。 Webベースのアプリケーションを開発し、制御下にないドメインからデータをロードしようとしている場合、ブラウザのコンソールに次のメッセージが表示される可能性があります：XMLHTTPREQUESTはhttps：//www.phpをロードできません.CN/LINK/0DF0DBFC4725C2259DC0BB045E9BF6D2 🎜> 'したがって、アクセスが許可されていませんこの記事では、jqueryとjsonpを使用して、このエラーの原因とこの問題を解決する方法を調べます。

同じ起源ポリシー

一般的なWebページは、xmlhttprequestオブジェクトを使用してリモートサーバーにデータを送信および受信できますが、同じ発作ポリシーが実行できるものを制限します。これは、ブラウザセキュリティモデルの重要な概念であり、WebブラウザがページAのスクリプトがページBのデータにアクセスできるようにすることができると規定しています。ページのソースは、その、host

、

ポート番号で定義されます。たとえば、このページのソースは「https」、「www.sitepoint.com」、「80」です。ホモジーポリシーはセキュリティメカニズムです。スクリプトがドメインからデータを読み取り、サーバーに送信することを防ぎます。これがなければ、悪意のあるウェブサイトがセッション情報を別のサイト（GmailやTwitterなど）にクロールし、あなたに代わってアクションを実行するのは簡単です。残念ながら、それはまた、上に表示されるエラーを引き起こし、多くの場合、開発者が正当なタスクを完了しようとするのに問題を引き起こします。障害の例

何が機能しないのか見てみましょう。これは別のドメインにあるJSONファイルであり、jQueryのGetJsonメソッドを使用してロードしたいと考えています。

$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);

ログイン後にコピー

ブラウザでコンソールを開いて試してみると、上記のメッセージに似たメッセージが表示されます。それで、私たちは何ができますか？

可能な解決策< 幸いなことに、すべてが相同政策の影響を受けているわけではありません。たとえば、別のドメインから画像またはスクリプトをページにロードすることは完全に可能です。CDN（たとえば）からjQueryを含めるときにこれを行います。これは、

タグを作成し、その

属性をJSONファイルに設定し、ページに挿入できることを意味します。 <script> src

これは機能しますが、含むデータにアクセスできないため、あまり役に立ちません。

var script = $("<script>", {
    src: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
    type: "application/json"
  }
);

$("head").append(script);

ログイン後にコピー

JSONP <

jsonp（パディング付きのJSONに代わって）は、この手法に基づいており、返されたデータにアクセスする方法を提供します。これは、ブラウザが解釈できる関数呼び出し（「人気」）を含むサーバーを返すJSONデータを提供することによって実装されます。この関数は、JSONP応答を評価するページで定義する必要があります。前の例がどのように見えるか見てみましょう。これは、元のJSONデータをA

関数でラップする更新されたJSONファイルです。

これにより、予想される結果がコンソールに記録されます。現在（かなり限られていますが）クロスドメインAjaxがあります。 jsonCallback

function jsonCallback(json){
  console.log(json);
}

$.ajax({
  url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json",
  dataType: "jsonp"
});

ログイン後にコピー

サードパーティapi

一部のサードパーティAPIでは、リクエストが返されたときに実行する必要があるコールバック関数の名前を指定できます。そのようなAPIの1つはGitHub APIです。次の例では、John Resig（jQuery Creator）のユーザー情報を取得し、

コールバック関数を使用してコンソールへの応答をログに記録します。

これは次のように書くこともできます logResults URLの最後にある

function logResults(json){
  console.log(json);
}

$.ajax({
  url: "https://api.github.com/users/jeresig",
  dataType: "jsonp",
  jsonpCallback: "logResults"
});

ログイン後にコピー

jqueryに、jsonの代わりにJSONP要求を処理していることを伝えます。 jQueryは、リクエストが返されたときに呼び出すコールバック関数を自動的に登録します。

jqueryのgetjsonメソッドの詳細を知りたい場合は、ajax/jquery.getjsonの簡単な例

$.getJSON("https://api.github.com/users/jeresig?callback=?",function(json){
  console.log(json);
});

ログイン後にコピー

をチェックしてください。

?予防策

しかし、あなたが今までに気づいたかもしれないように、このアプローチにはいくつかの欠点があります。

たとえば、 JSONPはクロスドメインGETリクエストのみを実行でき、サーバーはそれを明示的にサポートする必要があります。 JSONPにはセキュリティの問題がないわけではないため、他のソリューションを簡単に紹介しましょう。エージェントを使用して

サーバー側のコードは、同じオリジンポリシーの対象ではなく、問題なくクロスオリジンリクエストを実行できます。そのため、何らかのプロキシを作成し、必要なデータを取得するために使用できます。最初の例を参照してください：

クライアントの

：

しかし、この方法には欠点もあります。たとえば、サードパーティのサイトが認証にCookieを使用している場合、この方法は機能しません。

/* proxy.php */
$url = "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec ($ch);
curl_close ($ch);
echo $result;

ログイン後にコピー

cors

クロスオリジンリソース共有（CORS）は、ブラウザがドメイン間で通信できるW3C仕様です。これは、応答に新しいアクセス制御コントロールオリジンHTTPヘッダーを含めることによって行われます。

最初の例を参照すると、.htaccessファイル（Apacheを仮定）に次のことを追加して、さまざまなソースからのリクエストを許可できます。

$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);

ログイン後にコピー

（apacheではないサーバーを実行している場合は、こちらで確認してください：

https://www.php.cn/link/819e2e55be8ef0957b56ea94356bfbb79）

最近のチュートリアルの1つでCORSの詳細をご覧ください。CORS

の詳細

結論

JSONPを使用すると、相同ポリシーをバイパスし、ある程度クロスドメインAjaxの呼び出しを行うことができます。それは魔法の丸薬ではなく、もちろん問題がありますが、場合によっては、異なるソースからデータが取得されると非常に貴重であることが証明される可能性があります。

JSONPでは、さまざまなサービスからさまざまなコンテンツを抽出することもできます。多くの有名なWebサイトは、事前定義されたAPIを介してコンテンツにアクセスできるJSONPサービス（Flickrなど）を提供しています。それらの完全なリストは、プログラム可能なWeb APIディレクトリにあります。

（以下はFAQパーツであり、複製情報を避けるために元のテキストに従って調整および簡素化されています） JSONP（FAQ）

についてのFAQ

JSONとJSONPの主な違いは何ですか？ JSONとJSONPの両方は、サーバーとWebアプリケーション間のデータの処理に使用される形式です。主な違いは、クロスドメイン要求を処理する方法です。 JSONは、相同ポリシー（Webブラウザーに実装されたセキュリティ対策）のために、クロスドメイン要求をサポートできません。一方、JSONPは、人口測定方法を使用してこのポリシーをバイパスし、クライアントとは異なるドメインを持つサーバーからデータをリクエストできるようにします。
JSONPはどのようにして同じオリジンポリシーをバイパスしますか？ jSonpは、パディングまたは「充填リクエスト」メソッドを使用して相同ポリシーをバイパスします。この方法では、クライアントは、URLにコールバック関数を追加することにより、異なるドメインのサーバーからデータを要求します。次に、サーバーはこの関数で要求されたデータをラップし、クライアントに送り返します。クライアントはこの関数を実行してデータにアクセスします。この方法により、JSONPは相同政策によって課されるクロスドメインの制限を克服することができます。
jsonpは安全ですか？ JSONPは相同政策の解決策を提供していますが、独自のセキュリティリスクがあります。 JSONPはサーバーから受信したスクリプトを実行することを伴うため、サーバーが破損している場合、クロスサイトスクリプト（XSS）攻撃の可能性が開きます。したがって、信頼できるソースでのみJSONPを使用してください。
JSONPはエラー応答を処理できますか？ JSONとは異なり、JSONPにはエラー処理が組み込まれていません。 JSONP要求が失敗した場合、ブラウザはエラーをスローせず、コールバック関数は実行されません。 JSONPのエラーを処理するために、指定された時間内にコールバック関数が実行されない場合、エラーをトリガーするタイムアウトメカニズムを実装できます。
jQueryを使用してJSONPリクエストを作成するにはどうすればよいですか？ jQueryは、$ .ajax（）メソッドを使用してJSONP要求を簡単に作成する方法を提供します。 $ .ajax（）設定でデータ型を「jsonp」として指定する必要があります。
JSONPの制限は何ですか？ jsonpにはいくつかの制限があります。 GETリクエストのみをサポートし、投稿またはその他のHTTPメソッドをサポートしていません。また、エラー処理機能もありません。さらに、JSONPは、相同政リをバイパスするためのアプローチにより、セキュリティリスクをもたらします。
JSONPは今でも使用されていますか？ JSONPは過去のクロスドメイン要求の一般的なソリューションでしたが、CORSはCORS（オリジンクロスリソース共有）の出現により、使用頻度が低くなりましたが、CORSはより安全で強力なクロスドメインを提供します。リクエスト。

以上がjquery＆＃x27; s jsonpは例で説明しましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。