Ajax クロスドメイン呼び出し Java の背景の詳細​​な紹介

この記事では、JAVA バックエンドを呼び出す Ajax クロスドメイン (jsonp) の詳細な説明を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

1. JSONP の定義

JSONP は英語の JSON with Padding の略称であり、非公式のプロトコルです。これにより、スクリプト タグをサーバー側で生成してクライアントに返すことができ、javascript callback の形式でサイトにアクセスできるようになります。 JSONP は、サーバーから返された応答をページに追加して特定の機能を実装するスクリプト タグ インジェクションです。

2. JSONPの起源

JSONPの起源を説明するために、まずブラウザの「SOP: Same Origin Policy」について話しましょう。 つまり、ブラウザはスクリプト プログラムが同じプロトコル、同じドメイン名、同じポートのスクリプトとのみ対話するように制限します。これには、変数の共有や受け渡しなどが含まれます。 cookieの配信も同じ戦略に従います。これにより、複数のサーバーが関与するアプリケーションを統合するときに問題が発生します。クロスドメイン アクセスの問題により、サイト A の Ajax コードがサイト B のデータにアクセスできなくなります。

クロスドメインアクセスを解決するにはどうすればよいですか?次に、ブラウザの機能を利用する必要があります。ブラウザは、ページ内のスクリプトがドメインを越えてデータを読み取ることを許可しませんが、HTMLが画像、CSS、スクリプト。スクリプト プログラムへの参照は特別であり、ブラウザによって解析された後は、ローカルのスクリプト プログラムと同じであり、すぐに解釈して実行できます。たとえば、サイト B の js ファイルには、alert ("This is Victor!"); という単純なプロンプト ボックスがあります。サイト A でこの js を参照すると、サイト B のアプリケーションでスクリプトが実行され、警告メッセージが表示されます。オフサイト スクリプトの参照はスクリプト タグを通じて実装され、スクリプト プログラムは DOM を通じて HTML ページのすべてのタグ (スクリプト タグの動的作成を含む) を制御できるため、これはオフサイト プログラムを呼び出すことで実現できます。地元のリソースに。さらに、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用すると、実行可能な JavaScript関数 呼び出しまたは JSON データをサーバーから直接返すことができます。

3. JSONP の原則と実装

まずクライアントでコールバックを登録し、次にコールバック名をサーバーに渡します。この時点で、サーバーはまず JSON データを生成します。次に、JavaScript 構文を使用して関数を生成します。関数名は渡されたパラメーター jsonp です。その後、JSON データがパラメーターとして関数に直接配置され、js 構文ドキュメントが生成され、クライアントに返されます。

最後に、script タグがクライアントのブラウザで解析され、返された JavaScript ドキュメントが実行されます。このとき、データはクライアントで事前定義された

コールバック関数

(動的実行コールバック関数) にパラメーターとして渡されます。

特定のコード操作:

1、js コード

$.ajax({

  url: 'http://192.168.3.49:8080/PORTAL/authCode',

  type: 'post',

  dataType:'jsonp',

  jsonp: "callback",

  data: {

    "type":'0',

    "mobilePhone": $("#tel").val()

  },

  success:function(data){

    alert(data.ret)

    settime(obj);

  },

  error:function(data){

    $('#mstr_ck').html("获取验证码失败，请重试！");

    $("#error_ck").show();

  }

});

2、Java コード

@RequestMapping(value = "authCode")

@ResponseBody

public String getMobileAuthCode( HttpServletRequest request, String callback)

    throws Exception {

  String result = "{'ret':'true'}";

  //加上返回参数

  result=callback+"("+result+")";

  return result;

}

上記と同様: フロントエンド呼び出しの結果がポップアップします:alert('true')

以上がAjax クロスドメイン呼び出し Java の背景の詳細​​な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。