JSON と JSONP について話しましょう。おそらくあなたは突然_json を理解できるでしょう。

はじめに

Sencha Touch 2 の開発モデルの特性により、そのネイティブなデータ対話動作はほぼ AJAX を通じてのみ実現できます。

もちろん、強力な PhoneGap プラグインを呼び出してパッケージ化することで、100% ソケット通信とローカル データベース機能を実現できます。また、HTML5 WebSocket を介してサーバーとの通信やサーバー プッシュ機能を実現することもできます。ただし、どちらの方法にも制限があり、前者は PhoneGap のサポートを必要とし、後者はユーザー デバイスが WebSocket をサポートする必要があるため、どちらも ST2 の唯一のネイティブ ソリューションとみなされません。

AJAX に関して言えば、必然的に 2 つの疑問に直面することになります。1 つ目は、AJAX がデータの交換にどのような形式を使用するかということです。 2つ目は、クロスドメインのニーズをどのように解決するかということです。これら 2 つの問題には現在、さまざまな解決策があります。たとえば、データはカスタム文字列または XML で記述でき、クロスドメインの問題はサーバー側プロキシを通じて解決できます。

しかし、これまでのところ、最も推奨または推奨されるソリューションは、JSON を使用してデータを送信し、JSONP に依存してドメ​​イン間を移動することです。それがこの記事の内容です。

JSON (JavaScript Object Notation) と JSONP (JSON with Padding) の間には 1 文字の違いしかありませんが、実際にはまったく同じものではありません。JSON はデータ交換形式であり、JSONP は依存関係です。開発者の創意工夫によって作成された非公式のクロスドメイン データ交換プロトコル。最近人気のスパイ映画に例えてみましょう。JSON は地下組織が情報を記述して交換するために使用する「コード」であり、JSONP はコードで記述された情報を仲間に送信するために使用される接続方法です。それを見ましたか？ 1 つは情報の形式を記述することであり、もう 1 つは情報を送信するために双方が合意した方法です。

私たちはただ雑談しているだけなので、独断的な方法でそれを伝えるのではなく、開発者がそれを使用することを選択すべきかどうか、またどのように使用するかを理解できるようにすることに重点を置きます。

JSON とは

前に簡単に説明したように、JSON はテキストベースのデータ交換方法、またはデータ記述形式です。最初にそれを選択する必要があります。それが持つ利点に。

JSON の利点:

1. プレーンテキストに基づいて、クロスプラットフォーム送信が非常に簡単です。

2. Javascript ネイティブ。サポート、背景 ほぼすべての言語がサポートされています。

3. 占有文字数が非常に少ない軽量のデータ形式で、特にインターネット送信に適しています。 XML 一目瞭然ですが、適切なインデントの後でも識別は簡単です。もちろん、データ構造を知っていることが前提です。 >
もちろん、JSON の欠点もありますが、著者の意見では、それは本当に重要ではないので、個別に説明しません。


JSON 形式またはルール:


JSON は、XML で実行できることはすべて実行できるため、クロスプラットフォームです。 2 つは互いに完全に区別できません。
1. JSON には、中括弧 {} と角括弧 [] の 2 つのデータ型記述子のみがあり、残りの英語のコロンはマッピング文字、英語のカンマは区切り文字、英語の二重引用符 "" は区切り文字です。
2. 中括弧 {} は、一連の「さまざまなタイプの順序付けされていないキーと値のペア セット」を記述するために使用され (各キーと値のペアは OOP 属性の説明として理解できます)、角括弧 [ ] は、「同じタイプの順序付けられたデータ コレクション」のセット (OOP 配列に対応する可能性があります) を記述するために使用されます。

3. 上記 2 つのセットに複数のサブ項目がある場合は、カンマで区切る必要があります。

4. キーと値のペアは英語のコロン: で区切られており、さまざまな言語の分析を容易にするために、キー名を英語の二重引用符 "" で追加することをお勧めします。

