1，什么是跨域？

　　跨域跨域，跨过域名，笼统来说就是一个域名区请求另外一个域名的数据，但实际上，不同端口、不同域名、不同协议上请求数据都会出现跨域问题。浏览器出于安全考虑会报出异常，拒绝访问。

2，jsonp的原理？

　　jsonp（json with padding）是一种十分常见的实现跨域请求的手段，利用src属性能跨域请求的特点来实现。

　　比如：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

　　这段代码就实现了引用jQuery的功能，请求成功后返回jQuery的源码。不止script标签，audio，img标签都能 进行跨域请求并且不被浏览器拦截。

　　想要使用jquery里的方法，就必须引入jquery，换句话说，必须要有这个方法，然后我们才能使用

　　比如：引用jquery，来实现点击变色的效果：

<body>

        <div id="app">点击变色</div>

        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

        <script type="text/javascript">

            $('#app').click(function() {

                this.style.color = 'red'

            })

        </script>

 </body>

　　这里可以看到，引用完Jq之后就能调用它封装好的click方法。

　　也就是说，我们可以提前定义一个包含参数的方法，然后调用的时候把数据当做实参传入就能实现对数据的操作

    <script type="text/javascript">

        function who(r){

            console.log(`我的名字是${r}`)

        }

    </script>

    <script type="text/javascript">

        who("小明")

    </script>

　　再深入一点，我们在前台定义一个函数，然后请求后端返回这个函数的调用

　　现在有一个数据为person，返回给前台使用。

　　server.js文件里的代码：请求时会返回  一个回调函数  who（小明）

　　const http =require("http");
　　　　http.createServer((req,res)=>{
　　　　var person='小明'
　　　　res.write(`who("${person}")`)
　　　　res.end()
　　}).listen(3003)

　　index.html文件里的代码：

<body>

    <script type="text/javascript">
　　　　function who(r){
　　　　　console.log(`我的名字是${r}`)
　　　　}
</script>
　　<script src="http://localhost:3003"></script>//请求成功后则执行  who(小明)
</body>

　　输出结果：

　　　

　　如此一来，就实现了一个简单的跨域获取数据的操作。

3，怎么实现jsonp？

　　jsonp的实现很简单，就是动态创建一个script标签

　　比如：点击按钮获取后台数据  后台代码同上面的server.js

<body>
<button id="btn">点击获取数据</button>
<p id="text"></p>

<script type="text/javascript">
　　function who(r) {
　　document.getElementById('text').innerText = r
}
document.getElementById("btn").addEventListener("click", () => {
　　var script = document.createElement("script")
　　script.src = "http://localhost:3003"
　　document.body.appendChild(script)

　　document.querySelector("body script:last-child").remove()
})
</script>
<!-- <script src="http://localhost:3003"></script> -->

</body>

　　

　　

　　这样写存在一个弊端，就是前后端必须严格的统一，设定好回调函数名称，比如这里回调函数都为 who（）

　　

前台只需重新设置下src的值 　
script.src = "http://localhost:3003?callback=getName"
后台获取传入的callback的值然后重新拼接，
res.write(`${callback}("${person}")`)




　　


  • 最后再记录一下jquery中jsonp的使用




$.ajax({

         type: 请求方式get|post,

         url: 请求地址,

         dataType: "jsonp",//最关键的一步，使用jsonp

         jsonp: "callback",//回调函数的参数名,默认为callback

         jsonpCallback: "callBackFun",//回调函数的函数名


　　　　　　/*
　　　　　　　　例如这里
　　　　　　　　jsonp:myCallback
　　　　　　　　jsonpCallback:getName


　　　　　　　　则请求地址为http://localhost:3003?myCallback=getName


　　　　　　*/


         success:function(){

              console.log(this)

          },

          error:function(){

              console.log("error"+this)

          }
})




