Details about Ajax cross-origin (jsonp) Calling JAVA background, ajaxjsonp

Details about Ajax cross-origin (jsonp) Calling JAVA background, ajaxjsonp

1. JSONP Definition

JSONP, short for JSON with Padding, is an unofficial protocol. It allows the server to generate a script tags to return to the client, and implement site access through javascript callback. JSONP is a script tag injection that adds the response returned by the server to the page to implement specific functions.

2. Origin of JSONP

To explain the reason for JSONP, let's first talk about the browser's "Same-Origin Policy (SOP: Same Origin Policy )". In short, the browser restricts that the script program can only interact with scripts of the same Protocol, same domain name, and same port, including sharing and passing variables. Cookie transmission follows the same policy. This causes some problems when integrating applications involving multiple servers. Cross-origin access causes Ajax code of Site A to be unable to access data of site B.

How can cross-origin access be solved? It requires the use of a browser feature: although the browser does not allow the script program on the page to read data across domains, it allows HTML to reference cross-origin resources, fragments, CSS, and script programs. The reference to the script program is special. After it is parsed by the browser, it is irrelevant to the local script program and can be interpreted and executed immediately. For example, in a js file of Site B, a simple prompt box is: alert ("This is Victor !");. When this js is referenced at Site A, the script will be executed in Site B's application and an alert message will be displayed. Because the reference of an out-of-Site script is implemented through the script tag, in addition, the script program can use DOM to control all tags on the HTML page (including dynamically creating script tags ), this allows you to change local resources by calling an out-of-Site program. In addition, through the use of the <script> tag, you can directly return executable JavaScript function calls or JSON data from the server.

3. JSONP Principle and Implementation

Register a callback on the client, and then pass the callback name to the server. In this case, the server is converted into JSON data. Then, a function is generated in JavaScript syntax. The function name is the passed parameter jsonp.

Then, place the JSON data directly in the function as an input parameter. In this way, a js syntax document is generated and returned to the client.

Finally, parse the script tag in the browser of the client and execute the returned JavaScript document. As a parameter, the data is passed into the pre-defined callback function of the client (dynamic execution of the callback function ).

Code operation:

1. js Code

$. Ajax ({url: 'http: // 192.168.3.49: 8080/PORTAL/authcode', type: 'post', ype: 'jsonp', jsonp: "callback", data: {"type": '0', "mobilePhone": $ ("# tel "). val ()}, success: function (data) {alert (data. ret) settime (obj) ;}, error: function (data) {response ('{mstr_ck'{.html ("failed to get the verification code. Please try again! "); $ (" # Error_ck "). show ();}});

2. java code

@ RequestMapping (value = "authCode") @ ResponseBodypublic String getMobileAuthCode (HttpServletRequest request, String callback) throws Exception {String result = "{'ret ': 'true '}"; // Add the return parameter result = callback + "(" + result + ")"; return result ;}

As shown above: the frontend call result pops up: alert ('true ')

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.