フロントエンドとバックエンドの両方の観点から jsonp のクロスドメイン アクセスを分析する

php5 で合法性を検証するための拡張機能。PHP5.2 では、組み込みの拡張機能フィルターを通じて合法性を検証できます。

1. クロスドメイン アクセスとは

例: Web サイト A では、Ajax を使用して Web サイト B の特定のコンテンツを取得したいと考えています。 Web サイト A と Web サイト B が同じドメインにない場合、クロスドメイン アクセスの問題が発生します。 2 つのドメイン名がドメイン名を越えてリクエストを送信したり、データをリクエストしたりすることはできません。そうしないと安全ではありません。クロスドメイン アクセスは同一オリジン ポリシーに違反します。同一オリジン ポリシーの詳細については、次のリンクをクリックしてください: Same-origin_policy

つまり、同一オリジン ポリシーでは、ブラウザーの ajax はHTML ページと同じオリジン (同じドメイン名または IP) リソースにアクセスします。

2. JSONP とは

JSONP (JSON with Padding) は、主流のブラウザーによるクロスドメイン データ アクセスの問題を解決するために使用できる JSON の「使用モード」です。

同一生成元ポリシーにより、一般に、server1.example.com にある Web ページは、server1.example.com および HTML 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素以外のサーバーと通信できません。は例外です。 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素のこのオープン戦略を利用して、Web ページは他のソースから動的に生成された JSON データを取得できます。この使用パターンはいわゆる JSONP です。 JSONP でキャプチャされたデータは JSON ではなく、JSON パーサーで解析されるのではなく、JavaScript インタープリターで実行される任意の JavaScript です。より具体的な原則については、より多くのスペースを必要として説明します。また、自分で Baidu にアクセスすることもできます。

3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素是一个例外。利用3f1c4e4b6b16bbbd69b2ee476dc4f83a元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。更具体的原理需要更多篇幅的讲解，小伙伴可以自行去百度。

三、JSONP的使用

前端的使用示例

JQuery Ajax对JSONP进行了很好的封装，我们使用起来很方便。前端示例：

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

需要注意的地方是：

• dataType，该参数必须要设置成jsonp

• jsonp，该参数的值需要与服务器端约定，详细情况下面介绍。（约定俗成的默认值为callback）

后端的配合示例

JQuery Ajax Jsonp原理

后端要配合使用jsonp，那么首先得了解Jquery Ajax jsonp的一个特点：  
Jquery在发送一个Ajax jsonp请求时，会在访问链接的后面自动加上一个验证参数，这个参数是Jquery随机生成的，例如链接
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046
中，参数callback=jQuery31106628680598769732_1512186387045&_=15121863870463. JSONP の使用

フロントエンドの使用例

JQuery Ajax は JSONP を非常にうまくカプセル化しており、非常に便利です。フロントエンドの例:

    @ResponseBody
    @RequestMapping("/getJsonp")
    public String getMySeatSuccess(@RequestParam("callback") String callback){

注意すべき点:

dataType このパラメータの値はサーバーと合意する必要があります。詳細は以下で説明されています。 。 (従来のデフォルト値はコールバックです)

バックエンド連携例

JQuery Ajax Jsonpの原則

バックエンドでjsonpを使用するには、まずJquery Ajax jsonpの機能を理解する必要があります:

Jquery in When Ajax jsonp リクエストを送信すると、アクセス リンクの後に検証パラメーターが自動的に追加されます。このパラメーターは、リンク

http://www.deardull.com:9090/getMySeat?callback= など、Jquery によってランダムに生成されます。 jQuery31106628680598769732_1512186387045&_=1512186387046

、パラメータ callback=jQuery311106628680598769732_1512186387045&_=1512186387046 code> は jquery によって自動的に追加されます。

このパラメータを追加する目的は、このリクエストを一意に識別することです。サーバーはリクエストを受信すると、返される実際の JSON 値を使用してパラメータの値を構築し（構築方法については後述します）、それを返す必要があります。フロントエンドはこのパラメータが正しいかどうかを確認します。以前に送信したパラメータである場合、データは受信されて解析されます。このパラメータでない場合、データは拒否されます。

特に注意が必要なのは、この検証パラメーターの名前です (私はこのピットで 2 時間を無駄にしました)。この名前は、フロントエンドの

jsonp

パラメーターの値に由来しています。フロントエンドの jsonp パラメータの値を「aaa」に変更すると、対応するパラメータは

aaa=jQuery31106628680598769732_1512186387045&_=1512186387046 となるはずです
バックエンドの受信と処理

Jquery Ajax Jsonp の原理は知っていますが、そして受け入れる必要があるパラメータを指定すれば、サーバー側のプログラムを作成できます。

json と連携するためにサーバーが行う必要があることは 2 つのステップに要約できます: 最初のステップは検証パラメーターを受け取ることです

フロントエンドと合意された jsonp パラメーター名に従って検証パラメーターを受け取りますAjax の例は次のとおりです (SpringMVC を使用し、他の言語もフレームワークの原理と同様です)

     @ResponseBody
    @RequestMapping("/getMySeat")    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();   //google的一个json工具库
        Map<String,String> map=new HashMap<>();        map.put("seat","1_2_06_12");        return callback+"("+gson.toJson(map)+")";   //构造返回值
    }

