关于jsonp跨域请求

时间:2019-01-10
本文章向大家介绍关于jsonp跨域请求,主要包括关于jsonp跨域请求使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

由于受到同源策源限制
无法使用ajax对其他源请求数据如
(静态页、动态页、web服务、wcf只要是跨域请求一律不准)

同源策略

同源指的是域名,端口,协议(http,https)相同

当使用ajax访问不同源数据是会出现类似
NO’Allow-Control-Allow-Orign’字样

使用jsonp

1.jsonp 使用get方法发送请求

该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据

如百度搜索框请求的url https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=jQuery
能得到返回的json数据
其中wd是搜索框的输入的数据,cb是callback

<script src=https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jQuery></scipt>
<script>
	function jQuery(data){
	console.log(data);
	}
</script>

通过script标签请求数据,服务器会返回jQuery名开头的数据(给什么cb参数就会返回以什么命名的类json数据),数据会被以上的jquery函数回调,请求的返回数据传则给data.以下是返回的数据
jQuery({q:“a”,p:false,s:[“爱奇艺”,“阿里云”,“and2girls”,“阿里巴巴”,“atlas”,“安居客”,“阿里巴巴批发网”,“爱思助手”,“安卓模拟器”,“阿里巴巴矢量图标库”]});

注意

回调函数名称要和给的callback参数相同才行

总结

因为返回的数据名称可能需要和自定义的回调函数相同才能调用,所以通常会将自己的回调函数名作为参数传递,可以通过js动态生成script标签进行请求完成后获取数据后回调函数中去掉创建的script标签节点