如何使用JSONP实现跨域请求？

如何使用JSONP实现跨域请求？

大家好，今天分享一个我自己写的跨域请求的demo，看了网上的代码有的数据很复杂，有的又很啰嗦。我用最简单的demo讲明白。如何跨域请求？

步骤：

1、准备数据：

（1）、注册聚合数据（网址是：https://www.juhe.cn/），可以获取免费的数据。

（2）、注册完成后，（使用的数据是“手机号码归属地”），找到这个页面，然后申请数据。

（3）、请求示例的地址就是我们所需要的数据，你会看到上面key=您申请的KEY,那么如何找到你的key呢？

（4）、那么此时我们的静态地址是http://apis.juhe.cn/mobile/get?phone=13429667914&key=您申请的KEY。我这里没有改key后面的值，你需要自己改下才可以哦。

获取后的数据是（见下图）：

2、使用工具：IDE是WebStorm

3、使用原生JavaScript来实现跨域请求。我们要实现跨域请求就要使用script的src属性自有的特性，因为src是没有域名限制。我们让src来引入一个数据接口。

demo-1的实例(此实例直接引入静态src)：

    
     
     
    
    <script type="text/javascript">
        //获取跨域数据，获取手机归属地
        function doFunction(data) { //data和doFunction都是可以自己定义，但是我们习惯这样定义。
            alert(data.resultcode);
        }
        //下面的script是通过src获取跨域数据，在原始数据后面添加&callback=doFunction,这里的doFunction要跟上面的函数名一直。
    </script>
    <script src="http://apis.juhe.cn/mobile/get?phone=13429667914&key=7198c4347218ce950cf0e7a4139121c6&callback=doFunction"></script>

demo-2的实例（此实例是静态的）：

    
      
      
    
    <script type="text/javascript">
        //获取跨域数据，获取手机归属地
        window.οnlοad= function () {
            //获取p标签
            var paragraph=document.getElementById("paragraph");
            //当鼠标单击时的事件
            document.getElementById("btn").οnclick= function () {
                //创建script标签
                var createScript=document.createElement("script");
                //给script标签添加src属性,在原始数据后面添加&callback=doFunction,你自己的key,这里需要改才能运行
                createScript.src="http://apis.juhe.cn/mobile/get?phone=13429667914&key=你自己的key&callback=doFunction";
                //把script标签添加到head标签中
                document.getElementsByTagName("head")[0].appendChild(createScript);
            };
        };
        function doFunction(data) {
            var createResult=data.result;
            paragraph.innerHTML="省份:"+createResult.province+
                    "
城市："+createResult.city+
                    "
区号："+createResult.areacode+
                    "
运营商："+createResult.company+
                    "
卡类型："+createResult.card;
        }
    </script>
    
      
      


点击
查看手机归属地：

demo-3的实例（此实例是动态的）：

    
       
       
    
    <script type="text/javascript">
        //当文档加载完成后
        window.οnlοad= function () {
            //获取p标签
            var paragraph=document.getElementById("paragraph");
            //当鼠标单击时
            document.getElementById("btn").οnclick= function () {
                //获取input的value动态值
                var phoneNumber=document.getElementById("txt").value;
                //创建script标签
                var createScript=document.createElement("script");
                //给script标签添加src属性,在原始数据后面添加&callback=doFunction，你自己的key,这里需要改才能运行。
                createScript.src="http://apis.juhe.cn/mobile/get?phone="+phoneNumber+"&key=你自己的key&callback=doFunction";
                //把script标签添加到head标签中
                document.getElementsByTagName("head")[0].appendChild(createScript);
            };
        };
        function doFunction(data) {
            //获取data数据中的result
            var createResult=data.result;
            //让获取后的数据在p标签中显示
            paragraph.innerHTML="省份:"+createResult.province+
                    "
城市："+createResult.city+
                    "
区号："+createResult.areacode+
                    "
运营商："+createResult.company+
                    "
卡类型："+createResult.card;
        }
    </script>
    
       
       


点击
查看手机归属地：

4、原生的需要我们在原始数据后添加自己key和value，使用jQuery就方便多了，下面使用$.ajax({})的方法实现的：

    
        
        
    
    
    <script src="js/jquery-2.2.0.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                var phoneNumber=$("#txt").val();
                $.ajax({
                    type: "GET", //这个可以不写，是默认的
                    url: "http://apis.juhe.cn/mobile/get?phone="+phoneNumber+"&key=你自己的key",
                    dataType: "jsonp",//这个是必须的
                    jsonp: "callback", //这个是必须的，callback可以随便改的
                    jsonpCallback: "doFunction",//这个是必须的，doFunction也可以随便改
                    // 难点在这，jsonp的callback是key（键）=》jsonpCallback的doFunction是value(值)，就是所谓的键值对
                    success: function (data) {
                        showData(data); //调用showDate函数
                    }, error: function () {
                        alert("error");
                    }
                });
            });
            function showData(data){
                var result=data.result;
                $("#paragraph").html(
                        "省份:"+result.province+
                        "
城市："+result.city+
                        "
区号："+result.areacode+
                        "
运营商："+result.company+
                        "
卡类型："+result.card);
            }
        });
    </script>


点击
查看手机归属地：

总结：如遇到问题，可以跟我说。好了，今天就分享到这里。