1つの記事でJSONPの原理と応用を理解する

1. Ajaxでクロスドメインリクエストが行われると何が起こるか
2. JSONPを使用してフロントエンドコード内のAjaxリクエストを削除する
3. フロントエンドコードを再度修正する
4. 最後に、jQueryはJSONPを使用する便利な方法を提供します

JSONPとは

まず、JSON の概念について説明します。JSON は、現在の Web アプリケーションで広く使用されている軽量のデータ転送形式です。 JSON 形式のデータのエンコードと解析は基本的にすべての主流言語で実装されているため、フロントエンドとバックエンドが分離されたアーキテクチャのほとんどは現在、JSON 形式でデータを送信しています。

ではJSONPとは何でしょうか?

まず、ブラウザ相同性ポリシーの概念について説明します。ユーザーアクセスのセキュリティを確保するために、最新のブラウザは相同性ポリシーを使用しており、相同性のないソースからのページへのアクセスは許可されません。詳細な概念については、Baiduで検索できます。ここで誰もが知っておく必要があるのは、Ajax では、同じオリジンではない URL へのリクエストは許可されないということです。たとえば、www.a.com の下のページでは、Ajax リクエストは www.b.com/c.php のようなページにアクセスできません。

JSONP はクロスドメインリクエストの問題を解決するために使用されますが、具体的にはどのように実装されるのでしょうか?

JSONP 原則

Ajax リクエストは同一オリジンポリシーの影響を受け、クロスドメインリクエストは許可されません。ただし、script タグの src 属性のリンクは、クロスドメイン js スクリプトにアクセスできます。この機能を使用すると、サーバーは JSON 形式でデータを返すのではなく、src で呼び出される関数を呼び出す js コードのセクションを返すため、クロスドメインが実現します。

JSONP実装

1. Ajaxでクロスドメインリクエストが行われると何が起こるか

フロントエンドコードはドメインwww.practice.comの下にあり、クロスドメインのgetリクエストを送信するためにajaxを使用しています。

<!DOCTYPE html>
<html>
<ヘッド>
	<title>GoJSONP</title>
</head>
<本文>
<script type="text/javascript">
	関数jsonhandle(データ){
		アラート("年齢:" + data.age + "名前:" + data.name);
	}
</スクリプト>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</スクリプト>
<script type="text/javascript">
	$(ドキュメント).ready(関数(){
		$.ajax({
			タイプ: "get",
			非同期: false、
			URL: "http://www.practice-zhao.com/student.php?id=1",
			タイプ: "json",
			成功: 関数(データ) {
				jsonhandle(データ);
			}

		});
	});
</スクリプト>
</本文>
</html>

バックエンドのPHPコードはドメインwww.practice-zhao.comの下に配置され、json形式でデータを出力するだけです。

jsonハンドル({
「年齢」: 15,
"名前": "ジョン",

フロントエンドコード http://www.practice.com/gojsonp/index.html にアクセスすると、Chrome は次のエラーを報告します。

異なるソースからのURLへのアクセスを禁止することをお勧めします

2. JSONPを使用してフロントエンドコード内のAjaxリクエストを削除する

スクリプトタグを追加しました。その src は、別のドメイン www.practice-zhao.com の remote.js スクリプトを指します。

<!DOCTYPE html>
<html>
<ヘッド>
	<title>GoJSONP</title>
</head>
<本文>
<script type="text/javascript">
	関数jsonhandle(データ){
		アラート("年齢:" + data.age + "名前:" + data.name);
	}
</スクリプト>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</スクリプト>
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
</本文>
</html>

ここで、クロスドメインの remote.js スクリプトが呼び出されます。remote.js コードは次のとおりです。

jsonハンドル({
	「年齢」: 15,
	"名前": "ジョン",
})

つまり、このリモートjsコードは上で定義された関数を実行し、プロンプトボックスをポップアップします。

3. フロントエンドコードを再度修正する

コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
	<title>GoJSONP</title>
</head>
<本文>
<script type="text/javascript">
	関数jsonhandle(データ){
		アラート("年齢:" + data.age + "名前:" + data.name);
	}
</スクリプト>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</スクリプト>
<script type="text/javascript">
	$(ドキュメント).ready(関数(){
		var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
		var obj = $('<script><\/script>');
		obj.attr("src",url);
		$("body").append(obj);
	});
</スクリプト>
</本文>
</html>

ここでスクリプトタグが動的に追加され、src はクロスドメイン PHP スクリプトを指し、上記の JS 関数名がコールバックパラメーターとして渡されます。次に、PHP コードがどのように記述されるかを見てみましょう。

<?php
$データ = 配列(
	'年齢' => 20,
	'名前' => '張三'、
);

$コールバック = $_GET['コールバック'];

$callback をエコーします。"(".json_encode($data).")";
戻る;

PHPコードはJSステートメントを返します。

jsonハンドル({
	「年齢」: 15,
	"名前": "張三",
})

この時点でページにアクセスすると、スクリプトタグが動的に追加され、src が PHP スクリプトを指し、返された JS コードが実行され、プロンプトボックスが正常にポップアップ表示されます。
したがって、JSONP はクロスドメインリクエストへのアクセスをリモート JS コードの実行に変換します。サーバーは JSON 形式でデータを返すのではなく、JSON データを受信パラメータとして受け取る関数実行コードを返します。

4. 最後に、jQueryはJSONPを使用する便利な方法を提供します

コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
	<title>GoJSONP</title>
</head>
<本文>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</スクリプト>
<script type="text/javascript">
	$(ドキュメント).ready(関数(){
		$.ajax({
			タイプ: "get",
			非同期: false、
			URL: "http://www.practice-zhao.com/student.php?id=1",
			データ型: "jsonp",
			jsonp:"callback", //リクエストのパラメータ名 PHP jsonpCallback: "jsonhandle", //実行されるコールバック関数 success : function(data) {
				アラート("年齢:" + data.age + "名前:" + data.name);
			}

		});
	});
</スクリプト>
</本文>
</html>

上記は、JSONP の原理と応用を 1 つの記事で理解するための詳細な内容です。JSONP の原理と応用の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: