ホームページ  >  記事  >  ウェブフロントエンド  >  Ajax クロスドメイン呼び出し JAVA 背景_AJAX 関連の詳細説明

Ajax クロスドメイン呼び出し JAVA 背景_AJAX 関連の詳細説明

微波
微波オリジナル
2017-06-28 13:56:131049ブラウズ

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

1. JSONP の定義

JSONP は、英語の JSON with Padding の略称であり、非公式のプロトコルです。これにより、スクリプト タグをサーバー側で生成してクライアントに返すことができ、javascript コールバックの形式でサイトにアクセスできるようになります。 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 背景_AJAX 関連の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。