如何使用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
<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>