JAVA バックグラウンドを呼び出す Ajax クロスドメイン (jsonp) メソッド

今回は、Ajax クロスドメイン (jsonp) を介して JAVA バックエンドを呼び出す方法をお届けします。 。

1. JSONPの定義

JSONPはEnglish 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 ページのすべてのタグ (スクリプト タグの動的作成を含む) を制御できるため、これはオフサイト プログラムを呼び出すことで実現できます。地元のリソースに。さらに、<script> タグを使用すると、実行可能な JavaScript 関数呼び出しまたは JSON データをサーバーから直接返すことができます。 </script>

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')

以降のメソッドはマスターできたと思います。この記事の事例を読んで、さらに php 中国語 Web サイトの他の関連記事にも注目してください。

推奨書籍:

Django Ajax の使用方法

php を使用して ajax によってバックグラウンドに送信されたデータを受信する方法

以上がJAVA バックグラウンドを呼び出す Ajax クロスドメイン (jsonp) メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。