jsonp的原理与实现

jsonp是一种跨越同源限制实现请求数据的方法。 由于浏览器存在同源限制的策略，即只有当协议、域名、端口号都相同的情况下浏览器才会对服务器发起请求。 但有个特列：即通过script标签从服务器请求数据不会受到浏览器同源策略的限制，这种方式有个缺点，只能使用Get请求。

现在说一下使用jsonp实现跨域请求的原理： 前端在页面里添加一个回调方法：

<script>
    function jsonpCallback(resData) {
        // 对回调数据进行处理
    }
</script>

然后在需要发起jsonp请求的地方调用如下函数：

<script>
    // scr是请求的api地址，callback是回调函数，这里即是jsonpCallback函数
    function reqServerData(src, callback) {
        var scriptDom = document.createElement('script')
        var headDom = document.getElementByTag('head')[0]
        
        scriptDom.setAttribute('src', src + '?' + callback)
        headDom.append(scriptDom)
    }
</script>

例如：

<script>
    reqServerData('http://www.myweb.com/api/test.json', 'jsonpCallback')
</script>

当服务器收到请求后，会返回执行回调函数的脚本，并将处理好的数据作为函数的参数传入：

<script>
    jsonpCallback({title：'这是返回的数据', id: 1})
</script>

浏览器执行这个回调函，请求成功。