[乐意黎转载]jsonp的原理与实现

jsonp是一种跨域通信的手段，它的原理其实很简单：

1. 首先是利用script标签的src属性来实现跨域。
2. 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
3. 由于使用script标签的src属性，因此只支持get方法

下面详细讲讲如何实现jsonp。

1. 实现流程

1. 设定一个script标签

   1	<script src="http://jsonp.js?callback=xxx"> </script>

2. callback定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数，将fn(response)传递回客户端

   1
   2

   $callback = ! empty($_GET[ 'callback']) ? $_GET[ 'callback'] : 'callback'; echo $callback. '(.json_encode($data).)';

3. 客户端接收到返回的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

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 = '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); //jsonp var str = params.query.callback + '(' + JSON.stringify(data) + ')'; res.end(str); } else { res.end(); } }).listen(port,){ console.log( 'jsonp server is on'); });

然而，这个实现虽然简单，但有一些不足的地方：

1. 我们传递的回调必须是一个全局方法，我们都知道要尽量减少全局的方法。
2. 需要加入一些参数校验，确保接口可以正常执行。

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 = "head")[ 0]; options) { if(!options || !options.url) return; var scriptNode = "script"), data = options.data || {}, url = options.url, callback = options.callback, fnName = "jsonp" + id++; // 添加回调函数 data[ "callback"] = fnName; // 拼接url 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] = ret) { callback && callback(ret); container.removeChild(scriptNode); delete global[fnName]; } // 出错处理 scriptNode.onerror = ) { callback && callback({ error: "error"}); container.removeChild(scriptNode); global[fnName] && delete global[fnName]; } scriptNode.type = "text/javascript"; container.appendChild(scriptNode) } global.jsonp = jsonp; })( this);

使用示例

jsonp({

url : "www.example.com",

data : { id : 1},

callback : ret) {

console.log(ret);

}

});

原文地址：https://zhangguixu.github.io/2016/12/02/jsonp/

本文地址：http://www.jb51.cc/article/p-mofvgzpt-zw.html