同源策略jsonp阻塞事件

Posted 2022-05-09 jony-it

同源策略：

举个例子，你在访问 某个网页的时候比如 www.xxxx.com ,返回的html页面中存在的js在执行的时候只会在 xxxxx 这里执行，如果同时存在另一个tab 是 www.yyyyy.com 其中的js 在执行的时候只在 yyyyy 返回的这个首页网页中执行。

浏览器加载js的时候会判断 js 所属的 1.域名 2.端口 3.协议

 

jsonp：

json 是数据表达格式，类似于xml 当然，我说的类似值得的是它们都是数据表达格式，但是实现方式和格式都不同，在此不多说。

jsonp  = json + padding，为什么是padding 增加，说实话我也没太明白，或许意思是 json 格式的扩展？。

jsonp 针对跨域请求，可以完美执行，因为浏览器对html 标签不会进行跨域拦截  （cross-domain），但是如果js中利用ajax 执行的话，虽然请求会发送到目标地址，但是相应的回参会被拦截，同时控制台会有报错信息。

但是如果有一些跨域请求是存在的，或者是我们是把这些请求放在白名单中的，那么就可以用jsonp的方式进行请求，实现方法就是用element 节点进行访问。

<script src="//cross-domain/xxxx？callback=test()"></script>

通过这种方式访问跨域目标地址。

其中callback 是必填的，也就是说在callback的值代表回调函数的名称，针对jsonp 的服务接口中会接口callback参数，并回调callback指定的函数。

当然自己写跨域请求的时候回麻烦一些，比如动态访问接口的时候，写一个方法，增加节点后还要再删除，为了下次请求做准备，会比较麻烦，可以通过一些前段扩展来实现会方便很多，比如jquery，文档请自行百度。

 

那么jsonp 个人理解就是针对跨域请求数据接口的一种技术方案。

 

3.关于阻塞事件

常用的有：

stopPropagation、stopImmediatePropagation：阻止事件向上/向下传播，注意是阻止向上/向下，但是不阻止本身的传播，比如div1 中 嵌套了div2，默认都是冒泡事件，div2绑定了2次事件，在div2 中绑定的第一个事件中使用stopPropagation，

那么div2的事件在执行完毕后，div1作为父节点不会再继续执行，但是div2 绑定的第二个事件还是会执行。

事件的触发机制是根据绑定的顺序来决定的，默认1，2是按顺序绑定，我们在事件1触发的时候不想继续传播下去，包括本身绑定事件2，那么可以利用 stopImmediatePropagation 方法阻止继续传播。

 

　　let p = document.querySelector(‘p‘);
    p.addEventListener(‘click‘,function () 
        // event.stopImmediatePropagation()
        event.stopPropagation()
        alert("p")
    ,false)

    p.addEventListener(‘click‘,function () 
        event.stopImmediatePropagation()
        alert("p2")
    ,false)

 

另外就是return，在匿名函数中代码最后一行执行return 也不会向上/向下传播，但是同样不会阻止本身的事件传播。

再有一个是preventDefault 方法，是阻止事件本身的触发机制，不会阻止事件的传播，比如有个form ，其中有一个元素input type 是submit，如果使用preventDefault 那么，不会默认请求form action中的地址。

例如下面，对一个a 标签元素绑定的click事件中，阻止事件本身的触发，a 中指定的url锚不会进行跳转。

let a = document.querySelector(‘a‘);
    a.addEventListener(‘click‘,function () 
        event.preventDefault();
    ,false)


// 元素 <a href="http://www.baidu.com">百度</a>