JSONP原理及简单实现

文章是转过来的,来自:http://www.travisup.com/post/index/28

 

在web2.0时代,熟练的使用ajax是每个前端攻城师必备的技能。然而由于受到浏览器的限制,ajax不允许跨域通信。

JSONP就是就是目前主流的实现跨域通信的解决方案。

虽然在在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有。jsonp主要是通过script可以链接远程url来实现跨域请求的。如:

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

callback定义了一个函数名,而远程服务端通过调用指定的函数并传入参数来实现传递参数。

搜索了网上好多文章,他们实现方法都过于简单,要实际应用还要多加修改,我在这里封装了一个对象,可以直接运用于实际操作。

  1. var JSONP = {
  2. // 获取当前时间戳
  3. now: function() {
  4. return (new Date()).getTime();
  5. },
  6. // 获取16位随机数
  7. rand: function() {
  8. return Math.random().toString().substr(2);
  9. },
  10. // 删除节点元素
  11. removeElem: function(elem) {
  12. var parent = elem.parentNode;
  13. if(parent && parent.nodeType !== 11) {
  14. parent.removeChild(elem);
  15. }
  16. },
  17. // url组装
  18. parseData: function(data) {
  19. var ret = "";
  20. if(typeof data === "string") {
  21. ret = data;
  22. }
  23. else if(typeof data === "object") {
  24. for(var key in data) {
  25. ret += "&" + key + "=" + encodeURIComponent(data[key]);
  26. }
  27. }
  28. // 加个时间戳,防止缓存
  29. ret += "&_time=" + this.now();
  30. ret = ret.substr(1);
  31. return ret;
  32. },
  33. getJSON: function(url, data, func) {
  34. // 函数名称
  35. var name;
  36. // 拼装url
  37. url = url + (url.indexOf("?") === -1 ? "?" : "&") + this.parseData(data);
  38. // 检测callback的函数名是否已经定义
  39. var match = /callback=(\w+)/.exec(url);
  40. if(match && match[1]) {
  41. name = match[1];
  42. } else {
  43. // 如果未定义函数名的话随机成一个函数名
  44. // 随机生成的函数名通过时间戳拼16位随机数的方式,重名的概率基本为0
  45. // 如:jsonp_1355750852040_8260732076596469
  46. name = "jsonp_" + this.now() + '_' + this.rand();
  47. // 把callback中的?替换成函数名
  48. url = url.replace("callback=?", "callback="+name);
  49. // 处理?被encode的情况
  50. url = url.replace("callback=%3F", "callback="+name);
  51. }
  52. // 创建一个script元素
  53. var script = document.createElement("script");
  54. script.type = "text/javascript";
  55. // 设置要远程的url
  56. script.src = url;
  57. // 设置id,为了后面可以删除这个元素
  58. script.id = "id_" + name;
  59. // 把传进来的函数重新组装,并把它设置为全局函数,远程就是调用这个函数
  60. window[name] = function(json) {
  61. // 执行这个函数后,要销毁这个函数
  62. window[name] = undefined;
  63. // 获取这个script的元素
  64. var elem = document.getElementById("id_" + name);
  65. // 删除head里面插入的script,这三步都是为了不影响污染整个DOM啊
  66. JSONP.removeElem(elem);
  67. // 执行传入的的函数
  68. func(json);
  69. };
  70. // 在head里面插入script元素
  71. var head = document.getElementsByTagName("head");
  72. if(head && head[0]) {
  73. head[0].appendChild(script);
  74. }
  75. }
  76. };

实现过程基本写在注释里啦,自己看。调用的方法跟jQuery基本一样。如:

  1. var data = {
  2. from: "北京",
  3. count: 27,
  4. output: "json",
  5. callback: "?"
  6. }
  7. JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp", data, function(json) {console.log(json)});

当然要这么写也行:

  1. JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp?from=北京&count=27&output=json&callback=?", null, function(json) {console.log(json)});

至于服务端的实现,那就比较简单了,以php为例:

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

好了,写完了,有什么问题欢迎讨论。

 

 ========================

本博客作者另外备注:

window[name] 是预先在客户端定义好函数,在script标签取回的数据后会自动执行一次这个方法,并把对应的json对象传进来。

而name则是和后端协商好的callback函数名称,在angularjs上表现出来的就是:angular.callbacks.1

下面又有一个简单的例子:

每次请求完执行,应该自动销毁元素,不要污染dom结构;如上;

下面又有一个简单的例子

<!DOCTYPE html>
<html>
<head>
	<title>模拟JSONP的请求</title>
	<script type="text/javascript">
		window['lkjCallback'] = function(json){  //预先定义的方法名,绑定在window上,方便全局调
			console.log(json);
			alert(json.serviceId);
		}
	</script>
	<!--callback参数的值要和后端协商好-->
	<script type="text/javascript" src="http://www.jinhuatuo.com?callback=lkjCallback&serviceId=123"></script>
	<script type="text/javascript">  //上面的一串source返回来的js代码,执行的方法是上面传过去的方法,相当于调用了一次js方法
		lkjCallback({serviceId:123,root:'asdf'});
	</script>
</head>
<body>

</body>
</html>

  

 

posted @ 2016-08-09 00:18  精进中的昆杰  阅读(1115)  评论(0编辑  收藏  举报