JSONP和AJAX相同,都是客户端向服务器端发送请求:一、给服务器端传递内容二、从服务器端获取数据 的方式jquery
AJAX属于同源策略ajax
JSONP属于非同源策略(跨域请求) -> 实现跨域请求的方式有不少种,只不过JSONP是最经常使用的json
区分同源和非同源:跨域
当前页面的地址 && 数据请求的接口地址缓存
1)协议 2)域名或者IP 3)端口号服务器
以上三部分彻底相同属于同源策略,就是用AJAX技术请求数据,若是有一个不一样就属于非同源策略,通常使用JSONP技术请求数据异步
JSONP的原理:JSONP请求必定须要对方的服务器作支持才能够async
在script的世界中,没有同源跨域这一说,只要你给我src属性中的地址是一个合法的地址,script均可以把对应的内容请求回来,JSONP就是利用了script的这个原理
一、首先把须要请求数据的那个跨域的API数据接口的地址赋值给script的src属性中函数
二、把当前页面中的某一个函数名当作参数值传递给须要跨域请求数据的服务器(url问好传参:callback=fn)jsonp
三、服务器接收到请求后,须要进行特殊的处理,把你传递进来的函数名和它须要给你数据拼接成一个字符串, 例如:咱们传递进去的函数名是fn,它准备好的数据是"fn([{'name':'xxx'}])"
四、最后服务器把准备的数据经过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
})