Ajax フロントエンドおよびバックエンドのクロスドメイン要求処理メソッド

最近、私はパブリックアカウントのフロントエンド開発に取り組んでおり、地域内の州-市-郡の3レベルのリンク、3レベルのリンククエリなどのAjaxクロスドメインリクエストの問題に遭遇しました。車のブランド、車のシリーズ、車のモデルなど、すべての外部インターフェイス (他のエンジニアリング プロジェクトへのインターフェイス) が完了していることを呼び出す必要があります。この記事では、主にフロントエンドのクロスドメインリクエスト処理とバックエンドのクロスドメインデータ処理方法を紹介し、Ajax のクロスドメインの問題を詳細に分析します。

クロスドメイン リクエストでは、バックグラウンド コードを使用してコールバック関数を受信し、json データをさらに処理する必要があります。その後、フロントエンドは ajax リクエストを使用してコールバック パラメータをサーバーに送信し、データ形式を jsonp として指定します。

1. バックグラウンドでクロスドメインリクエストを処理します

1.CarBrandController.java (自動車ブランドインターフェイス Java ファイル)、ここにリストされているメソッドは主に、さまざまなレベル値に基づいて対応するブランド、自動車シリーズ、自動車モデルをクエリするために使用されます。ここで、コールバック関数はクロスドメインリクエストに対して処理されます。返されたコールバックが null でない場合は、特別な処理は必要ありません。 null の場合、クロスドメイン リクエストを示します。このとき、json データには特別な処理が必要です。つまり、json データの外側の層に 1 対のかっこが追加されます。詳細については、次の printlnJSONObject メソッドを参照してください。 HttpAdapter.java ファイル。

public void json(HttpServletRequest request,HttpServletResponse response){ 
  Map<String,Object>map=new HashMap<String, Object>(); 
  String id = request.getParameter("id");      //接收ajax请求带过来的id 
  String level = request.getParameter("level");   //接收ajax请求带过来的level 
  String callback=request.getParameter("callback"); //接收ajax请求带过来的callback参数 
  if ("1".equals(level)) {             //如果level是&#39;1&#39;,则查询第一级目录内容 
    map.put("results", this.carBrandService.findByAttr(null, "first_letter asc")); //调用查询方法，结果放入map 
  } else if ("2".equals(level)) {          //如果level是&#39;2&#39;,则查询第二级目录内容 
    map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//调用查询方法，结果放入map 
  } else if ("3".equals(level)) {          //如果level是&#39;3&#39;,则查询第三极目录内容 
    map.put("results", this.carModelYearService.findByAttr("parent_id="+id, "jian_pin desc"));//调用查询方法，结果放入map 
  } 
  map.put("level",level); 
  if (null==callback) {               //如果接收的callback值为null,则是不跨域的请求,输出json对象 
    HttpAdapter.printlnObject(response, map); 
  }else{                      //如果接收的callback值不为null,则是跨域请求，输出跨域的json对象 
  HttpAdapter.printlnJSONPObject(response, map, callback); 
  } 
}

2.HttpAdapter.java (出力オブジェクトの Java ファイル)、printlnObject メソッドは通常の json 文字列を出力します。printlnJSONObject メソッドは、json 文字列に対して特別な処理を実行します。

/** 
 * 打印对象 
 * @param response 
 * @param object 
*/ 
public static void printlnObject(HttpServletResponse response,Object object){ 
  PrintWriter writer=getWriter(response); 
  writer.println(JSON.toJSONString(object)); 
} 
/** 
 * 打印跨域对象 
 * @param response 
 * @param object 
*/ 
public static void printlnJSONPObject(HttpServletResponse response,Object object,String callback){ 
  PrintWriter writer=getWriter(response); 
  writer.println(callback+"("+JSON.toJSONString(object)+")"); 
}

2. フロントエンド ajax クロスドメインリクエストデータ

