JsonとJsonpの理論的なサンプルコードを詳しく解説_基礎知識

Json とは何ですか?
JSON (JavaScript Object Notation) は軽量のデータ交換形式です。これは、JavaScript のサブセット (標準 ECMA-262 第 3 版 - 1999 年 12 月) に基づいています。 JSON は、完全に言語に依存しないテキスト形式である
を採用していますが、C 言語ファミリー (C、C、C#、Java、JavaScript、Perl、Python などを含む) と同様の規則も使用します。これらの特性により、JSON は理想的なデータ交換言語になります。人間にとっては読み書きが簡単で、機械にとっては解析と生成が簡単です。
JSON には 2 つの構造があります。
Json は JavaScript では単純にオブジェクトと配列であるため、これら 2 つの構造によってさまざまな複雑な構造を表現できます
1: オブジェクト。 jsでは「{}」で展開された内容として表現されており、データ構造は{key:value,key:value,...}というkey-valueのペア構造になります。オブジェクト指向言語ではKeyが属性になります。 value はオブジェクトの値であり、value は対応する属性値であるため、属性値を取得するための value メソッドは数値、文字列、配列、オブジェクトのいずれかになります。
2. 配列: js の配列は角括弧 "[]" で展開された内容であり、データ構造は ["java", "javascript", "vb",...] であり、値のメソッドはすべての言語と同様に、インデックスを使用して取得します。フィールド値のタイプは数値、文字列、配列、オブジェクトです。
複雑なデータ構造は、オブジェクトと配列の 2 つの構造を介して組み合わせることができます。
JSON の形式またはルール:
JSON は、XML で実行できることはすべて実行できるため、クロスプラットフォームという点では完全に同等です。
1. JSON には、中括弧 {} と角括弧 [] の 2 つのデータ型記述子のみがあります。残りの英語のコロンはマッピング文字、英語のカンマは区切り文字、英語の二重引用符 "" は定義文字です。
2. 中括弧 {} は「さまざまな種類の順序付けされていないキーと値のペア セット」のセットを記述するために使用され (各キーと値のペアは OOP 属性の説明として理解できます)、角括弧 [] は使用されます。 " "同じタイプの順序付けされたデータ コレクション" (OOP 配列に対応する可能性があります) のセットを説明します。
3. 上記 2 つのセットに複数のサブ項目がある場合は、カンマで区切る必要があります。
4. キーと値のペアは英語のコロン: で区切られており、さまざまな言語の分析を容易にするために、キー名を英語の二重引用符 "" で追加することをお勧めします。
5. JSON 内で一般的に使用されるデータ型は、文字列、数値、ブール値、日付、および null だけです。文字列は二重引用符で囲む必要があり、残りのデータ型は非常に特殊であるため、使用されません。はい、ここでは詳しく説明しません。クライアントに日付で並べ替える機能がない場合は、日付と時刻を文字列として直接渡すだけで、多くの手間が省けます。

JSON の例

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

//人物の説明
var person = {
"名前": "aehyok",
"年齢": 25,
"会社": "aehyok",
"Engineer": true
}
//この人の情報を取得します
var PersonAge = Person.Age;
alert(PersonAge);
//複数の人物を説明します
var members = [
{
"名前": "aehyok",
"年齢": 25,
"会社": "aehyok",
"エンジニア": true
} ,
{
"名前": "lqm",
"年齢": 25,
"会社": "Oracle",
"エンジニア": false
},
}
]
// lqm の会社名を読み取ります
var lqmCompany = members[1].Company;
alter(lqmCompany);
// 会議について説明します
var Conference = {
"カンファレンス": "将来のマーケティング",
"日付": "2013-5-22",
"住所": "深セン",
"メンバー":
[
"エンジニア": true
},

"名前": "lqm"、
"年齢": 25、
"会社": "Oracle"、
"エンジニア": false
},
> "名前": "Thl"、
"年齢": 20、
"会社": "Microsoft"、
"エンジニア"：false
🎜>参加者がエンジニアであることがありますか？
Jsonp とは
1. 一般的なファイルに対する Ajax の直接リクエストには、静的ページ、動的 Web を問わず、クロスドメインの不正アクセスの問題があります。ページ、Web サービス、または WCF は、クロスドメイン要求である限り許可されません。
2. ただし、Web ページ上で js ファイルを呼び出す場合は、次の影響を受けないこともわかりました。これはクロスドメインです (それだけでなく、「src」属性を持つすべてのファイルには、 <script>、<img>、<iframe> 、We​​bsocket などのクロスドメイン機能があることもわかりました)。 HTML5 の将来に属するその他のメソッドは含まれません) ドメインを越えてデータにアクセスする可能性は 1 つだけあり、クライアントの呼び出しとさらなる処理のためにリモート サーバー上の js 形式ファイルにデータをロードしようとすることです。 <br> 4. 複雑なデータを簡潔に記述できる JSON と呼ばれる純粋な文字データ形式があることはすでに知っていますが、さらに良いのは、JSON も js でネイティブにサポートされているため、クライアントはほぼこの形式のデータを処理できることです。 <br>5. このようにして、Web クライアントは、呼び出しスクリプトとまったく同じ方法で、クロスドメイン サーバー上で動的に生成された js 形式のファイルを呼び出します。サーバーを動的に生成する必要がある理由は明らかです。JSON ファイルの目的は、クライアントが必要とするデータをロードすることです。 <br>6. クライアントは JSON ファイルの呼び出しに成功したら、残りは必要に応じて処理して表示します。この方法は AJAX に非常によく似ていますが、実際は AJAX です。同じではありません。 <br>7. クライアントがデータを使用しやすくするために、JSONP と呼ばれる非公式の送信プロトコルが徐々に形成されてきました。このプロトコルの重要なポイントの 1 つは、ユーザーがサーバーにコールバック パラメーターを渡せるようにすることです。その後、サーバーはデータを返します。このコールバック パラメーターは JSON データをラップする関数名として使用され、クライアントが独自の関数をカスタマイズして返されたデータを自動的に処理できるようにします。 <br>コールバック パラメーターの使用方法がまだ少し曖昧な場合は、後で具体的な例を使用して説明します。 <br><br>Jsonp クライアント固有の実装<strong>:</strong>1. 最も単純な実装から始めましょう。まず、IIS で 2 つの Web サイトを作成しました。もちろん、1 つのポートは 888 で、もう 1 つは 8888 です。888 をローカル サーバーとして使用し、8888 をリモート サーバーとして使用します。 <br>このような Web ページがローカルにあります<br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="9777" class="copybut" id="copybut9777" onclick="doCopy('code9777')">コードをコピーします<u></u></a> コードは次のとおりです:</span></div> <div class="codebody" id="code9777"><html&gt ;<BR> ></script>





