Javascript

ajax、json、jsonpの違い



Difference Between Ajax



まず、ajax、json、jsonpの比較

  1. ajaxに関する2つの問題
    1）ajaxはどの形式でデータを交換しますか？
    2）クロスドメイン要件を解決する方法
    データは、カスタム文字列またはXMLでクロスドメインで記述されます
    クロスドメインはサーバープロキシで解決できます



  2. Ajaxの理解
    1）Ajaxは、バックグラウンドでhttpリクエストと非同期通信を送信するためのテクノロジーです。バックグラウンドと通信してデータと情報を取得します。原則は、xmlhttpオブジェクトをインスタンス化し、このオブジェクトを使用してバックグラウンドと通信することです。 。 ajax通信のプロセスは、後続のjavascriptの実行に影響を与えないため、非同期を実装します
    2）完全なAJAXリクエストの手順：
    XMLHttpRequestオブジェクトのインスタンス化
    サーバーに接続しています
    リクエストを送信
    応答データを受信する
    3）Ajaxソリューション：
    jsonは、情報フォーマットを説明するデータ交換フォーマット「ダークナンバー」です。
    jsonpは、非公式のクロスドメインデータインタラクションプロトコルであり、両当事者が合意した「参加モード」の情報配信方法であり、クロスドメインに使用できます。
    4）ajaxの部分的な更新
    ajaxは部分更新を実装できます。これは更新なしとも呼ばれます。更新なしはページ全体が更新されないことを意味します。部分更新のみです。
    ajaxは、ブラウザのアドレスバーを経由せずに、単独でhttpリクエストを送信できるため、ページ全体が更新されることはありません。
    ajaxはバックグラウンドデータを取得し、ページ表示データの一部を更新し、ページの部分的な更新を行います
    5）データインターフェース
    データインターフェイスは、バックグラウンドプログラムによって提供されます。 URLアドレスです。このアドレスにアクセスすると、データが追加、削除、変更、およびチェックされます。最後に、json形式のデータが返されます。操作情報、形式はテキスト、xmlなどにすることもできます。
    6）同一生成元ポリシー
    Ajaxが要求したページまたはリソースは、同じドメイン内のリソースのみであり、他のドメインのリソースではありません。これは、ajaxを設計する際のセキュリティ上の考慮事項に基づいています。
    7）ajaxの書き方：
    使い方：

$.ajax({ url:'Request address', type: 'Request method: default is'GET', commonly used there'POST' ', dataType: 'Set the returned data format, commonly used is 'json'Format, can also be set to'html' ', data: 'Set the data sent to the server', success: 'Set the callback function after the request is successful', error: 'Set the callback function after the request failed', async: 'Set whether it is asynchronous, the default value is 'true', indicates asynchronous' })

パラメータの説明：
URLリクエストアドレス
タイプリクエストメソッド。デフォルトは「GET」で、一般的に使用されるのは「POST」です。
dataType返されるデータ形式を、通常は「json」形式で、または「html」として設定します
dataは、サーバーに送信されるデータを設定します
successリクエストが成功した後、コールバック関数を設定します
エラーリクエストが失敗した後にコールバック関数を設定します
非同期設定は非同期です。デフォルト値は「true」です。これは非同期を意味します。
8）$.ajaxリクエスト方法により、省略可能$.getまたは$.post方法



