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. 一起了解 .Net Foundation 项目 No.12
			
    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Cecil Cecil 是 ...
    
			
    2. 
						
  2. 在WPF（core版本）中引用外部字体不可用问题说明
			
    这几天使用WPF写软件,想引用外部字体,于是下载了字体文件: 然后在App.xaml中添加了如下代码: <FontFamily x:Key="Digital-7 Mono"& ...
    
			
    3. 
						
  3. 后端工程师必知必会的前端 css 知识
			
    后端工程师虽然大部分工作都是跟服务器缓存数据库打交道,但有时也需要写一些前端代码. 有些公司的OAM后台基本是由后端工程师承包的,所以前端基础知识是必须要掌握的:就算开发中不直接写前段代码,了解前端知 ...
    
			
    4. 
						
  4. 高性能内存队列Disruptor--原理分析
			
    1.起源     Disruptor最初由lmax.com开发,2010年在Qcon公开发表,并于2011年开源,其官网定义为:"High Performance Inter-Thread  ...
    
			
    5. 
						
  5. Java基础--面向对象（上）
			
    一.面向对象的概念 1.什么是面向对象? (1)面向对象是一种符合人类思维习惯的编程思想. (2)面向对象是一种思考问题的思维方式. 2.三种特性: (1)封装性 (2)继承性 (3)多态性 3.建立 ...
    
			
    6. 
						
  6. angular root在css和less的写法
			
    背景:angular7项目,angular cli创建了一个模板 新建了一个common.css 本身modle会有一个专属的less文件 写样式 父组件下的子组件样式修改 什么情况下用:root   ...
    
			
    7. 
						
  7. 这样学习Servlet，会事半功倍！！
			
    前言 工作已经有一段时间了,如果让我重新学Servlet,我会怎么学呢?下面抛出两个常见的问题,我分开来解答 2020年了,还需要学Servlet吗? Servlet的学习路线(学习重点) 一.202 ...
    
			
    8. 
						
  8.  FPGA边沿检测Verilog代码
			
    FPGA边沿检测Verilog代码(上升沿,下降沿,双边沿) 实现思路:用两个一位寄存器直接异或可以实现 代码实现: ​ module edge_detect( input clk, input rs ...
    
			
    9. 
						
  9. nes 红白机模拟器 第2篇 InfoNES
			
    InfoNES 支持 map ,声音,代码比较少,方便 移值. 在上个 LiteNES  的基础上,其实不到半小时就移值好了这个,但问题是,一直是黑屏.InfoNES_LoadFrame ()  Wo ...
    
			
    10. 
						
  10. Jira使用说明文档
			
    1      建立项目 1.1    权限归属 Jira系统管理员 1.2    执行内容 建立项目.工作流分配调整.制定项目负责人及默认经办人 1.3    建立项目过程 登录使用Jira系统管理员 ...
    
			
    11.