jsonp是一种跨域通信的手段,它的原理其实很简单:
- 首先是利用script标签的src属性来实现跨域。
- 通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。
- 由于使用script标签的src属性,因此只支持get方法
下面详细讲讲如何实现jsonp。
1. 实现流程
-
设定一个script标签
1
|
<script src="http://jsonp.js?callback=xxx">
</script>
|
-
callback定义了一个函数名,而远程服务端通过调用指定的函数并传入参数来实现传递参数,将fn(response)
传递回客户端
1
2
|
$callback = !
empty($_GET[
'callback']) ? $_GET[
'callback'] :
'callback';
echo $callback.
'(.json_encode($data).)';
|
-
客户端接收到返回的js脚本,开始解析和执行fn(response)
2. jsonp简单实现
一个简单的jsonp实现,其实就是拼接url,然后将动态添加一个script元素到头部。
1
2
3
4
5
6
|
function jsonp(req){
var script =
document.createElement(
'script');
var url = req.url +
'?callback=' + req.callback.name;
script.src = url;
document.getElementsByTagName(
'head')[
0].appendChild(script);
}
|
前端js示例
1
2
3
4
5
6
7
|
function hello(res){
alert(
'hello ' + res.data);
}
jsonp({
url :
'',
callback : hello
});
|
服务器端代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var http =
require(
'http');
var urllib =
require(
'url');
var port =
8080;
var data = {
'data':
'world'};
http.createServer(
function(req,res){
var params = urllib.parse(req.url,
true);
if(params.query.callback){
console.log(params.query.callback);
var str = params.query.callback +
'(' +
JSON.stringify(data) +
')';
res.end(str);
}
else {
res.end();
}
}).listen(port,
function(){
console.log(
'jsonp server is on');
});
|
然而,这个实现虽然简单,但有一些不足的地方:
- 我们传递的回调必须是一个全局方法,我们都知道要尽量减少全局的方法。
- 需要加入一些参数校验,确保接口可以正常执行。
3. 可靠的jsonp实现
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
|
(
function (global) {
var id =
0,
container =
document.getElementsByTagName(
"head")[
0];
function jsonp(options) {
if(!options || !options.url)
return;
var scriptNode =
document.createElement(
"script"),
data = options.data || {},
url = options.url,
callback = options.callback,
fnName =
"jsonp" + id++;
data[
"callback"] = fnName;
var params = [];
for (
var key
in data) {
params.push(
encodeURIComponent(key) +
"=" +
encodeURIComponent(data[key]));
}
url = url.indexOf(
"?") >
0 ? (url +
"&") : (url +
"?");
url += params.join(
"&");
scriptNode.src = url;
global[fnName] =
function (ret) {
callback && callback(ret);
container.removeChild(scriptNode);
delete global[fnName];
}
scriptNode.onerror =
function () {
callback && callback({
error:
"error"});
container.removeChild(scriptNode);
global[fnName] &&
delete global[fnName];
}
scriptNode.type =
"text/javascript";
container.appendChild(scriptNode)
}
global.jsonp = jsonp;
})(
this);
|
使用示例
1
2
3
4
5
6
7
|
jsonp({
url :
"www.example.com",
data : {
id :
1},
callback :
function (ret) {
console.log(ret);
}
});
|
原文地址:https://zhangguixu.github.io/2016/12/02/jsonp/
本文地址:http://blog.csdn.net/aerchi/article/details/53580776