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. 关于在elasticSearch中使用聚合查询后只显示10个bucket的问题
			
    先看下面es查询语句 { "size": 0, "aggs" : { "all_articleId" : { "terms&quo ...
    
			
    2. 
						
  2. CJSON的封装API
			
    为了更方便使用C的JSON库,对其进行了一层封装. H文件: #ifndef __JSONHELPER__ #define __JSONHELPER__ #ifdef __cplusplus exte ...
    
			
    3. 
						
  3. 19 JPQL
			
    使用Spring Data JPA提供的查询方法已经可以解决大部分的应用场景,但是对于某些业务来说,我们还需要灵活的构造查询条件,这时就可以使用@Query注解,结合JPQL的语句方式完成查询 @Qu ...
    
			
    4. 
						
  4. 【字节校招】【实习】【内推】字节跳动春招(校招或实习均可)以及日常实习内推ing
			
    本人是年前刚刚入职抖音的应届生,职业认证还未来的级更改,但是这些都不重要.重要的是我们不能错过优秀的你~ 字节跳动的相关福利我就不介绍了,技术实习生是400/天,房补是1500/月,三餐免费,下午茶, ...
    
			
    5. 
						
  5. API服务版本控制 Microsoft.AspNetCore.Mvc.Versioning
			
    我们在进行webapi服务开发时,会遇到一些多个版本的api共存的情况发生,例如某一版本APP上线后,需求发生变更,需要在下一个升级版本更新API,但同时又需要保证这个APP版本能正常使用,这时候就需 ...
    
			
    6. 
						
  6. 什么是容器,什么是Docker?
			
    此文转载自http://www.cnblogs.com/CloudMan6/p/6751516.html行文时有所改动 什么是容器?什么是Docker? 容器是一种轻量级.可移植.自包含的软件打包技术 ...
    
			
    7. 
						
  7. css 超过标签定义的宽度后显示----
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    8. 
						
  8. python基础学习day02
			
    pycharm的安装以及简单使用 辅助开发软件,代码逐行调试,设计高端 python的种类: ​ CPython:官方推荐可以转换成c能够识别的字节码. ​ JPython:可以转化为Java语言能够 ...
    
			
    9. 
						
  9. 解决QQ“抱歉，无法发起临时会话，您可以 添加对方为好友以发送消息”
			
    很多网站,目前无法发起临时会话,自己在找网上找到教程,特分享给大家.自从2014年3月1日开始,网站上放置QQ客服代码的网站,在点击联系QQ时,以前可以正常发起临时会话的,现在提示:“抱歉,无法发起临 ...
    
			
    10. 
						
  10. 在 macOS 下备份/还原/重置 LaunchPad 布局
			
    原文链接:https://billc.io/2019/07/launchpad-layout-backup/ 前几天升级到 Catalina Public Beta 后,LauchPad 会出现无法刷 ...
    
			
    11.