Ajax フロントエンドおよびバックエンドのクロスドメイン リクエストを実装する方法

この記事では、フロントエンドのクロスドメインリクエスト処理とバックエンドのクロスドメインデータ処理方法を紹介し、Ajax のクロスドメインの問題を詳細に分析します。これを必要とする友人はそこから学ぶことができます。

最近、私はパブリック アカウントのフロントエンド開発に取り組んでおり、地域内の州、市、郡の 3 レベルのリンクなど、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 プロトコルとは何の関係もありません。</script>

JSONP は、スクリプト タグをサーバー側で統合してクライアントに返し、JSONP へのクロスドメイン アクセスを可能にする非公式のプロトコルです。これは、JavaScript コールバックを通じて実現されます。つまり、パディング付きの JSON です。同一オリジン ポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのみを要求できます。クロスドメインリクエストを行いたい場合は、htmlのscriptタグを使用してクロスドメインリクエストを行い、レスポンスで実行するスクリプトコードを返すことができます。JavaScriptオブジェクトはJSONで直接渡すことができます。このクロスドメイン通信方式は JSONP と呼ばれます。

jsonCallback 関数 jsonp1236827957501(....): クロスドメイン サーバーで json データを取得した後、コールバック関数

Jsonp の原則:

まず、コールバックを登録します。クライアント (「jsoncallback」など) を呼び出し、コールバック名 (jsonp1236827957501 など) をサーバーに渡します。注: サーバーはコールバック値を取得した後、jsonp1236827957501(...) を使用して出力する json コンテンツを含める必要があります。この時点で、サーバーによって生成された json データはクライアントによって正しく受信されます。

次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター「jsoncallback」jsonp1236827957501 の値です。

最後に、json データがパラメーターとして関数に直接配置され、段落 js 構文ドキュメントが生成されます。 、クライアントに返されました。

クライアントのブラウザは、スクリプト タグを解析し、返された JavaScript ドキュメントを実行します。このとき、JavaScript ドキュメント データは、クライアントの事前定義されたコールバック関数 (上記の例の jquery $.ajax() メソッドなど) にパラメータとして渡されます。 ) カプセル化された success: function (json)) 内 (動的実行コールバック関数)

jsonp メソッドは基本的に は一貫しています (QQ スペースはこのメソッドを使用してクロスドメイン データ交換を実現します)。JSONP はスクリプト インジェクション (スクリプト インジェクション) 動作であるため、特定のセキュリティ リスクもあります。上は私です。皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

Expressでのlog4jsの実際の使い方について

NodeJSを使ったWebSocket機能の実装方法

JSを使ったノード要素の取得方法

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