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

この記事では、Ajax フロントエンドのクロスドメイン要求処理とバックエンドのクロスドメイン データ処理方法を紹介し、Ajax フロントエンドとバックエンドについて学ぶ必要がある Ajax クロスドメインの問題を詳細に分析します。 -end クロスドメイン要求処理メソッドについては、この記事を参照してください。

最近、私はパブリック アカウントのフロントエンド開発に取り組んでおり、地域内の州、市、郡の 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 メソッドは通常の jsonstring を出力します; 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 の最も基本的な原則は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを動的に追加することであり、script タグの src 属性にはクロスドメイン制限がありません。このように、このクロスドメインメソッドは実際には ajax とは何の関係もありません。 ドメインアクセス JSONP は Padding 付きの 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 メソッドは基本的に faf6936f9a6d2e2bc55e4df552484803 2cacc6d41bbb37262a98f745aa00fbf0 は一貫しています (QQ スペースはこのメソッドを使用してクロスドメイン データ交換を実現します)。JSONP はスクリプト インジェクション (スクリプト インジェクション) 動作であるため、特定のセキュリティ リスクもあります。

注、 jquey クロスドメイン投稿メソッドはサポートされていません

Ajax クロスドメイン リクエストに慣れていない場合は、これを参照してください。

おすすめの類似記事:

Ajaxクロスドメインアクセスエラー501の解決策を例付きで詳しく解説

この記事では主にajaxクロスドメインアクセスエラー501の解決策を詳しく紹介していますが、一定の参考値があり興味深いです。 ...

Ajax クロスドメインの完璧なソリューション例の共有

この会社はイベント ページを作成したいと考えており、その過程ですべてのインターフェイスが検出され、Ajax リクエストはクロスドメインになります。ここでは、クロスドメインについて簡単に紹介します...

Ajax クロスドメイン アクセスにおける Cookie 損失の問題の解決策_AJAX 関連

この記事では、Ajax クロスドメイン アクセスにおける Cookie 損失の問題の解決策を主に紹介します。友達が必要です...

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