查看更多内容请访问:根号七的网站
												


											
jsonp跨域的原理及实现的更多相关文章
	

    
						
  1. JSONP跨域的原理解析( 一种脚本注入行为)
		
    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
    
		
    2. 
						
  2. JSONP跨域的原理解析
		
    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
    
		
    3. 
						
  3. Jsonp跨域访问原理和实例
		
    >>什么是跨域 出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...
    
		
    4. 
						
  4. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器
		
    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
    
		
    5. 
						
  5. 【转】JSONP跨域的原理解析
		
    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
    
		
    6. 
						
  6. JSONP跨域的原理解析（转）
		
    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
    
		
    7. 
						
  7. JSONP跨域的原理
		
    一种脚本注入行为 在 2011年10月27日 那天写的     已经有 12671 次阅读了 感谢 参考或原文   服务器君一共花费了23.005 ms进行了2次数据库查询,努力地为您提供了这个页面. ...
    
		
    8. 
						
  8. JSONP跨域的原理解析及其实现介绍
		
    JSONP跨域的原理解析及其实现介绍 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-22 JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并 ...
    
		
    9. 
						
  9. JSONP跨域的原理解析[转]
		
    转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中, ...
    
		
    10. 
						
  10. [转载]JSONP跨域的原理解析
		
    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. JVM性能优化
			
    java应用程序是应用在JVM上的,你们对JVM又有多少了解呢?JVM将内存分为三部分:NEW(年轻代).Tenured(年老代).Perm(永久代). (1)年轻代:用来存放java分配的新对象.  ...
    
			
    2. 
						
  2. 用 Python 生成 HTML 表格
			
    在 邮件报表 之类的开发任务中,需要生成 HTML 表格. 使用 Python 生成 HTML 表格基本没啥难度, for 循环遍历一遍数据并输出标签即可. 如果需要实现合并单元格,或者按需调整表格样 ...
    
			
    3. 
						
  3. input type="file"使用
			
    问题: 在实际开发过程中,会遇到上传文件的一些需求.但是使用原生的<input type="file" />在使用中存在一些问题 在未上传文件时,显示"no  ...
    
			
    4. 
						
  4. PySide2的This application failed to start because no Qt platform plugin could be initialized解决方式
			
    解决PySide2的This application failed to start because no Qt platform plugin could be initialized问题 今天在装 ...
    
			
    5. 
						
  5. SpringBoot1.5.10.RELEASE配置mybatis的逆向工程
			
    在application.properties配置扫描等,不做多说 1.在pom配置文件中引入mybatis和mysql的依赖,如下: <dependency> <groupId&g ...
    
			
    6. 
						
  6. 数据库介绍以及MySQL数据库的使用
			
    一 数据库介绍 1.1 数据库定义 数据库就是存储数据的仓库  本质上就是一套cs结构的TCP程序   客户端连接到服务器 向服务器发送指令  完成数据的操作 1.2  常见数据库 关系型数据库 就是 ...
    
			
    7. 
						
  7. Asp.Net Core 中IdentityServer4 授权中心之自定义授权模式
			
    一.前言 上一篇我分享了一篇关于 Asp.Net Core 中IdentityServer4 授权中心之应用实战 的文章,其中有不少博友给我提了问题,其中有一个博友问我的一个场景,我给他解答的还不够完 ...
    
			
    8. 
						
  8. C语言程序设计（十二） 结构体和共用体
			
    第十二章 结构体和共用体 当需要表示复杂对象时,仅使用几个基本数据类型显然是不够的 根本的解决方法是允许用户自定义数据类型 构造数据类型(复合数据类型)允许用户根据实际需要利用已有的基本数据类型来构造 ...
    
			
    9. 
						
  9. 【视频+图文】Java基础经典练习题（一）输出2-100之间的素数，及素数个数
			
    目录 第一题:判断2-100之间有多少个素数,并输出所有素数. 1.视频讲解: 2.思路分析: 代码讲解:以i=4为例 4.为大家准备了彩蛋: 能解决题目的代码并不是一次就可以写好的 我们需要根据我们 ...
    
			
    10. 
						
  10. C结构体与链表
			
    今天来总结C语言的学习盲点--结构体,为了不显单一,也为了补足作者链表的编程缺陷,特更此博文,总结近段时间的学习成果.话不多说,先上一段代码 struct none{int item; link ne ...
    
			
    11.