5. JSON 内で一般的に使用されるデータ型は、文字列、数値、ブール値、日付、および null です。文字列は二重引用符で囲む必要があり、残りは使用されません。ここでは詳細には立ち入りませんが、クライアントに日付による並べ替えの機能要件がない場合は、日付と時刻を文字列として直接渡すだけで、多くの手間が省けることをお勧めします。


JSON の例:




コードをコピー

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

//人物の説明
var person = {
"名前": "Bob",
"年齢": 32,
"会社": "IBM",
"Engineer": true
}
// この人の情報を取得します
var personAge = person.Age;
// 複数の人物を説明します
var members = [
{
"名前": "ボブ"、
"年齢": 32、
"会社": "IBM"、
"エンジニア": true
}、
{
"名前": "ジョン"、
"年齢": 20、
"会社": "Oracle"、
"エンジニア": false
}、
{
" 名前": "ヘンリー",
"年齢": 45,
"会社": "マイクロソフト",
"エンジニア": false
}
]
// それらの中から読む, ジョンの会社名
var johnsCompany = members[1].Company
//カンファレンスの説明
var Conference = {
"カンファレンス": "将来のマーケティング",
"日付 " : "2012-6-1"、
"住所": "北京"、
"メンバー":
[
{
"名前": "ボブ"、
"年齢": 32、
"会社": "IBM"、
"エンジニア": true
}、
{
"名前": "ジョン"、
"年齢 " : 20、
"会社": "Oracle"、
"エンジニア": false
}、
{
"名前": "ヘンリー"、
"年齢": 45 ,
"Company": "Microsoft",
"Engineer": false
}
]
}
// 参加者 Henry がエンジニアかどうかを読み取ります
var henryIsAnEngineer = Conference.Members[2].Engineer;

JSON については以上です。詳細については、開発プロセス中に詳細に検討するための情報を参照してください。

JSONP とは

まず、JSONP がどのように生成されたかについて話しましょう:

実際、JSONP についてはインターネット上にたくさんの説明がありますが、どれも同じで曖昧です。初めての人にとっては少しわかりにくいです。この問題を私なりの方法で説明してみてください。

1. よく知られている問題ですが、通常のファイルに対する Ajax 直接リクエストには、静的ページ、動的 Web ページ、Web サービス、または WCF である限り、クロスドメインの不正アクセスの問題があります。クロスドメインリクエストであるため、許可されていません。

2. ただし、Web ページ上で js ファイルを呼び出す場合、クロスドメインであるかどうかの影響を受けないこともわかりました (それだけでなく、「src」属性を持つタグはすべてクロスであることもわかりました) -ドメイン機能 (<script>、<img src="/static/imghwm/default1.png" data-src="http://remoteserver.com/remote.js" class="lazy" alt="JSON と JSONP について話しましょう。おそらくあなたは突然_json を理解できるでしょう。" >、<iframe> など);</script>

3. 現段階では、純粋な Web (ActiveX コントロール、サーバー側プロキシ、および将来の HTML5 Websocket は含まれません) を通じてドメインを越えてデータにアクセスしたい場合、可能性は 1 つだけであると判断できます。つまり、サーバーはクライアントの呼び出しとさらなる処理のためにデータを js 形式のファイルにロードしようとします。

4. 複雑なデータを簡潔に記述できる JSON と呼ばれる純粋な文字データ形式があることはすでに知っていますが、さらに良いのは、JSON も js でネイティブにサポートされているため、クライアントはほぼこの形式のデータを処理できることです。必要に応じて;

5. このようにして、Web クライアントは、呼び出しスクリプトとまったく同じ方法で、クロスドメイン サーバー上で動的に生成された JS 形式のファイルを呼び出します (通常は JSON をサフィックスとして使用します)。サーバーが JSON ファイルを動的に生成する目的は、クライアントが必要とするデータをそのファイルにロードすることであることは明らかです。

