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 関数とパラメータを含めます

関数 showPrice(data) {
alert("シンボル: " data.symbol ", 価格: " data.price);
}

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

例 2:

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

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

// これは 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:

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

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

// これは 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 はサーバー スクリプトを呼び出すために <script> タグを動的に追加します。 jQuery は JSONP を AJAX の形式としてカプセル化しますが、JSONP は AJAX の形式または特殊なケースではありません。 <br /> <br /> <br /><div class="codetitle"><span><a style="CURSOR: pointer" data="8779" class="copybut" id="copybut8779" onclick="doCopy('code8779')">コードをコピー<U> コードは次のとおりです:</script>

$.ajax({
URL: "
http://query.yahooapis.com/v1/public/yql", jsonpCallback: "showPrice",
jsonp: "コールバック",
// jQuery に JSONP
を期待していることを伝えます データ型: "jsonp",
データ: {
q: "query="cat" の search.news からタイトル、要約、URL を選択してください",
形式: "json"
}、
// レスポンスを処理します
成功: function(data) {
console.log( data ) // サーバー応答
}
});

Ajax リクエストパラメータの説明:

データ型文字列

サーバーによって返されることが予期されるデータ型。指定しない場合、jQuery は HTTP パッケージの MIME 情報に基づいて自動的にインテリジェントな判断を行います。たとえば、XML の MIME タイプは XML として認識されます。 1.4 では、JSON が JavaScript オブジェクトを生成し、script がスクリプトを実行します。サーバーから返されたデータは、この値に基づいて解析され、コールバック関数に渡されます。利用可能な値:

"xml": jQuery で処理できる XML ドキュメントを返します。

"html": プレーンテキストの HTML 情報を返します。含まれているスクリプト タグは、DOM に挿入されると実行されます。

"script": プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。 「キャッシュ」パラメータが設定されていない限り。 ''''注意:''''リモート リクエスト (同じドメインの下ではない) を行う場合、すべての POST リクエストは GET リクエストに変換されます。 (読み込みにDOMスクリプトタグを使用するため)

"json": JSON データを返します。

「jsonp」: JSONP 形式。 「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出す場合、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。

"text": プレーンテキスト文字列を返します

jsonp、

jsonp リクエスト内のコールバック関数の名前を書き換えます。この値は、「callback=?」などの GET または POST リクエストの URL パラメーターの「callback」部分を置き換えるために使用されます。たとえば、{jsonp:'onJsonPLoad'} により、「onJsonPLoad」がサーバーに渡されます。

jsonpCallback、

jsonpのコールバック関数名を指定します。この値は、j​​Query によって自動的に生成されるランダムな関数名の代わりに使用されます。これは主に、jQuery が一意の関数名を生成できるようにして、リクエストの管理やコールバック関数とエラー処理の提供を容易にするために使用されます。ブラウザで GET リクエストをキャッシュする場合は、このコールバック関数名を指定することもできます。ただし、実際の使用では、この例の showPrice などのコールバック関数を記述する必要はありません。また、jQuery が JSONP の処理時に自動的にコールバック関数を生成し、データを取り出して成功メソッドを呼び出します。次のようになります:

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

関数 success_jsonpCallback(データ) { 成功(データ) }

上記がこの記事の全内容です。jsonp について詳しく理解できましたか?ご質問がございましたら、メッセージを残してください。一緒に話し合います。