js里的同源

/*------------同源---------------*/

同源:当两个接口的协议、域名、端口号都相等时,这俩接口是同源的,只要有一个条件不相等,则非同源。不是同源的两个页面不能互相访问本地缓存、不能互相修改dom节点、不能使用ajax请求对方接口数据

如何判断两个网页同源

1、协议相同       2、域名相同          3、端口号相同

同源策略目的:1、保护本地缓存不被读取2、保护网站不被其他网站修改

同源策略的限制:

1、Cookie、localStorage、indexDB无法读取

2、dom节点无法获得。

3、AJAX请求无法发送。

JSONP:利用scritp标签请求外部服务器中的数据,从而绕开同源策略对AJAX请求数据的限制。

jsonp的本质:利用script标签中src属性可以加载任意文件的特性,通过这个属性来访问数据接口(添加一个回调函数作为参数),而数据接口会返回一个由回调函数名包裹的json数据,从而达到获取跨域数据的目的。

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'http://10.0.159.198/data.php?callback=foo';

document.getElementsByTagName('head')[0].appendChild(script);

function foo (data) {

alert(data);

}

/*------------封装JSONP---------------*/

function creatScriptTag (srcString) {

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = srcString;

document.getElementsByTagName('head')[0].appendChild(script);

}

creatScriptTag('http://10.0.159.198/data.php?callback=abc');

function abc (data) {

alert(data);

}

ajax和jsonp其实本质上是不同的东西。

ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容