2019独角兽企业重金招聘Python工程师标准>>>
JSONP和AJAX相同,都是客户端向服务器端发送请求:1、给服务器端传递内容2、从服务器端获取数据 的方式
AJAX属于同源策略
JSONP属于非同源策略(跨域请求) -> 实现跨域请求的方式有很多种,只不过JSONP是最常用的
区分同源和非同源:
当前页面的地址 && 数据请求的接口地址
1)协议 2)域名或者IP 3)端口号
以上三部分完全相同属于同源策略,就是用AJAX技术请求数据,如果有一个不同就属于非同源策略,一般使用JSONP技术请求数据
JSONP的原理:JSONP请求一定需要对方的服务器做支持才可以
在script的世界中,没有同源跨域这一说,只要你给我src属性中的地址是一个合法的地址,script都可以把对应的内容请求回来,JSONP就是利用了script的这个原理
1、首先把需要请求数据的那个跨域的API数据接口的地址赋值给script的src属性中
2、把当前页面中的某一个函数名当做参数值传递给需要跨域请求数据的服务器(url问好传参:callback=fn)
3、服务器接收到请求后,需要进行特殊的处理,把你传递进来的函数名和它需要给你数据拼接成一个字符串, 例如:我们传递进去的函数名是fn,它准备好的数据是"fn([{'name':'xxx'}])"
4、最后服务器把准备的数据通过HTTP协议返回给我们客户端,客户端发现其实就是让我们的fn执行,而且还给fn传递了一堆的数据,那些数据就是我们想要的
jquery的ajax和JSONP的调用
ajax:
$.ajax({
url:"",
type:"",
dataType:"json",
data:null,
async:true,
timeout: 1000, //设置超时时间,一般都设置3000ms
cache:false, //设定get请求的时候不走缓存数据,原理就是在url后面加一个缓存数,默认值是true
success:function(data){},
error:function(data){}
})
jsonp:都是GET和异步请求的,不存在其他的请求方式和同步请求,而且jquery会默认会给JSONP的请求清除缓存
$.ajax({
url:"",
dataType:"jsonp",
timeout: 1000, //设置超时时间,一般都设置3000ms
jsonpCallback:"fn" //自定义传递给服务器的函数名,而不是jquery自动生成的
jsonp:"cb" //吧传递函数名的那个形参callback变为cb
})