ホームページ > 記事 > ウェブフロントエンド > Ajax クロスドメイン呼び出し JAVA 背景_AJAX 関連の詳細説明
この記事では、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 サイトの他の関連記事を参照してください。