jsonp跨域的原理及实现
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) }
})
查看更多内容请访问:根号七的网站