2 番目のステップ、パラメーターを構築して返す

• 受け取った検証パラメーターのコールバックと返される実際の JSON データを構築します。 「callback(json)」メソッド:

      $.ajax({
              type:"GET",
              url:"http://www.deardull.com:9090/getMySeat", //访问的链接
              dataType:"jsonp",  //数据格式设置为jsonp
              jsonp:"callback",  //Jquery生成验证参数的名称
              success:function(data){  //成功的回调函数
                  alert(data);
              },
              error: function (e) {
                  alert("error");
              }
          });

4. 概要

• 最後に、フロントエンドとバックエンドに対応するコードは次のようになります:

フロントエンド

•     @ResponseBody
      @RequestMapping("/getMySeat")    public String getMySeatSuccess(@RequestParam("callback") String callback){
          Gson gson=new Gson();        Map<String,String> map=new HashMap<>();        map.put("seat","1_2_06_12");
          logger.info(callback);        return callback+"("+gson.toJson(map)+")";
      }

バックエンド

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

フロントエンドはバックエンドと通信して jsonp の値に同意する必要があります。通常、デフォルトはコールバックを使用します。

🎜バックエンドが jsonp パラメーター名に従ってパラメーターを取得した後、返される json データを使用して「callback(json)」方法でバックエンドを構築する必要があります。 🎜🎜🎜🎜テストする場合は、必ずクロスドメイン環境 (2 台のマシン) で実行してください。 🎜🎜🎜🎜完全な例は上記の 2 つのコードであり、ここでは Github 接続は提供されていません。上記の例は私自身がテストしたものであり、問​​題が発生した場合は、メッセージを残して質問してください。 🎜🎜🎜🎜🎜🎜🎜🎜

1. クロスドメイン アクセスとは

例: Web サイト A では、Ajax を使用して Web サイト B の特定のコンテンツを取得したいと考えています。 Web サイト A と Web サイト B が同じドメインにない場合、クロスドメイン アクセスの問題が発生します。 2 つのドメイン名がドメイン名を越えてリクエストを送信したり、データをリクエストしたりすることはできません。そうしないと安全ではありません。クロスドメイン アクセスは、同一オリジン ポリシーに違反します。 同一オリジン ポリシーの詳細については、次のリンクをクリックしてください: Same-origin_policy つまり、同一オリジン ポリシーでは、ブラウザの ajax のみがアクセスできると規定されています。 HTML ページと同じ生成元 (同じドメイン名または IP) リソース。

2. JSONP とは

JSONP (JSON with Padding) は、主流のブラウザーによるクロスドメイン データ アクセスの問題を解決するために使用できる JSON の「使用モード」です。

同一生成元ポリシーにより、一般に、server1.example.com にある Web ページは、server1.example.com および HTML 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素以外のサーバーと通信できません。は例外です。 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素のこのオープン戦略を利用して、Web ページは他のソースから動的に生成された JSON データを取得できます。この使用パターンはいわゆる JSONP です。 JSONP でキャプチャされたデータは JSON ではなく、JSON パーサーで解析されるのではなく、JavaScript インタープリターで実行される任意の JavaScript です。より具体的な原則については、より多くのスペースを必要として説明します。また、自分で Baidu にアクセスすることもできます。

3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素是一个例外。利用3f1c4e4b6b16bbbd69b2ee476dc4f83a元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。更具体的原理需要更多篇幅的讲解，小伙伴可以自行去百度。

三、JSONP的使用

前端的使用示例

JQuery Ajax对JSONP进行了很好的封装，我们使用起来很方便。前端示例：

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

需要注意的地方是：

• dataType，该参数必须要设置成jsonp

• jsonp，该参数的值需要与服务器端约定，详细情况下面介绍。（约定俗成的默认值为callback）

