JSON と JSONP の違いと jQuery の ajax jsonp_jquery の使用についての簡単な説明

JSON と JSONP

JSON (JavaScript Object Notation) は、ブラウザとサーバーの間で情報を交換するために使用される軽量のデータ交換形式です。

JSONP (JSON With Padding) は、関数呼び出しにパッケージ化された JSON (またはラップされた JSON) です。

JSON はデータ形式であり、JSONP はデータの呼び出し方法です。

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

//JSON
{
「名前」: 「sb」
}

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

//JSONP
コールバック({
「名前」: 「sb」
})

セキュリティ上の理由から、スクリプト (AJAX) はこのドメイン外のコンテンツにアクセスできません。ただし、静的リソースはドメイン ポリシーによって制限されず、JSOP はこの原則を使用して、クロスドメイン データの取得を実現します。

例 1:

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

//shoPrice 関数を定義します
関数 showPrice(data) {
alert("シンボル: " data.symbol ", 価格: " data.price);
}

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

//Web ページに showPrice 関数とパラメータを含めます
<スクリプトタイプ="text/javascript">
関数 showPrice(data) {
alert("シンボル: " data.symbol ", 価格: " data.price);
}

この例は、静的な JSON データをパラメーターとして使用して JavaScript 関数を呼び出す方法を示しています。

例 2:

最初の関数呼び出しは js ファイルに記述してサーバーに配置し、script タグを使用してページにロードできます。このタグは動的に作成できます。

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

<スクリプトタイプ="text/javascript">
// これは JSON データで呼び出される関数です
関数 showPrice(data) {
alert("シンボル: " data.symbol ", 価格: " data.price);
}

var url = “remote.js” // 外部スクリプトの URL
; // スクリプトを動的に挿入します
var script = document.createElement('script');
script.setAttribute('src', url);

//スクリプトをロード
document.getElementsByTagName('head')[0].appendChild(script);

remote.js の内容は前にタグに書いたものと同じです:

1 showPrice({シンボル: 'IBM'、価格: 91.42});
動的に挿入された JavaScript コードは、パラメーターとして渡される JSON データと、showPrice 関数呼び出しステートメントのパラメーターを受け取ります。

そこで質問は、データを取得するたびに showPrice 関数を呼び出す必要があるかということです。もちろん、これにはフロントエンドとバックエンドのプログラマが合意する必要があり、特にインターフェイスが公開開発されている場合には、多くの不便が生じます。 JSOP は次の方法で処理されます。フロントエンドはコールバック関数名パラメータを渡すことがサポートされており、バックエンドはコールバック関数名パラメータを受け取り、関数への呼び出しを生成し、JSON データをパラメータとして渡して挿入します。クライアントに到達して実行を開始すると、ページに書き込まれます。

例 3:

コールバックパラメータを使用してコードを動的に挿入します:

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

<スクリプトタイプ="text/javascript">
// これは JSON データで呼び出される関数です
関数 showPrice(data) {
alert("シンボル: " data.symbol ", 価格: " data.price);
}
var url = "remote.js?callback='showPrice'" // 外部スクリプトの URL
; // スクリプトを動的に挿入します
var script = document.createElement('script');
script.setAttribute('src', url);
//スクリプトをロード
document.getElementsByTagName('head')[0].appendChild(script);

バックエンドの PHP に実装された JSONP サービスのコード スニペット:

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

$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// 印刷: showPrice({"symbol" : "IBM", "price" : "91.42"});

これは JSONP の定義によく適合し、JSON データを関数呼び出しにパッケージ化します。

上記の例は以下からのものです:

クロスドメイン通信に JSONP を使用する、パート 1: JSONP と jQuery を使用して強力なマッシュアップを迅速に構築する


jQuery での JSONP の使用
jQuery の AJAX と JSONP の呼び出しメソッドは非常に似ていますが、この現象に混同しないでください。本質的には異なります。 AJAX は XMLHttpRequest オブジェクトを通じてページ以外のコンテンツを取得しますが、JSONP はサーバー スクリプトを呼び出すために

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

1 か月前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

1 か月前 By DDD

R.E.P.O.最高のグラフィック設定

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7388

15

Java チュートリアル

1630

14

CakePHP チュートリアル

1357

52

Laravel チュートリアル

1267

25

PHP チュートリアル

1216

29

もっと見る

Related knowledge

PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント May 04, 2024 pm 06:15 PM

PHP 配列を JSON に変換するためのパフォーマンスの最適化方法には、JSON 拡張機能と json_encode() 関数の使用、文字エスケープを回避するためのバッファーの使用、およびサードパーティのエンコード結果の使用の検討が含まれます。 JSONエンコーディングライブラリ。

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? May 06, 2024 pm 10:09 PM

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化を制御します。 シリアル化: @JsonIgnore: プロパティを無視します @JsonProperty: 名前を指定します @JsonGetter: get メソッドを使用します @JsonSetter: set メソッドを使用します Deserialization: @JsonIgnoreProperties: プロパティ @ JsonProperty を無視します:名前を指定 @JsonCreator: コンストラクターを使用 @JsonDeserialize: カスタム ロジック

PHPを深く理解する：JSON Unicodeを中国語に変換する実装方法 Mar 05, 2024 pm 02:48 PM

PHP の深い理解: JSONUnicode を中国語に変換する実装方法 開発中、JSON データを処理する必要がある状況によく遭遇しますが、特に変換する必要がある場合、JSON 内の Unicode エンコードによっていくつかのシナリオで問題が発生します。 Unicode エンコードを漢字に変換する場合。 PHP では、この変換処理を実現するためのメソッドがいくつかありますが、以下では一般的なメソッドを紹介し、具体的なコード例を示します。まず、JSON の Un について理解しましょう

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

PHP 配列を JSON に変換するための簡単なヒント May 03, 2024 pm 06:33 PM

PHP 配列は、 json_encode() 関数を使用して JSON 文字列に変換できます (例: $json=json_encode($array);)。逆に、 json_decode() 関数を使用して JSON から配列に変換できます ($array= json_decode($json);) 。その他のヒントには、深い変換の回避、カスタム オプションの指定、サードパーティ ライブラリの使用などがあります。

PHP チュートリアル: JSON Unicode を漢字に変換する方法 Mar 05, 2024 pm 06:36 PM

JSON (JavaScriptObjectNotation) は、Web アプリケーション間のデータ交換に一般的に使用される軽量のデータ交換形式です。 JSON データを処理するとき、Unicode でエンコードされた中国語の文字 (「u4e2du6587」など) が頻繁に発生するため、それらを読み取り可能な中国語の文字に変換する必要があります。 PHP では、いくつかの簡単なメソッドを通じてこの変換を実現できます。次に、JSONUnico を変換する方法を詳しく説明します。

PHP 関数を使用して JSON データを処理するにはどうすればよいですか? May 04, 2024 pm 03:21 PM

PHP には、JSON データを処理する次の関数が用意されています。 JSON データの解析: json_decode() を使用して、JSON 文字列を PHP 配列に変換します。 JSON データを作成する: json_encode() を使用して、PHP 配列またはオブジェクトを JSON 文字列に変換します。 JSON データの特定の値を取得する: PHP 配列関数を使用して、キーと値のペアや配列要素などの特定の値にアクセスします。

PHPでよく使われるファイル操作関数のまとめ Apr 03, 2024 pm 02:52 PM

目录1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype( )11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：

See all articles