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. python基础知识的重新认识
			
    昨天模拟书本上client和server交互的例子,代码明明是按照书上写的,可是就是出现了错误,像下面这样: # tcpserver from socket import * from time im ...
    
			
    2. 
						
  2. 7-5 jmu-python-分段函数1 (10 分)
			
    本题目要求计算下列分段函数f(x)的值(x为从键盘输入的一个任意实数): 输入格式: 直接输入一个实数给 x,没有其他任何附加字符. 输出格式: 在一行中按“f(x)=result”的格式输出,其中x ...
    
			
    3. 
						
  3. py基础之模块与包
			
    '''模块:当代码越来越多时,将所有代码放入一个文件中便会无法维护,所以放到多个文件中去,这样每一个py文件就是一个模块 包:模块越来越多时容易重名,便将模块放入不同的包中,每个包中必须有一个__in ...
    
			
    4. 
						
  4. 1024程序员节最新福利之2018最全H5前端资料集
			
    前言 有好久没有写博客了,主要这段时间都沉迷学习无法自拔了,哈哈.自吹一波. 前两天不是1024节吗,所以就有很多福利出现了,当然每个人能都获得的信息都有所不同,这就是所谓的信息差.秉着好东西需要分享 ...
    
			
    5. 
						
  5. 自定义checkbox， radio样式总结
			
    任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现 ...
    
			
    6. 
						
  6. PHP5.6.23+Apache2.4.20+Eclipse for PHP 4.5开发环境配置
			
    一.Apache配置(以httpd-2.4.20-x64-vc14.zip为例)(http://www.apachelounge.com/download/) 1.安装运行库vc11和vc14 2.解 ...
    
			
    7. 
						
  7. 论JS函数传参时:值传递与引用传递的区别
			
    什么是值传递:值传递是指在调用函数时将实际参数(实参)复制一份传递到函数中,这样在函数中如果对参数进行修改,将不会影响到实际参数. 值传递的总结:也就是说,将实参复制到函数中的这个过程叫值传递 什么是 ...
    
			
    8. 
						
  8. disruptor 核心概念 二
			
    一.Disruptor图解 二.disruptor核心概念 1.RingBuffer到底是啥?正如名字所说的一样,他是一个环(首尾相接的环)它用做在不同上下文(线程)间传递数据的buffer Ring ...
    
			
    9. 
						
  9. 写react项目要注意的事项
			
    1,className一定是大写字母开头,例如:App-logo,App,App-header. 2,有关react元素的更新,唯一办法是创建新元素,然后重新将其传入ReactDOM.render() ...
    
			
    10. 
						
  10. javascript的“好莱坞原则”
			
    好莱坞原则——不要给我们打电话,我们会给你打电话(don‘t call us, we‘ll call you).在Javascript中就是:别调用我们,我们会调用你. “好莱坞原则”强调的是高层对低 ...
    
			
    11.