如何使用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)： JS原生跨域数据,通过script的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的实例（此实例是静态的）： js原生跨域数据，通过script的src属性获取静态手机号码归属地数据 <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的实例（此实例是动态的）： js原生跨域数据jsonp，通过script的src属性动态获取手机归属地数据 <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({})的方法实现的： Title #btn { background: #999; } <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> 点击 查看手机归属地：

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