jsonp のクロスドメイン アクセスの分析 (フロントエンドとバックエンド)

この記事の内容は、jsonp のクロスドメイン アクセス (フロントエンドとバックエンド) に関するものです。必要な方は参考にしていただければ幸いです。

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 の <script></script> 要素は例外。 <script></script> 要素のこのオープン戦略を利用して、Web ページは他のソースから動的に生成された JSON データを取得できます。この使用パターンはいわゆる JSONP です。 JSONP でキャプチャされたデータは JSON ではなく、JSON パーサーで解析されるのではなく、JavaScript インタープリターで実行される任意の JavaScript です。より具体的な原則については、より多くのスペースを必要として説明します。また、自分で Baidu にアクセスすることもできます。

<script></script> 元素是一个例外。利用<script></script>元素的这个开放策略，网页可以得到从其他来源动态产生的 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)+")";
      }

バックエンド

rrreee

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

バックエンドが jsonp パラメーター名に従ってパラメーターを取得した後、返される json データを使用して「callback(json)」方法でバックエンドを構築する必要があります。

🎜テストする場合は、必ずクロスドメイン環境 (2 台のマシン) で実行してください。 🎜🎜🎜🎜完全な例は上記 2 つのコードであり、個人的なテストに効果的です。 🎜🎜関連する推奨事項: 🎜🎜🎜JSONP へのクロスドメイン アクセス CORS_html/css_WEB-ITnose🎜🎜🎜🎜🎜JSONP クロスドメイン GET リクエストにより Ajax クロスドメイン アクセスの問題が解決される_json🎜🎜

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