Baidu, found to have encountered a cross-domain request request problem. Collect information as follows
JSONP explanationBefore explaining JSONP, we need to understand the concept of "homologous strategy", which is helpful for understanding cross-domain. For security reasons, browsers exist in the same origin policy mechanism, and the same-origin policy prevents documents or scripts loaded from one source from getting or setting properties of another source load document. A little bit around, the simple point is that the browser limit script can only be used with the protocol, the same domain name, the same port of the script to interact.
JSONP is to solve this problem, JSONP is the English JSON with padding abbreviation, is an unofficial agreement. He allows the server to generate a script tags return value client, through JavaScript callback to achieve site access. JSONP is an injection of a script tag that adds the response returned by the server to the page to implement a specific function.
In short, JSONP itself is not a complex thing, but the dynamic parsing of JavaScript documents through the SCIRPT tag bypasses the browser's homologous strategy.
JSONP Principle and realizationNext, the solution to actually simulate a cross-domain request. The backend is the Spring MVC architecture, and the frontend is accessed across the domain through Ajax.
1, first the client needs to register a callback (the service side through the callback (JSONP) can get the JS function name (jsonpcallback)), and then in JavaScript language
method to generate a function.
2, Next, the JSON data directly into the parameter in the way, put into the function, so that the generation of a JS grammar document, returned to the client.
3. Finally, the client browser dynamically parses the script tag and executes the returned JavaScript syntax document fragment, where the data is passed as a parameter to the pre-defined
callback function (Dynamic execution callback function).
This dynamic parsing JS document is similar to the Eval function.
After some efforts, the solution is as follows:
Springmvc End:
@RequestMapping ("/get") Public voidGet (httpservletrequest req,httpservletresponse res) {Res.setcontenttype ("Text/plain"); String Callbackfunname=req.getparameter ("Callbackparam");//get the JS function name Try{res.getwriter (). Write (Callbackfunname+ "([{name:\" john\ "}])";//return JSONP Data}Catch(IOException e) {e.printstacktrace (); }} @RequestMapping ("/getjsonp") @ResponseBody Publicjsonpobject Getjsonp (String callbackparam) { Company Company=NewCompany (); Company.setaddress ("Guangzhou Tianhe Huatian Software Park"); Company.setemail ("[Email protected]"); Company.setname ("Guangzhou Xun network can be limited"); Company. Setphone ("12345678912"); return NewJsonpobject (Callbackparam, company); }
Ajax side:
<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= "Utf-8"> <Scriptsrc= "Http://code.jquery.com/jquery-2.1.3.min.js"></Script> <Script>$ (document). Ready (function(){ $("#but1"). Click (function() {$.ajax ({URL:'Http://127.0.0.1:8080/DevInfoWeb/get', type:"Get", Async:false, DataType:"Jsonp", Jsonp:"Callbackparam", //the parameters of the service side used to receive the function name of the callback callJsonpcallback:"Success_jsonpcallback", //the function name of the callback, and the server will pass the name and data back together.Success:function(JSON) {alert (JSON); }, Error:function() {alert ('Error');} }); }); $("#but2"). Click (function() {$.ajax ({URL:'Http://127.0.0.1:8080/DevInfoWeb/getJsonp', type:"Get", Async:false, DataType:"Jsonp", Jsonp:"Callbackparam", //the parameters of the service side used to receive the function name of the callback callJsonpcallback:"Success_jsonpcallback", //the function name of the callback, and the server will pass the name and data back together.Success:function(JSON) {alert (JSON); }, Error:function() {alert ('Error');} }); }); }); </Script> </Head> <Body> <DivID= "Div1"><H2>Use JQuery AJAX to change text</H2></Div> <ButtonID= "BUT1">Button 1</Button> <BR/> <ButtonID= "But2">Button 2</Button> </Body> </HTML>
ajax+spring MVC implementation Cross-domain request (JSONP) (RPM)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