JavaScript ファイルは 8888 の Remote.js ファイルを参照します。

コードをコピー コードは次のとおりです:alert('私はリモート ファイルです' );

ローカル サーバー Web サイトを実行した後の効果は、

これで、最も単純なクロスドメインが成功しました。
2. 1.をベースに修正しましょう。まずコードを見てください。

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

まずローカル ファイルに js 関数を追加し、次にリモート サーバーの js ファイルを呼び出します。

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

aehyok({"result":"I am a リモート js 持ち込まれたデータ"});

これはリモート サーバーの js ファイル内のコードです。
実行後の効果

呼び出しは成功しました。これは、ローカル関数がクロスドメインのリモート js によって正常に呼び出され、リモート js によってもたらされたデータも受信したことを示しています。クロスドメインのリモートデータ取得の目的は基本的に達成されたので非常に満足していますが、リモート js に呼び出す必要があるローカル関数の名前をどのように知らせるのかという別の疑問が生じます。結局のところ、jsonp サーバーは多くのサービス オブジェクトに直面する必要があり、これらのサービス オブジェクトのローカル機能は異なります。下を見てみましょう。

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

私はASPにいます。 mvc3.0 プロジェクトなので、背景はコントローラー内にあります

コードをコピー

コードは次のとおりです: Public String Aehyok () { Return "aehyok ({" result ":" 私はリモート js によってもたらされたデータです "})"); 実行結果は

デバッグを通じて、URL http://localhost:6247/Home/aehyok?callback=aehyok&_=1369235398641 を見つけることができます。
callback=aehyok は、バックグラウンドを呼び出した後、最初に aehyok(data を実行します) を返します。 ）。
その後、success(json)を再度実行します。したがって、ポップアップが 2 つ表示されます。
私は現在 1 つのプロジェクトに取り組んでいますが、原則は同じです。