使用JSONP解决同源限制问题

Ajax请求限制

Ajax只能向自己的服务器发送请求

1. 同源:如果两个页面拥有相同的协议，端口和域名，那么这两个页面就属于同一个源，其中只要一个不相同，就是不同源
2. 同源政策的目的:为了保证用户信息的安全，防止恶意的网站窃取数据，最初的同源政策是指A网站在客户端设置的Cookie,B网站是不能访问的
3. 使用JSONP解决同源限制问题(它不属于Ajax请求,但他可以模拟Ajax请求)

Ajax请求过程

1. 将不同源的服务器端请求地址写在script标签的src属性中
2. 服务器端相应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数
3. 在客户端全局作用域下定义函数fn
4. 在fn函数内部对服务器端返回的数据进行处理

JSONP代码优化

4. 客户端需要将函数名称传递到服务器
5. 将script请求的发送变成动态请求

 <button class="btn">点我发送请求</button>
    <!-- <script>
    </script> -->
    <!-- 将非同源服务器端的请求地址写在script标签中 -->
    <!-- <script src="http://localhost:3000/test">
    </script> -->
    <script>
         var btn = document.querySelector('.btn');
        btn.onclick = function(){
            
            jsonp({
            url:'http://localhost:3000/test',
            data:{
               name:'lisi',
               age:20
            },
            success:function(data){
                console.log(123);
                console.log(data);
            }
            
        })
        }
        function jsonp(options){
            // 动态创建script标签
            var script = document.createElement('script');
            var params = '';
            for(var attr in options.data)
            {
                params += '&' + attr +'='+options.data[attr];
            }
            var fnName = 'myjsonp' + Math.random().toString().replace('.','');
            // 变成全局函数
            window[fnName]=options.success;
            // 设置scr属性
            script.src = options.url + '?callback=' + fnName + params;
            // 将script标签追加到页面中
            document.body.appendChild(script);
            // 为script添加onload事件
            script.onload = function(){
            // 在body内部删除script标签
                document.body.removeChild(script);
            }
        }
       
    </script>