JSONPとは何か、JSONとJSONPの関係と違いを詳しく解説-jsチュートリアル-php.cn

AJAX に関して言えば、必然的に 2 つの疑問に直面するでしょう

1 つ目は、AJAX がデータの交換にどのような形式を使用するかということです。

2 つ目は、クロスドメイン要件を解決する方法です。

これら 2 つの問題には現在、さまざまな解決策があります。たとえば、データはカスタム文字列または XML で記述でき、クロスドメインの問題はサーバー側プロキシを通じて解決できます。

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

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

JSONとは何ですか?

前に簡単に説明したように、JSON はテキストベースのデータ交換方法、またはデータ記述形式です。それを選択するかどうかに関係なく、まずその利点に注意を払う必要があります。

JSON の利点:

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

Javascript ネイティブサポート、ほとんどすべてのバックエンド言語がサポートされています。

占有文字数が非常に少ない軽量のデータ形式で、特に次のような用途に適しています。インターネット送信;

XML ほど明確ではありませんが、適切なインデントの後でも識別は容易です

データ構造を知っていれば、もちろん、JSON の欠点もあります。ありますが、著者の意見では、実際には重要ではないため、個別に説明しません。

JSON の形式またはルール:

JSON は、XML で実行できることはすべて実行できるため、クロスプラットフォームという点では完全に同等です。

JSON には、中括弧 {} と角括弧 [] の 2 つのデータ型記述子しかありません。残りの英語のコロンはマッピング文字、英語のカンマは区切り文字、英語の二重引用符 "" は定義文字です。

中括弧 {} は「異なるタイプの順序付けされていないキーと値のペア」のセットを説明するために使用され (各キーと値のペアは OOP 属性の説明として理解できます)、角括弧 [] は一連の「タイプのキーと値のペア」を説明するために使用されます。「異なるタイプの順序付けされていないキーと値のペア」。「順序付けされたデータコレクション」（OOP に対応できる配列）。

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

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

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

JSON の例

// 描述一个人
var person = {
    "Name": "Bob",
    "Age": 32,
    "Company": "IBM",
    "Engineer": true
}
// 获取这个人的信息
var personAge = person.Age;
// 描述几个人
var members = [
    {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    },
    {
        "Name": "John",
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
    },
    {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
    }
]
// 读取其中John的公司名称
var johnsCompany = members[1].Company;
// 描述一次会议
var conference = {
    "Conference": "Future Marketing",
    "Date": "2012-6-1",
    "Address": "Beijing",
    "Members": 
    [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
}
// 读取参会者Henry是否工程师
var henryIsAnEngineer = conference.Members[2].Engineer;

ログイン後にコピー

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

JSONPとは何ですか?

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

実際、インターネット上には JSONP についての説明がたくさんありますが、それらはすべて同じであり、初めて使用する多くの人にとっては少し難しいです。理解してください。自分なりの方法で問題を説明して、役立つかどうかを確認してください。

一般的なファイルに対する Ajax の直接リクエストには、静的ページ、動的 Web ページ、Web サービス、WCF のいずれであっても、クロスドメインの不正アクセスの問題が存在することがよく知られています。クロスドメインリクエストは許可されていません

しかし、Web ページ上で js ファイルを呼び出す場合、それがクロスドメインであるかどうかに影響されないこともわかりました (それだけでなく、すべてのタグがクロスドメインであることもわかりました) 「src」属性には、

人気のチュートリアル

詳細>