后端的配合示例

JQuery Ajax Jsonp原理

后端要配合使用jsonp，那么首先得了解Jquery Ajax jsonp的一个特点：  
Jquery在发送一个Ajax jsonp请求时，会在访问链接的后面自动加上一个验证参数，这个参数是Jquery随机生成的，例如链接
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046
中，参数callback=jQuery31106628680598769732_1512186387045&_=15121863870463. JSONP の使用

フロントエンドの使用例

JQuery Ajax は JSONP を非常にうまくカプセル化しており、非常に便利です。フロントエンドの例:

    @ResponseBody
    @RequestMapping("/getJsonp")
    public String getMySeatSuccess(@RequestParam("callback") String callback){

注意すべき点:

dataType このパラメータの値はサーバーと合意する必要があります。詳細は以下で説明されています。 。 (従来のデフォルト値はコールバックです)

バックエンド連携例

JQuery Ajax Jsonpの原則

バックエンドでjsonpを使用するには、まずJquery Ajax jsonpの機能を理解する必要があります:

Jquery in When Ajax jsonp リクエストを送信すると、アクセス リンクの後に検証パラメーターが自動的に追加されます。このパラメーターは、リンク

http://www.deardull.com:9090/getMySeat?callback= など、Jquery によってランダムに生成されます。 jQuery31106628680598769732_1512186387045&_=1512186387046

、パラメータ callback=jQuery311106628680598769732_1512186387045&_=1512186387046 code> は jquery によって自動的に追加されます。

このパラメータを追加する目的は、このリクエストを一意に識別することです。サーバーはリクエストを受信すると、返される実際の JSON 値を使用してパラメータの値を構築し（構築方法については後述します）、それを返す必要があります。フロントエンドはこのパラメータが正しいかどうかを確認します。以前に送信したパラメータである場合、データは受信されて解析されます。このパラメータでない場合、データは拒否されます。

特に注意が必要なのは、この検証パラメーターの名前です (私はこのピットで 2 時間を無駄にしました)。この名前は、フロントエンドの

jsonp

パラメーターの値に由来しています。フロントエンドの jsonp パラメータの値を「aaa」に変更すると、対応するパラメータは

aaa=jQuery31106628680598769732_1512186387045&_=1512186387046 となるはずです
バックエンドの受信と処理

Jquery Ajax Jsonp の原理は知っていますが、そして受け入れる必要があるパラメータを指定すれば、サーバー側のプログラムを作成できます。

json と連携するためにサーバーが行う必要があることは 2 つのステップに要約できます: 最初のステップは検証パラメーターを受け取ることです

フロントエンドと合意された jsonp パラメーター名に従って検証パラメーターを受け取りますAjax の例は次のとおりです (SpringMVC を使用し、他の言語もフレームワークの原理と同様です)

     @ResponseBody
    @RequestMapping("/getMySeat")    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();   //google的一个json工具库
        Map<String,String> map=new HashMap<>();        map.put("seat","1_2_06_12");        return callback+"("+gson.toJson(map)+")";   //构造返回值
    }

2 番目のステップ、パラメーターを構築して返す

• 受け取った検証パラメーターのコールバックと返される実際の JSON データを構築します。 「callback(json)」メソッド:

      $.ajax({
              type:"GET",
              url:"http://www.deardull.com:9090/getMySeat", //访问的链接
              dataType:"jsonp",  //数据格式设置为jsonp
              jsonp:"callback",  //Jquery生成验证参数的名称
              success:function(data){  //成功的回调函数
                  alert(data);
              },
              error: function (e) {
                  alert("error");
              }
          });

4. 概要

• 最後に、フロントエンドとバックエンドに対応するコードは次のようになります:

フロントエンド

    @ResponseBody
    @RequestMapping("/getMySeat")    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();        Map<String,String> map=new HashMap<>();        map.put("seat","1_2_06_12");
        logger.info(callback);        return callback+"("+gson.toJson(map)+")";
    }

バックエンド

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

フロントエンドはバックエンドと通信して jsonp の値に同意する必要があります。通常、デフォルトはコールバックを使用します。

🎜バックエンドが jsonp パラメーター名に従ってパラメーターを取得した後、返される json データを使用して「callback(json)」方法でバックエンドを構築する必要があります。 🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜PHP AJAX に関する 1 つの疑問🎜🎜🎜🎜class.rFastTemplate.php 1_PHP チュートリアル🎜🎜🎜🎜🎜

以上がフロントエンドとバックエンドの両方の観点から jsonp のクロスドメイン アクセスを分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。