ホームページ >ウェブフロントエンド >jsチュートリアル >json と jsonp とは何ですか、jQuery の json の例については、detail_json で説明します。
json と jsonp とは何ですか、jQuery の json の例については、detail_json で説明します。
- WBOYオリジナル
- 2016-05-16 17:46:531198ブラウズ
JSON とは何ですか?
前に簡単に説明したように、JSON はテキストベースのデータ交換方法であるか、データ記述形式であるかにかかわらず、まずその利点に注意する必要があります。
JSON の利点:
1. プレーン テキストに基づいて、クロスプラットフォームの送信が非常に簡単です。
2. ほとんどすべてのバックグラウンド言語がサポートされています。
3 、占有文字数が非常に少ない軽量のデータ形式で、特にインターネット送信に適しています。
4. XML ほど明確ではありませんが、適切なインデントを使用すれば識別するのは簡単です。 ;
5. もちろん、データ構造を知っていれば、記述と解析は簡単です。
JSON には確かに欠点がありますが、作成者の意見では、それらは実際には重要ではないため、個別に説明することはありません。
JSON 形式またはルール :
JSON は、XML で実行できるすべてのことを実行できるため、どちらもクロスプラットフォームです。
1. JSON には、中括弧 {} と角括弧 [] の 2 つのデータ型記述子のみがあります。残りの英語のコロンはマッピング文字、英語のカンマは区切り文字、英語の二重引用符 "" は定義文字です。
2. 中括弧 {} は「さまざまな種類の順序付けされていないキーと値のペアのセット」を記述するために使用され (各キーと値のペアは OOP 属性の説明として理解できます)、角括弧 [] が使用されます。 " "同じタイプの順序付けされたデータ コレクション" (OOP 配列に対応する可能性があります) のセットを説明します。
3. 上記 2 つのセットに複数のサブ項目がある場合は、カンマで区切る必要があります。
4. キーと値のペアは英語のコロン: で区切られ、さまざまな言語の解析を容易にするために、キー名に英語の二重引用符 "" を追加することをお勧めします。
5. JSON 内で一般的に使用されるデータ型は、文字列、数値、ブール値、日付、および null だけです。文字列は二重引用符で囲む必要があり、残りのデータ型は使用されません。はい、ここでは詳しく説明しません。クライアントに日付で並べ替える機能がない場合は、日付と時刻を文字列として直接渡すだけで、多くの手間が省けます。
JSON インスタンス:
// 人物の説明
var person = {
"名前": "ボブ",
"年齢": 32,
"会社": "IBM",
" Engineer": true
}
// この人の情報を取得します
var personAge = person.Age;
// 複数の人物を説明します
var members = [
{
"名前" : "ボブ"、
"年齢": 32、
"会社": "IBM"、
"エンジニア": true
}、
{
"名前" : " ジョン"、
"年齢": 20、
"会社": "Oracle"、
"エンジニア": false
}、
{
"名前": " Henry" ,
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
// John の会社名を読み上げます
var johnsCompany = members[1].Company;
//カンファレンスについて説明します
var Conference = {
"カンファレンス": "将来のマーケティング",
"日付": "2012-6 - 1"、
"住所": "北京"、
"メンバー":
[
{
"名前": "ボブ"、
"年齢": 32、
「会社」: 「IBM」、
「エンジニア」: true
}、
{
「名前」: 「ジョン」、
「年齢」: 20、
"会社": "Oracle"、
"エンジニア": false
}、
{
"名前": "ヘンリー"、
"年齢": 45、
" 会社": "Microsoft",
"Engineer": false
}
]
}
// 参加者ヘンリーがエンジニアかどうかを読み取ります
var henryIsAnEngineer = Conference.Members[ 2 ].エンジニア
JSONP とは何ですか?
実際、JSONP についてはインターネット上にたくさんの説明がありますが、それらはどれも同じで曖昧であり、初めて使う人にとっては少し理解しにくいものです。この問題を私なりの方法で説明してみてください。
1. 一般的なファイルに対する Ajax の直接リクエストには、静的ページ、動的 Web ページ、Web サービス、または WCF である限り、クロスドメインの不正アクセスの問題があります。
2. ただし、Web ページ上で js ファイルを呼び出す場合、それがクロスドメインであるかどうかの影響を受けないこともわかりました。 "src" 属性を持つすべてのタグには、
3 などのクロスドメイン機能があることがわかります。現段階の純粋な Web 側 (ActiveX コントロール、サーバー側プロキシ、将来の HTML5 Websocket などは含まれていません) ドメインを越えてデータにアクセスする可能性は 1 つだけあり、それはデータを js にロードしようとすることです。
4. 純粋な JSON ファイルが存在することはすでにわかっています。さらに優れているのは、JSON もネイティブに記述できることです。 js でサポートされているため、クライアントはこの形式のデータをほぼ希望どおりに処理できます。
5. このようにして、ソリューションを提供する準備が整いました。クライアントは、動的に生成された js 形式のファイル (通常は JSON を使用して) を呼び出します。 suffix) を呼び出しスクリプトとまったく同じ方法でクロスドメイン サーバーに追加します。サーバーが JSON ファイルを動的に生成する理由は、クライアントが必要とするデータを保存するためであることは明らかです。
6. クライアントは JSON ファイルの呼び出しに成功したら、残りは必要に応じて処理して表示します。この方法は AJAX に非常によく似ていますが、実際は AJAX です。同じではありません。
7. クライアントがデータを使用しやすくするために、JSONP と呼ばれる非公式の送信プロトコルが徐々に形成されてきました。このプロトコルの重要なポイントの 1 つは、ユーザーがサーバーにコールバック パラメーターを渡せるようにすることです。その後、サーバーはデータを返します。このコールバック パラメーターは JSON データをラップする関数名として使用され、クライアントが独自の関数をカスタマイズして返されたデータを自動的に処理できるようにします。
コールバック パラメーターの使用方法がまだ少し曖昧な場合は、後で具体的な例を使用して説明します。
JSONP の特定のクライアント実装:
jQuery、extjs、または jsonp をサポートするその他のフレームワークであっても、舞台裏で行われる作業は同じです。説明しましょう。クライアントでの jsonp の実装を段階的に説明します:
1. クロスドメイン js ファイル内のコード (もちろん、Web スクリプトのセキュリティ ポリシーに準拠している) であっても、Web ページは無条件に実行できることがわかっています。 。
remoteserver.com のルート ディレクトリに次のコードを含む Remote.js ファイルがあります:
alert('I am a remote file');
ローカル サーバー localserver.com には次のような jsonp.html ページ コードがあります。 :
間違いなく、ページ A プロンプト ウィンドウがポップアップ表示され、クロスドメイン呼び出しが成功したことが示されます。
2. 次に、jsonp.html ページで関数を定義し、remote.js にデータを渡して呼び出します。
jsonp.html ページのコードは次のとおりです:
var localHandler = function(data){
alert('私はクロスドメインのremote.jsファイルから呼び出すことができるローカル関数であり、データはリモート js によると: ' data.result);
前に簡単に説明したように、JSON はテキストベースのデータ交換方法であるか、データ記述形式であるかにかかわらず、まずその利点に注意する必要があります。
JSON の利点:
1. プレーン テキストに基づいて、クロスプラットフォームの送信が非常に簡単です。
2. ほとんどすべてのバックグラウンド言語がサポートされています。
3 、占有文字数が非常に少ない軽量のデータ形式で、特にインターネット送信に適しています。
4. XML ほど明確ではありませんが、適切なインデントを使用すれば識別するのは簡単です。 ;
5. もちろん、データ構造を知っていれば、記述と解析は簡単です。
JSON には確かに欠点がありますが、作成者の意見では、それらは実際には重要ではないため、個別に説明することはありません。
JSON 形式またはルール :
JSON は、XML で実行できるすべてのことを実行できるため、どちらもクロスプラットフォームです。
1. JSON には、中括弧 {} と角括弧 [] の 2 つのデータ型記述子のみがあります。残りの英語のコロンはマッピング文字、英語のカンマは区切り文字、英語の二重引用符 "" は定義文字です。
2. 中括弧 {} は「さまざまな種類の順序付けされていないキーと値のペアのセット」を記述するために使用され (各キーと値のペアは OOP 属性の説明として理解できます)、角括弧 [] が使用されます。 " "同じタイプの順序付けされたデータ コレクション" (OOP 配列に対応する可能性があります) のセットを説明します。
3. 上記 2 つのセットに複数のサブ項目がある場合は、カンマで区切る必要があります。
4. キーと値のペアは英語のコロン: で区切られ、さまざまな言語の解析を容易にするために、キー名に英語の二重引用符 "" を追加することをお勧めします。
5. JSON 内で一般的に使用されるデータ型は、文字列、数値、ブール値、日付、および null だけです。文字列は二重引用符で囲む必要があり、残りのデータ型は使用されません。はい、ここでは詳しく説明しません。クライアントに日付で並べ替える機能がない場合は、日付と時刻を文字列として直接渡すだけで、多くの手間が省けます。
JSON インスタンス:
コードをコピー コードは次のとおりです:
// 人物の説明
var person = {
"名前": "ボブ",
"年齢": 32,
"会社": "IBM",
" Engineer": true
}
// この人の情報を取得します
var personAge = person.Age;
// 複数の人物を説明します
var members = [
{
"名前" : "ボブ"、
"年齢": 32、
"会社": "IBM"、
"エンジニア": true
}、
{
"名前" : " ジョン"、
"年齢": 20、
"会社": "Oracle"、
"エンジニア": false
}、
{
"名前": " Henry" ,
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
// John の会社名を読み上げます
var johnsCompany = members[1].Company;
//カンファレンスについて説明します
var Conference = {
"カンファレンス": "将来のマーケティング",
"日付": "2012-6 - 1"、
"住所": "北京"、
"メンバー":
[
{
"名前": "ボブ"、
"年齢": 32、
「会社」: 「IBM」、
「エンジニア」: true
}、
{
「名前」: 「ジョン」、
「年齢」: 20、
"会社": "Oracle"、
"エンジニア": false
}、
{
"名前": "ヘンリー"、
"年齢": 45、
" 会社": "Microsoft",
"Engineer": false
}
]
}
// 参加者ヘンリーがエンジニアかどうかを読み取ります
var henryIsAnEngineer = Conference.Members[ 2 ].エンジニア
JSONP とは何ですか?
実際、JSONP についてはインターネット上にたくさんの説明がありますが、それらはどれも同じで曖昧であり、初めて使う人にとっては少し理解しにくいものです。この問題を私なりの方法で説明してみてください。
1. 一般的なファイルに対する Ajax の直接リクエストには、静的ページ、動的 Web ページ、Web サービス、または WCF である限り、クロスドメインの不正アクセスの問題があります。
2. ただし、Web ページ上で js ファイルを呼び出す場合、それがクロスドメインであるかどうかの影響を受けないこともわかりました。 "src" 属性を持つすべてのタグには、
3 などのクロスドメイン機能があることがわかります。現段階の純粋な Web 側 (ActiveX コントロール、サーバー側プロキシ、将来の HTML5 Websocket などは含まれていません) ドメインを越えてデータにアクセスする可能性は 1 つだけあり、それはデータを js にロードしようとすることです。
4. 純粋な JSON ファイルが存在することはすでにわかっています。さらに優れているのは、JSON もネイティブに記述できることです。 js でサポートされているため、クライアントはこの形式のデータをほぼ希望どおりに処理できます。
5. このようにして、ソリューションを提供する準備が整いました。クライアントは、動的に生成された js 形式のファイル (通常は JSON を使用して) を呼び出します。 suffix) を呼び出しスクリプトとまったく同じ方法でクロスドメイン サーバーに追加します。サーバーが JSON ファイルを動的に生成する理由は、クライアントが必要とするデータを保存するためであることは明らかです。
6. クライアントは JSON ファイルの呼び出しに成功したら、残りは必要に応じて処理して表示します。この方法は AJAX に非常によく似ていますが、実際は AJAX です。同じではありません。
7. クライアントがデータを使用しやすくするために、JSONP と呼ばれる非公式の送信プロトコルが徐々に形成されてきました。このプロトコルの重要なポイントの 1 つは、ユーザーがサーバーにコールバック パラメーターを渡せるようにすることです。その後、サーバーはデータを返します。このコールバック パラメーターは JSON データをラップする関数名として使用され、クライアントが独自の関数をカスタマイズして返されたデータを自動的に処理できるようにします。
コールバック パラメーターの使用方法がまだ少し曖昧な場合は、後で具体的な例を使用して説明します。
JSONP の特定のクライアント実装:
jQuery、extjs、または jsonp をサポートするその他のフレームワークであっても、舞台裏で行われる作業は同じです。説明しましょう。クライアントでの jsonp の実装を段階的に説明します:
1. クロスドメイン js ファイル内のコード (もちろん、Web スクリプトのセキュリティ ポリシーに準拠している) であっても、Web ページは無条件に実行できることがわかっています。 。
remoteserver.com のルート ディレクトリに次のコードを含む Remote.js ファイルがあります:
コードをコピーしますコードは次のとおりです。
alert('I am a remote file');
ローカル サーバー localserver.com には次のような jsonp.html ページ コードがあります。 :
コードをコピー コードは次のとおりです:
間違いなく、ページ A プロンプト ウィンドウがポップアップ表示され、クロスドメイン呼び出しが成功したことが示されます。
2. 次に、jsonp.html ページで関数を定義し、remote.js にデータを渡して呼び出します。
jsonp.html ページのコードは次のとおりです:
コードをコピーします コードは次のとおりです:
var localHandler = function(data){
alert('私はクロスドメインのremote.jsファイルから呼び出すことができるローカル関数であり、データはリモート js によると: ' data.result);