json原理解析-一一网

这是我参与更文挑战的第3天，活动详情查看：更文挑战

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)
          }

})
复制代码