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);
}
|
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
