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 はサーバー スクリプトを呼び出すために

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル