什么是jsonp

  • 什么是jsonp已关闭评论
  • 114 次浏览
  • A+
所属分类:Web前端
摘要

jsonp 是前端一种用来解决网站跨域的技术,利用script标签不受同源策略影响的特性引入一个非同源的js文件,并定义一个回调函数来接收数据,这样就可以实现跨域获取数据了,例如:
现在有一个链接返回的数据是这样的:

jsonp 是前端一种用来解决网站跨域的技术,利用script标签不受同源策略影响的特性引入一个非同源的js文件,并定义一个回调函数来接收数据,这样就可以实现跨域获取数据了,例如:
现在有一个链接返回的数据是这样的:

cb({     "name": "swk",     "age": 18 }) 

这是一个标准的jsonp格式,它通过调用函数cb来传递数据,那么我们只需要定义一个函数cb来接收数据就可以了,例如:

function cb(data) {     console.log(data); //{ name: "swk", age: 18 } } 

那么我们只需要在页面中引入这个js文件就可以了,例如:

<script src="xxx.xxx?callback=cb"></script> 

这样就可以实现跨域获取数据了,但是这种方式有一个缺点,就是只能通过get方式来传递数据,例如:

<script src="xxx.xxx?callback=cb&name=swk&age=18"></script> 

这样就可以传递数据了,但是如果数据量比较大的话,那么就会有问题,因为get方式传递的数据是有长度限制的,所以这种方式只适合传递少量的数据,如果数据量比较大的话,那么就需要使用ajax的jsonp的方式来传递数据了,例如:

$.ajax({     url: 'xxx.xxx',     dataType: 'jsonp',     jsonp: 'callback',     data: {         name: 'swk',         age: 18     },     success: function (data) {         console.log(data);     } }) 
jsonp的格式

一般情况下jsonp的内容是这样的:

callback({     "name":"zhangsan",     "age":18 }) 

也有有可能是这样的:

callback(     'name',     (function(a,b,c){         return {             name:a,             age:b,             gender:c         }     })('孙悟空',18,'男') )