彻底弄懂jsonp原理及实现方法(跨域问题)

一.JSON和JSONP

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）

二.跨域的简单原理

现在我们模拟下非同源的环境，刚才我们不是已经用Visual Studio新建了一个Web程序吗(这里我们叫A程序)，现在我们再打开一个新的Visual Studio再新建一个Web程序(B程序)，将我们的之前的test.js文件从A程序中移除然后拷贝到B程序中。

两个程序都运行起来后，Visual Studio会启动内置服务器，假设A程序是localhost:20001,B程序是localhost:20002，这就模拟了一个非同源的环境了(虽然域名相同但端口号不同，所以是非同源的)。

<script type="text/javascript" src="http://localhost:20002/test.js"></script>

成功访问到了非同源的localhost:20002/test.js这个所谓的远程服务了。到了这一步，相信大家应该已经大概明白如何跨域访问了的原理了。

三.JSONP的实现模式–CallBack

刚才的小例子讲解了跨域的原理，我们回上去再看看JSONP的定义说明中讲到了javascript callback的形式。那我们就来修改下代码，如何实现JSONP的javascript callback的形式。

程序A中sample的部分代码：

<script type="text/javascript">
//回调函数
function callback(data) {
    alert(data.message);
}
</script>
<script type="text/javascript" src="http://localhost:20002/test.js"></script>

程序B中test.js的代码

//调用callback函数，并以json数据形式作为阐述传递，完成回调

callback({message:"success"});

/简单实现跨域问题/
程序A：
<script>
       function callback(data){
               alert(data.message)
      }
</script>
<script src="https://localhost:20002/text.js"></script>


程序B：
<script>
     callback({message:"succese"})
</script>

/动态跨域///
程序C:
<script>
      callback({message:"succese"})
</script>

程序D:
<script>
        function callback(data){
            alert(data.message)
       }
     
        function addScriptTag(src){
                    var script=document.createElement("script")
                    script.setAttribute("type","text/javascript")
                    script.src=src
                    document.body.appendChild(script)
        }
      window.onload= function (){
               addScriptTag("https://localhost/0808/text.js")
}
</script>

作者：快乐乔巴
出处：http://www.cnblogs.com/chopper/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载：https://www.cnblogs.com/soyxiaobi/p/9616011.html