書き方 1: パラメーター callback= をサーバーに送信しますか? 、dataType を「jsonp」形式として指定します。クロスドメイン要求中に指定されるデータ形式は jsonp 形式である必要があります。

function loadData(obj,level,id,value){ 
  $.ajax({  
    url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id+'&callback=?',   //将callback写在请求url后面作为参数携带 
    type:'GET', 
    async:false, 
    dataType:'jsonp', 
    success:function(data){         
      console.log(data);             
      //其他处理(动态添加数据元素)       
  });    
}

書き方 2: コールバックを URL に記述する必要はありませんが、jsonp パラメータを 'callback' として指定し、jsonpCallback パラメータに値を与える必要があります。

function loadData(obj,level,id,value){ 
  $.ajax({  
    url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id, 
    type:'GET', 
    dataType:'jsonp', 
    jsonp: 'callback',          //将callback写在jsonp里作为参数连同请求一起发送 
    jsonpCallback:'jsonpCallback1',    
    success:function(data){            
    console.log(data);       
}); }

上記2つの書き方は同じ意味ですが、書き方が異なります。

次に、jsonp の動作原理を追加しましょう。

3. jsonp のクロスドメイン原則の分析

jsonp の最も基本的な原則は、<script> タグを動的に追加することであり、script タグの src 属性にはクロスドメイン制限がありません。このように、このクロスドメイン メソッドは、ajax XmlHttpRequest プロトコルとは何の関係もありません。<br></p> <p>JSONP は、スクリプト タグをサーバー側で統合してクライアントに返すことを可能にする非公式のプロトコルであり、クロスドメイン アクセスが可能です。 JavaScript コールバックを通じて実現されます。 JSONP はパディング付きの JSON です。同一オリジン ポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのみを要求できます。クロスドメインリクエストを行いたい場合は、HTMLのscriptタグを使用してクロスドメインリクエストを行い、レスポンスで実行するスクリプトコードを返すことができます。JavaScriptオブジェクトはJSONを使用して直接渡すことができます。このクロスドメイン通信方式は JSONP と呼ばれます。 </p> <p>jsonCallback 関数 jsonp1236827957501(....): クロスドメイン サーバーで json データを取得した後、コールバック関数 </p> <p><strong>Jsonp の原則: </strong></p> <p> まず、コールバックを登録します。クライアント (「jsoncallback」など) を呼び出し、コールバック名 (jsonp1236827957501 など) をサーバーに渡します。注: サーバーはコールバック値を取得した後、jsonp1236827957501(...) を使用して出力する json コンテンツを含める必要があります。この時点で、サーバーによって生成された json データはクライアントによって正しく受信されます。 </p> <p>次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター「jsoncallback」jsonp1236827957501 の値です。</p> <p>最後に、json データがパラメーターとして関数に直接配置され、段落 js 構文ドキュメントが生成されます。 、クライアントに返されました。 </p> <p>クライアントのブラウザは、スクリプト タグを解析し、返された JavaScript ドキュメントを実行します。このとき、JavaScript ドキュメント データは、クライアントの事前定義されたコールバック関数 (上記の例の jquery $.ajax() メソッドなど) にパラメータとして渡されます。 ) カプセル化された success: function (json)) 内 (動的実行コールバック関数)<br></p> jsonp メソッドは基本的に <script src="http://cross-domain/... と同じであると言えます。 xx.js"> </script> は一貫しています (QQ スペースはこのメソッドを使用してクロスドメイン データ交換を実現します)。JSONP はスクリプト インジェクション (スクリプト インジェクション) 動作であるため、特定のセキュリティ リスクもあります。

vue は axios を使用してドメイン間でデータをリクエストし、詳細な例を示します

ネイティブ JS は ajax と ajax クロスドメインリクエストを実装します

Ajax クロスドメインリクエストの詳細を説明する

の原理

以上がAjax フロントエンドおよびバックエンドのクロスドメイン要求処理メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。