6. クライアントは、JSON ファイルの呼び出しに成功したら、必要なデータを取得します。残りは、必要に応じてデータを処理して表示します。リモート データを取得するこの方法は、AJAX に非常によく似ています。実際には同じではありません。

7. クライアントがデータを使用しやすくするために、非公式の送信プロトコルが徐々に形成されてきました。このプロトコルの重要なポイントの 1 つは、ユーザーがサーバーにコールバック パラメーターを渡せるようにすることです。その後、サーバーはデータを返します。このコールバック パラメーターは JSON データをラップする関数名として使用され、クライアントが独自の関数をカスタマイズして返されたデータを自動的に処理できるようにします。

コールバックパラメータの使用方法がまだ曖昧な場合は、後で具体的な例を使用して説明します。

JSONP クライアントの特定の実装:

jQuery、ExtJs、または jsonp をサポートする他のフレームワークに関係なく、それらがバックグラウンドで行う作業は同じです。クライアントでの jsonp の実装について順を追って説明します。

1. クロスドメイン js ファイル内のコード (もちろん Web スクリプトのセキュリティ ポリシーに準拠している) であっても、Web ページは無条件に実行される可能性があることがわかっています。

以下のコードを含むremote.js ファイルがremoteserver.comのルートディレクトリにあります:

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

alert('私はリモート ファイルです') >

コードをコピー

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

;script type="text/javascript">
;/body>



間違いなく、クロスドメイン呼び出しが成功したことを示すプロンプト ウィンドウがページに表示されます。

2. 次に、jsonp.html ページで関数を定義し、remote.js のデータを渡してその関数を呼び出します。

jsonp.html ページのコードは次のとおりです:

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

> ;






remote.js ファイルのコードは次のとおりです:

コードをコピー

コードは次のとおりです: localHandler({"result":"私はリモート JS データによってもたらされます"});

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

3. 賢明な開発者は、サーバーによって提供される js スクリプトが動的に生成される限り、呼び出し元はパラメーターを渡してサーバーに「XXX 関数の js コードを呼び出したいので、お願いします」と伝えることができると簡単に考えることができます。返してください」と要求されるため、サーバーはクライアントのニーズに応じて js スクリプトを生成し、応答できます。

jsonp.html ページのコードを確認します。




コードをコピーします

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

今回はコードが大幅に変更されており、リモート js ファイルを直接記述することはなくなりましたが、これは jsonp クライアント実装の核心部分でもあります。 jsonp呼び出しのプロセス全体。

コード パラメータが呼び出し元の URL に渡されて、チェックしたいのは CA1998 便の情報であることをサーバーに伝え、コールバック パラメータはローカル コールバック関数が FlightHandler という名前であることをサーバーに伝えていることがわかります。ので、入れてください。 クエリ結果は、呼び出すためにこの関数に渡されます。

OK、サーバーは非常に賢いです。flightResult.aspx と呼ばれるこのページは、次のようなコードを生成し、jsonp.html に提供します (サーバー側の実装はここでは説明しません。これには何もありません)。最終的には、文字列の結合です):

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

flightHandler({
" コード": "CA1998",
"価格": 1780,
"チケット": 5
}); 🎜>
flightHandler 関数に渡されるのは、フライトの基本情報を記述する json であることがわかります。ページを実行すると、プロンプト ウィンドウが正常に表示され、jsonp 実行プロセス全体が正常に完了します。

4. ここまでで、jsonp のクライアント実装原理は理解できたと思います。残っているのは、コードがユーザー インターフェイスと対話して複数の繰り返し呼び出しを実行できるようにコードをカプセル化する方法です。

え？ jQuery を使用していて、jQuery が jsonp 呼び出しをどのように実装するかを知りたいですか?それでは、最後まで実行して、jsonp を使用した別の jQuery コードを示します (返された jsonp の結果が変更されていないと仮定して、上記のフライト情報クエリの例を引き続き使用します):

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