一，同源策略其实网络的安全基石，既：http://www.baidu.com:80协议（http或者HTTPS或者ws或者wss)、域名（www.baidu.com）、端口（默认80，可以不写 https默认是443端口）相同。防止一些信息被人盗取或者破坏，具体的概念在这里就不详细述说了，大家可参考阮一峰大师的文章（http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html）。

二，大家有没有注意下面的这种情况：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		img{

			width:200px;

			height: 100px;

		}

	</style>

</head>

<body>

	<img src="https://mdn.mozillademos.org/files/12676/star.svg" alt="">

</body>

</html>

　　上面代码红色区域src 引用的是https协议下的一个网路图片，但是你把代码在本地浏览器打开的时候，也可以请求到图片，看一下图片的对比。也就是说下面两个链接是在不同域情况下打开的，但是可以跨域请求到想要的图片。也就是说我们可以利用src的属性进行跨域请求数据，也就是说 script标签也可以跨域请求相应的资源，如：<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

　三，先让大家看代码<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		img{

			width:200px;

			height: 100px;

		}

	</style>

  <script>
　　　　　function a(){
　　　　　　alert(1)
　　　　　}

  </script>

</head>

<body>

	<script>

		a();

	</script>

</body>

</html>

　　大家用浏览器打开页面，会看到页面弹出了1，注意看标记为红色的区域。是在两个不同的script一个赋值一个请求，这样是可以请求道的。说这个的目的是为了为下面封装jsonp 做解释。

四，先看封装好的jsop函数：原理：前端定义个全局的函数，动态创建script,利用src去请求后台的资源，只是后台返回的是一个参数为前端所需数据的前端全局函数的调用。看下图：请求道的是一个函数的调用。

下面我对代码里①到⑦做一一的解释。

①：cbName是为了跟后台创建一个相应的规则协议，跨域请求的时候，允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，客户端可以随意定制自己的函数（fnName）来自动处理返回数据了。

②：每次请求相同的src浏览器会缓冲，所以在uri后面添加时间戳，防止二次请求的时候，返回不是最新想要的数据。

③：url路径不允许带有小数点，由于时间戳带有小数点，要把小数点替换成空。

④：src去请求数据时 可以自定义取数据的时间，超过规定的时间，就定义为请求超时。请求超时就不要再让window.fn继续执行处理数据，window[fnName] = null。

⑤：跨域请求过来的是自定义的回调函数的调用，当回调调用成功后，也就是调用了全局的window[fnName]函数（这函数里也可以继续回调（success）函数）来处理数据，达到自己想要的数据类型或者舍取。由于获取成功后相应超时的限制意义就不存在了，要把定时器关闭。并把创建好的script对象删除。

<script>

fnName (json) {//window下的函数

　　......XXXX

}

</script>

再在动态创建的srcpt里，请求到后台返回数据（数据为：函数的直接调用）。

<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E7%8E%8B%E6%B5%A9&cb=jsonp_p08777009389580372#"></script>   ===  window.fnName();

⑥：拼接url,到达协议的要求，即：后台返回jsonp回调函数的要求：关键字、cbName及其他请求参数。

⑦：dom操作创建添加script标签，动态请求数据，成功后直接删除。

function jsonp(options){

	if(!options.url){return;}

	options = options||{};

	options.data = options.data||{};

	options.cbName = options.cbName||'cb';//①

	options.timeout = options.timeout||10000;

	var fnName = 'jsonp_p'+Math.random();//②

	var fnName = fnName.replace('.','');//③

	var timer = setTimeout(function(){//④

		options.error&&options.error();

		window[fnName] = null;

	},options.timeout);

	window[fnName] = function(json){ //⑤

		options.success&&options.success(json);

		clearTimeout(timer);

		document.getElementsByTagName('head')[0].removeChild(oS);

	};

	//cb = show

	options.data[options.cbName] = fnName;

	var arr = [];

	for(var name in options.data){//⑥

		arr.push(name+'='+options.data[name]);

	}

	var oS = document.createElement('script');//⑦

	oS.src = options.url+'?'+arr.join('&');

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

}

