js基于script标签实现跨域(jsonp)

责编:menVScode 2017-06-13 14:26 阅读(1095)

        JSON(JavaScript Object Notation){javascript对象表示法}是一种数据交换格式;JSONP(JSON with Padding) 是一种可以绕过同源策略的方法,即通过使用json与标记结合的方法。总的来说json就是一种数据格式,jsonp是一种非正式的数据交换协议。 

        上面提到了同源策略,什么是同源策略?同源策略是由Netscape提出的的一个著名的安全策略,现在所有支持javascript的浏览器都会使用这个策略,所谓同源就是指,域名、协议、端口号相同,当在一个浏览器打开两个网站的页面时,某一个网站在执行js脚本时会检查访问的资源是否属于本域范围,只有本域范围内的资源才能被访问。在不同的域名下,就不能进行数据交互了。

        script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签: 

var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'http://www.menvscode.com/wodi.json?callback=getData';
document.body.appendChild(oScript);	

           这样通过动态创建script标签就可以加载其它域的js文件,然后通过本页面就可以调用加载后js文件的函数,这样做的缺陷就是不能加载其它域的文档,只能是js文件,jsonp便是通过这种方式实现的,jsonp通过向其它域传入一个callback参数,通过其他域的后台将callback参数值和json串包装成javascript函数返回,因为是通过script标签发出的请求,浏览器会将返回来的字符串按照javascript进行解析执行,实现了域与域之间的数据传输。

        具体代码如下:

<script>
function createJs(sUrl){
	var oScript = document.createElement('script');
	oScript.type = 'text/javascript';
	oScript.src = sUrl;
	document.body.appendChild(oScript);	
}
createJs('http://www.menvscode.com/wodi.json?callback=getData');
//地址中的数据格式为:getData({name:'sss'})

function getData(json){
	alert(json.name);
}
</script>

        如果不是动态的添加的话,要注意两对script标签前后顺序,不然会报错。

<script>	
    function box(json){
	alert(json.name);
    }
</script>
<script type='text/javascript' src='jsonp.js?callback=box'></script>
标签: jsonp 跨域 script js
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码