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);
コードをコピー
コードをコピーします
flightHandler({
"コード": "CA1998",
"価格": 1780,
"チケット": 5
前に簡単に説明したように、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);
コードは次のとおりです: localHandler({"result":"I リモート js によってもたらされたデータです"}); 実行後、ページにプロンプト ウィンドウが正常に表示され、ローカルの JS が正常に表示されたことを確認します。関数はクロスドメイン リモート JS によって正常に呼び出され、リモート JS も受信されました。クロスドメインのリモートデータ取得の目的は基本的に達成されたので非常に満足していますが、リモート js に呼び出す必要があるローカル関数の名前をどのように知らせるのかという別の疑問が生じます。結局のところ、jsonp サーバーは多くのサービス オブジェクトに直面する必要があり、これらのサービス オブジェクトのローカル機能は異なります。下を見てみましょう。
3. 賢明な開発者は、サーバーによって提供される js スクリプトが動的に生成される限り、呼び出し元はパラメーターを渡してサーバーに「js セクションで XXX 関数を呼び出したい」と伝えることができると簡単に考えることができます。コードを返してください」と要求されるため、サーバーはクライアントのニーズに応じて js スクリプトを生成し、応答できます。
jsonp.html ページのコードを確認します:
jsonp.html ページのコードを確認します:
コードをコピーします
コードは次のとおりです: < ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
var FlightHandler = function(data){ alert('クエリしたフライト結果は次のとおりです: 料金' data.price 'yuan , 'Yipiao' data.tickets ' Zhang. ');
}// jsonp サービスの URL アドレスを指定します (アドレスの種類に関係なく、最終的な戻り値が返されます);は JavaScript コードの一部です)
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// スクリプト タグを作成し、その属性を設定します
var script = document.createElement( 'script');
script.setAttribute('src', url);
// script タグを先頭に追加すると、呼び出しが開始されます
document.getElementsByTagName ('head')[0].appendChild (スクリプト);
/html>
今回はコードが大幅に変更され、リモート js ファイルを直接書き込むようになりましたが、これは jsonp クライアント実装の核となる部分でもあります。この例では、jsonp 呼び出しのプロセス全体を完了する方法に焦点を当てます。
コード パラメータが呼び出し元の URL に渡されて、チェックしたいのは CA1998 便の情報であることをサーバーに伝え、コールバック パラメータはローカル コールバック関数の名前が FlightHandler であることをサーバーに伝えていることがわかります。クエリ結果を渡します この関数を呼び出します。
OK、サーバーは非常に賢いです。flightResult.aspx と呼ばれるこのページは、次のようなコードを生成し、jsonp.html に提供します (サーバー側の実装はここでは説明しません。最終的には、文字列を結合します。
コードをコピーします。
コードは次のとおりです。 >
}// jsonp サービスの URL アドレスを指定します (アドレスの種類に関係なく、最終的な戻り値が返されます);は JavaScript コードの一部です)
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// スクリプト タグを作成し、その属性を設定します
var script = document.createElement( 'script');
script.setAttribute('src', url);
// script タグを先頭に追加すると、呼び出しが開始されます
document.getElementsByTagName ('head')[0].appendChild (スクリプト);
/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 の結果が変更されていないと仮定して、上記のフライト情報クエリの例を引き続き使用します):
無題ページ
flightHandler 関数に渡されるのは、フライトの基本情報を記述する json であることがわかります。ページを実行すると、プロンプト ウィンドウが正常に表示され、jsonp 実行プロセス全体が正常に完了します。
4. ここまでで、jsonp のクライアント実装原理が理解できたと思います。残っているのは、コードがユーザー インターフェイスと対話して複数の繰り返し呼び出しを実行できるようにコードをカプセル化する方法です。
え？ jQuery を使用していて、jQuery が jsonp 呼び出しをどのように実装するかを知りたいですか?それでは、最後まで実行して、jsonp を使用した別の jQuery コードを示します (返された jsonp の結果が変更されていないと仮定して、上記のフライト情報クエリの例を引き続き使用します):
コードをコピー コードは次のとおりです:
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前ByDDD
Will R.E.P.O.クロスプレイがありますか？
1 か月前By尊渡假赌尊渡假赌尊渡假赌
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
