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>

document.querySelector("body script:last-child").remove()
})
</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跨域的原理及实现

猜你喜欢