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. Java - 常见的算法
			
    二分法查找 private static int binarySearch(int[] list,int target) { ; ; //直到low>high时还没找到关键字就结束查找,返回-1 ...
    
			
    2. 
						
  2. Python-PhantomJS的安装和使用
			
    PhantomJS无需浏览器的Web测试: PhantomJS官网下载地址:https://phantomjs.org/download.html 下载PhantomJS zip文件,解压放置在D:\ ...
    
			
    3. 
						
  3. 一起了解 .Net Foundation 项目 No.14
			
    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. .NET Core .NE ...
    
			
    4. 
						
  4. 关于form表单:hover没有修改表单子元素样式
			
    原来在写todolist的时候遇到的一个问题 是关于form表单的hover属性设置背景颜色 想要实现的效果如下: 但是一开始直接给form加hover选择器的时候是这样: 可以看到这样子直接加会使得 ...
    
			
    5. 
						
  5. bootstrap table分页跳转到第一页
			
    1.destroy后重新初使化表格,可以将表格初始化封装为一个函数,destory后重新调用该函数进行初始化: 2.使用url刷新表格,$('#table').bootstrapTable('refr ...
    
			
    6. 
						
  6. python.五角星
			
    import turtle turtle.pensize(4)turtle.pencolor("black") turtle.fillcolor("red")t ...
    
			
    7. 
						
  7. Python之locust踩坑指北
			
    坑点1:locust安装报错 其中一种情况:error:Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visua ...
    
			
    8. 
						
  8. C++ 指针实现字符串倒序排列
			
    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <coni ...
    
			
    9. 
						
  9. juery 实现选项卡
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    10. 
						
  10. c 将年月日转化为星期
			
    /*得到年月日转化为星期几*/ LOCAL ulong_t DateWeekGet(ulong_t year,ulong_t month,ulong_t day) { ulong_t c = ; ul ...
    
			
    11.