同源策略、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

时间: 2024-10-10 18:21:41

同源策略、jsonp、阻塞事件的相关文章

同源策略 JSONP(实践篇)

JSONP详解 json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西.今天总算搞明白了.下面一步步来搞清楚jsonp是个什么玩意. 同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性.看起来不知道什么意思,实践一下就知道了. 1.随便建两个网页 一个端口是2698,一个2701,按照定义它们是不同源的. 2.用jQuery发起不同源的请求 在26

[oldboy-django][2深入django]浏览器同源策略 + JSONP + cros

浏览器的同源策略: - 同源: 同方法,同域名,同端口 http://www.baidu.com:8000 http: 方法 www.baidu.com: 域名 8000: 端口 - 定义 网上解析非常好的一篇 http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html - 限制 ajax只能发给同源的网址: 限制原理: 浏览器request--->跨域服务器 浏览器阻止接收<----跨域服务器响应, 服务器已经做出响应了,而且

浏览器的同源策略与跨域处理

一.  同源策略 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 下表给出了相对http://store.company.com/dir/page.html同源检测的示例: 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互. 允许跨源访问的一些例子: <script src="..."></script> 标签嵌入跨域脚本.语法错误信息只能在同源脚本中捕捉到. <link rel="style

同源策略——浏览器安全卫士

对于软件开发人员来说,理解同源策略.能够非常好地攻克了一个痛点. 不同域名下的资源读写 ! 古代的楚河汉界明白地规定了两方的活动界限.假设没有这些界限,天下必将大乱.相同,在我们的浏览器,也有着一些界限和策略,才让 Web 世界之所以能如此美好地呈如今我们面前.这些安全策略有效地保障了用户计算机的本地安全与Web安全. 同源策略 浏览器有一个非常重要的概念--同源策略(Same-Origin Policy).所谓同源是指,域名,协议.port同样.不同源的client脚(javascript.A

同源策略——浏览器的安全卫士

对于软件开发者来说,理解同源策略,可以很好地解决了一个痛点, 不同域名下的资源读写 ! 古代的楚河汉界明确地规定了双方的活动界限,如果没有这些界限,天下必将大乱.同样,在我们的浏览器,也有着一些界限和策略,才让 Web 世界之所以能如此美好地呈现在我们面前,这些安全策略有效地保障了用户计算机的本地安全与Web安全. 同源策略 浏览器有一个很重要的概念--同源策略(Same-Origin Policy).所谓同源是指,域名,协议,端口相同.不同源的客户端脚(javascript.ActionScr

Django 【第十九篇】JS实现的ajax、同源策略和前端jsonp解决跨域问题

一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高: jquery 实现的ajax index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

Web - JSONP和同源策略漫谈

0x00 前言 关于JSONP网上有很多文章了,我也是在拜读了别人的文章的基础上来写写自己的看法,这样可以加深自己印象,巩固一下学习效果.我们需要做的就是站在巨人的肩膀上眺望远方. 0x01 起 在Web前端开发中有一种安全机制,Javascript脚本只能访问与它同域的内容,这就是同源策略. 这里就需要先说明一个问题:如果确定脚本的域? html页面中试用脚本有两种方式:内联和引用. 上图中滑红框部分,src为引用方式,直接在script中写代码是内联方式. 如果html的页面url为:htt

同源策略和JSONP(概念性)

同源策略 浏览器有一个很重要的概念——同源策略(Same-Origin Policy). 所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(javascript.ActionScript)在没明确授权的情况下,不能读写对方的资源. 同源策略是基于安全考虑的,当前域不能访问其他域的东西.但这也带来一个问题,不同域之间如何协助.    简单的来说,浏览器允许包含在页面A的脚本访问第二个页面B的数据资源,这一切是建立在A和B页面是同源的基础上. 同源策略是由Netscape提出的一个著名的安全策

jsonp突破同源策略,实现跨域访问请求

跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一下"同源策略(Same-Origin Policy)",它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源,就是必须协议.域名.端口都一致的,才叫做同源.例如:http://www.12306.cn和https://www.