JSONP原理及实现
接下来,来实际模拟一个跨域请求的解决方案。后端为Spring MVC架构的,前端则通过Ajax进行跨域访问。
1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback))，然后以JavaScript语
法的方式,生成一个function
2、接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端。
3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的
回调函数里(动态执行回调函数)。
这种动态解析js文档和eval函数是类似的。
AJAX端：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="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", //服务端用于接收callback调用的function名的参数 jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来 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", //服务端用于接收callback调用的function名的参数 jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来 success: function(json) { alert(json); }, error: function(){alert('Error');} }); }); }); </script> </head> <body> <div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div> <button id="but1">按钮1</button> <br/> <button id="but2">按钮2</button> </body> </html>
|
SpringMVC端：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@RequestMapping("/get") public void get(HttpServletRequest req,HttpServletResponse res) { res.setContentType("text/plain"); String callbackFunName =req.getParameter("callbackparam");//得到js函数名称 try { res.getWriter().write(callbackFunName + "([ { name:"John"}])"); //返回jsonp数据 } catch (IOException e) { e.printStackTrace(); } } @RequestMapping("/getJsonp") @ResponseBody public JSONPObject getJsonp(String callbackparam){ Company company=new Company(); company.setAddress("广州天河华景软件园"); company.setEmail("123456@qq.com"); company.setName("广州讯动网络可以有限公司"); company .setPhone("12345678912"); return new JSONPObject(callbackparam, company); } |