　　五，以上就是本人对jsonp的理解，由于小生才能有限，写的不到位的地方请大神多多指教，本人将不吝赐教，谢谢！

同源策略引发对跨域jsonp跨域的理解的更多相关文章

  1. 面试汇总——知道什么是同源策略吗？那怎么解决跨域问题？知道 JSONP 原理吗？

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

  2. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  3. 跨域问题解决方案(HttpClient安全跨域 & jsonp跨域)

    1 错误场景 今天要把项目部署到外网的时候,出现了这样的问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 运行 都没有问题的, 一旦把我需要调用接口的项目B放到其他的服务器上, 就会 ...

  4. 浏览器同源策略，跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  5. Ajax跨域请求 同源策略与Jsonp

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

  6. Django之跨域请求同源策略

    同源策略: 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过 ...

  7. 1.7 xss之同源策略与跨域访问

    同源策略: 同源策略 在web应用的安全模型中是一个重要概念.在这个策略下,web浏览器允许第一个页面的脚本访问第二个页面里的数据,但是也只有在两个页面有相同的源时.源是由URI,主机名,端口号组合而 ...

  8. 同源策略和跨域资源共享（CROS）

    同源策略 Same-origin policy - Web security | MDN 跨站资源共享 Cross-Origin Resource Sharing (CORS) - HTTP | MD ...

  9. 同源、同源策略、跨域问题、django解决方案

    什么是同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 注意:假如你的网站ip是123.123.123.123,网站的域名是www.abc.com. ...

随机推荐

  1. 割点（Tarjan算法）【转载】

    本文转自:www.cnblogs.com/collectionne/p/6847240.html 供大家学习 前言:之前翻译过一篇英文的关于割点的文章(英文原文.翻译),但是自己还有一些不明白的地方, ...

  2. win10下安装配置mysql-8.0.13--实战可用

    1.下载mysql-8.0.13安装包 1 https://dev.mysql.com/downloads/mysql/ 选择zip安装包下载就好. 2.解压到你要安装的目录 3.创建my.ini配置 ...

  3. 三大文本处理工具grep、sed及awk

    一.   用grep在文件中搜索文本 grep能够接受正则表达式,生成各种格式的输出.除此之外,它还有大量有趣的选项. 1.  搜索包含特定模式的文本行: 2.  从stdin中读取: 3.  单个g ...

  4. laravel5.2总结--返回值

    基本概念和概述 1>StdClass 对象=>基础的对象 2>Eloquent 模型对象(Model 对象)=>和模型相关的类对象 3>Eloquent 集合=>可 ...

  5. Cardinality (基数)

    名词 Cardinality:    优化器在计算成本的时候,需要从统计信息中取得数据,然后去估计每一步操作所涉及的行数,叫做Cardinality.    比如,一张表T有1000行数据,列COL1 ...

  6. loj #6485. LJJ 学二项式定理 （模板qwq）

    $ \color{#0066ff}{ 题目描述 }$ LJJ 学完了二项式定理,发现这太简单了,于是他将二项式定理等号右边的式子修改了一下,代入了一定的值,并算出了答案. 但人口算毕竟会失误,他请来了 ...

  7. 【NOIP 2011】Mayan游戏（搜索+模拟）

    描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.**游戏通关是指在规定的步数 ...

  8. AtCoder - 2581 树状数组

    You are given an integer sequence of length N, a= {a1,a2,…,aN}, and an integer K. a has N(N+1)⁄2 non ...

  9. 14.链表中倒数第k个节点

    题目描述:   输入一个链表,输出该链表中倒数第k个结点. 思路分析:   设置两个指针,一个fast一个slow,都从链表头开始,让fast先走k步,然后两个指针一起走,当fast走到尾部,那么sl ...

  10. PAT天梯赛 L1-050 倒数第N个字符串

    题目链接:点击打开链接 给定一个完全由小写英文字母组成的字符串等差递增序列,该序列中的每个字符串的长度固定为 L,从 L 个 a 开始,以 1 为步长递增.例如当 L 为 3 时,序列为 { aaa, ...