$.get('/change_data', {'code':300268}, function(dat){ alert(dat.name) }) $.post('/change_data', {'code':300268}, function(dat){ alert(dat.name) })

  1. Jsonの理解
    1）jsonは、JavaScript Object Notation、テキストベースのデータ交換またはデータ記述形式、一般的な文字列データ形式、軽量のデータ交換形式であり、XMLよりも小さく、高速で、解析が簡単です。
    2）jsonの利点
    プレーンテキストに基づいて、クロスプラットフォーム配信は非常に簡単です
    javascriptネイティブサポート、ほぼすべてのバックエンド言語サポート
    非常に少ない文字数を占める軽量のデータ形式で、特にインターネット配信に適しています
    より読みやすく、必ずしも一目でxmlである必要はありませんが、妥当なインデントの後でも簡単に識別できます
    もちろん、書き込みと解析は簡単です。前提はデータ構造を知っていることです。
    3）jsonは、非常に簡単な方法でデータ構造を記述します。 xmlはそれをすべて行うことができます。
    4）json形式またはルール
    jsonデータ2つのデータ型中括弧{}と角括弧[]残りの英語のコロンは区切り文字ですコロン：はマップ文字です英語の二重引用符 ''は区切り文字です
    {}は、さまざまなタイプの順序付けされていないキーと値のペアのセットの説明です。各キーと値のペアは、OOPの属性の説明として理解されます。
    []は、同じタイプの順序付けられたデータのセットを記述するコレクションです。
    {}異なるタイプの順序付けされていないキーと値のペアおよび[]同じタイプの順序付けられたコレクションには、コンマで区切られた複数のサブアイテムがあります
    キーと値のペアは英語のコロンで区切られます。推奨されるキー名は、異なる言語の解析のために英語の二重引用符 ''で囲まれています。
    json内の一般的なデータ型は文字列です（他の目的には二重引用符を使用する必要があります）。数値ブール日付null、日付は特別です

  2. Jsonpの理解
    1）jsonpの理由
    ajaxは、通常のファイルに許可なくクロスドメインアクセスを要求します（クロスドメイン要求が許可されていない限り、静的ページ、動的ページ、Webサービス、wcf）
    Webページでのjsファイルの呼び出しは、クロスドメインの影響を受けません（src属性を持つすべてのタグにはクロスドメイン機能がありますscript img iframe）
    純粋なWeb（ActiveXコントロール、サーバープロキシ、H5 Websocketなど）を介してドメイン全体のデータにアクセスする可能性は1つだけ、つまりリモートサーバーで管理しようとする可能性があると判断できます。クライアント呼び出しとさらなる処理のために、データをjs形式のファイルにロードします
    jsonの純粋な文字形式は、複雑なデータを簡潔に記述することができ、jsによってネイティブにサポートされています。
    Webクライアントは、呼び出し元のスクリプトと同じ方法で、クロスドメインサーバー上で動的に生成されたjs形式ファイル（サフィックス.json）を呼び出します。サーバーがjsonファイルを動的に生成する理由は、クライアントを使用するためです。必要なデータがロードされます。
    クライアントがjsonファイルを正常に呼び出した後、クライアントは必要なデータを取得する必要があります。残りのデータは、彼自身のニーズに応じて処理および表示されます。リモートデータを取得するこの方法は、ajaxと非常によく似ています。
    クライアントによるデータの使用を容易にするために、非公式の転送プロトコルjsonpが徐々に形成されます。
    プロトコルの主なポイントの1つは、ユーザーがコールバックパラメーターをサーバーに渡せるようにすることです。サーバーがデータを返すとき、コールバックパラメーターはjsonデータをラップする関数名として使用されるため、クライアントは自由に独自の関数をカスタマイズして、返されたデータを自動的に処理できます。
    2）jsonpは、ドメイン間でhttpリクエストを送信できるデータ通信形式です。 ajaxに埋め込むことができます。原則は、スクリプトタグを使用して、ドメイン間でリソースをリンクすることです。
    3）JSONPは、コールバック関数とデータの2つの部分で構成されています。コールバック関数は通常、ブラウザーによって制御され、パラメーターとしてサーバーに送信されます（もちろん、コールバック関数の名前を固定することもできます。ただし、クライアントとサーバーの名前は同じである必要があります）。サーバーが応答すると、サーバーは関数とデータを文字列リターンに入れます。
    4）JSONPリクエストプロセス：
    リクエストフェーズ：ブラウザはスクリプトタグを作成し、そのsrc値を割り当てます
    リクエストの送信：スクリプトのsrcに値を割り当てると、ブラウザはリクエストを開始します。
    データ応答：サーバーは、返されるデータをパラメーターおよび関数名として返します（ 'jsonpCallback（{name：‘ abc ’}）'に類似した形式）。ブラウザが応答データを受信すると、要求はスクリプトによって開始されるため、jsonpCallbackメソッドを直接呼び出してパラメータを渡すのと同じです。
    5）JSONPの原則：
    XHRオブジェクトの代わりに、クライアント側でスクリプトタグを動的に作成し、サーバーに要求を行うためにscript.srcを指定します。必要なデータを返すことに加えて、要求されたPHPページに指定された関数名を入力する必要があります
    6）jsonpはgetリクエストのみをサポートし、ajaxはgetリクエストとpostリクエストをサポートします
    7）Ajaxは、同じドメイン内のデータまたはリソースのみをリクエストできます。ドメイン間でデータをリクエストする必要がある場合、jsonpテクノロジーを使用する必要がある場合、jsonpはドメイン間でデータをリクエストできます。その原則は主に利用されます

5.5。 本質的なコアとajaxとjsonpの違い
1）Ajaxとjsonpは同じ方法で呼び出され、目的はURLを要求することであり、サーバーから返されたデータが処理されるため、jqueryおよびextフレームワークはjsonpをajaxとして使用します。カプセル化の一形態
2）大幅に異なる
ajaxの中核は、xmlHttpRequestを介して非ページコンテンツを取得することです
jsonpの中核は、サーバーが提供するjsスクリプトを呼び出すためのスクリプトタグを動的に追加することです。
3）識別接触
クロスドメインについてではありません
ajaxはサーバープロキシのようなクロスドメインです
jsonpは、同じドメイン内のデータの取得を除外しません。
4）jsonpは方法または必須ではないプロトコルであり、ajaxはデータを渡すためにjson形式を使用する必要はありません
5）ajaxデータインターフェースとjsonpデータインターフェースの違い
データを返すためのインターフェースを開発します。一般的なajaxインターフェースの場合は、インターフェースがデータ文字列をjson形式で直接返すようにします。このインターフェースのデータは、ドメイン間で要求することはできません。ドメイン間でデータをリクエストするには、jsonpインターフェースを開発し、jsonpインターフェースを開発し、「callback」キーに対応する値であるリクエストアドレスのパラメーターを取得してから、この値とjsonデータをアセンブルする必要があります。関数呼び出しフォームに。文字列が返され、jsonpインターフェースが完成します。このキーと値のペアは、$。ajax関数によって自動的に生成されます。
一般的なインターフェースによって返されるデータ形式：
‘{“iNum”:12,’sTr’:’abc’}’
jsonpによって返されるデータフォーム：
‘jQuery1124018787969015631711_1522330257607({“iNum”:12,”sTr”:”abc”})’