同源策略、jsonp、阻塞事件

同源策略:

举个例子,你在访问 某个网页的时候比如 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>
原文地址:https://www.cnblogs.com/jony-it/p/11240150.html