Ajax cross-domain (jsonp) method of calling JAVA background

This time I will bring you the method of Ajax cross-domain (jsonp) calling JAVA backend. What are the precautions for Ajax cross-domain (jsonp) calling JAVA backend. The following is a practical case. Let’s take a look. one time.

1. JSONP definition

JSONP is the abbreviation of English JSON with Padding and is an unofficial protocol. It allows script tags to be generated on the server side and returned to the client to achieve site access in the form of javascript callback. JSONP is a script tag injection that adds the response returned by the server to the page to implement specific functions.

2. The origin of JSONP

To explain the origin of JSONP, first let’s talk about the browser’s “SOP: Same Origin Policy”. In short, the browser restricts script programs to only interact with scripts of the same protocol, same domain name, and same port. This includes sharing and passing variables, etc. The delivery of cookies also follows the same policy. This causes some troubles when integrating applications involving multiple servers. The problem of cross-domain access causes the Ajax code of site A to be unable to access the data of site B.

How to solve cross-domain access? Then you need to take advantage of a feature of the browser: although the browser does not allow scripts in the page to read data across domains, it allows HTML to reference cross-domain resources, such as images, CSS, and scripts. The reference to the script program is special. After it is parsed by the browser, it is the same as the local script program and can be interpreted and executed immediately. For example, in a js file on site B, a simple prompt box: alert ("This is Victor!");. If you reference this js on site A, the script will be executed in the application on site B and display an alert message. Since the reference of off-site scripts is implemented through script tags, and the script program can control all tags of the HTML page through DOM (including dynamically creating script tags), this can be achieved by calling off-site programs. Changes were made to local resources. In addition, through the use of <script> tag, executable JavaScript function calls or JSON data can be returned directly from the server. </script>

3. JSONP principle and implementation

First register a callback on the client, and then pass the callback name to the server. At this point, the server first generates JSON data. Then use JavaScript syntax to generate a function. The function name is the passed parameter jsonp.

Then, the JSON data is directly placed into the function as a parameter, thus generating a js syntax The document is returned to the client.

Finally, the script tag is parsed in the client browser and the returned JavaScript document is executed. At this time, the data is passed as a parameter to the callback function predefined by the client ( Dynamically execute the callback function).

Specific code operation:

1, js code

$.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 code

@RequestMapping(value = "authCode")
@ResponseBody
public String getMobileAuthCode( HttpServletRequest request, String callback)
    throws Exception {
  String result = "{'ret':'true'}";
  //加上返回参数
  result=callback+"("+result+")";
  return result;
}

As above: the front-end call result pops up: alert('true' )　

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use Django Ajax

How to use php to receive data submitted to the background by ajax

The above is the detailed content of Ajax cross-domain (jsonp) method of calling JAVA background. For more information, please follow other related articles on the PHP Chinese website!