您现在的位置是:首页
>程序人生
>WEB前端
原生JS实现跨域问题-通过jsonp跨域
发布时间:2019-03-13 编辑:jielin 浏览:16902 评论:0
jsonp跨域是比较常用的的一种跨域方式,使用跟理解都很简单,下面将通过一个小demo来讲解如何使用jsonp来跨域的
这里简单的介绍jsonp的跨域原理:
JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特性,由其 src 属性发送请求到服务器,服务器返回 JavaScript 代码,浏览器接受响应,然后就直接执行了,这和通过 script 标签引用外部文件的原理是一样的。
JSONP由两部分组成:回调函数和数据,回调函数一般是在浏览器控制,作为参数发往服务器端(当然,你也可以固定回调函数的名字,但客户端和服务器端的名称一定要一致)。当服务器响应时,服务器端就会把该函数和数据拼成字符串返回。
JSONP的请求过程:
请求阶段:浏览器创建一个 script 标签,并给其src 赋值(类似 https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=18878556063&callback=fn...)。
发送请求:当给script的src赋值时,浏览器就会发起一个请求。
数据响应:服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: 'abc'})”)返回。当浏览器接收到了响应数据,由于发起请求的是 script,所以相当于直接调用 jsonpCallback 方法,并且传入了一个参数。
下面将用一个获取电话号码归属地信息的案例来讲解jsonp的跨域原理
html源代码:
<div class="container">
<div class="tel">
<div class="title">号码归宿地查询</div>
<div class="tel-inp">
<div class="left"> 手机号码</div>
<div class="right">
<input type="text" class="number" placeholder="电话号码">
<input type="button" class="search" value="查询">
</div>
</div>
<div class="tel-info">
<table>
<caption>查询结果</caption>
<tr>
<td>号码</td>
<td class="telString">***</td>
</tr>
<tr>
<td>号码段</td>
<td class="mts">***</td>
</tr>
<tr>
<td>归属地</td>
<td class="province">***</td>
</tr>
<tr>
<td>卡类型</td>
<td class="catName">***</td>
</tr>
</table>
</div>
</div>
</div>
css样式:
<style type="text/css">
* {margin: 0; padding: 0;}
body {
font-size: 13px;
}
.container {
max-width: 360px;
margin: 0 auto;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.title {
font-size: 18px;
width: 100%;
height: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
margin-top: 5%;
}
input {
outline: none;
}
input[type="text"] {
border: 1px solid #ddd;
width: 70%;
height: 25px;
margin-left: 2%;
text-indent: 10px;
}
input[type="button"] {
width: 20%;
height: 28px;
cursor: pointer;
color: #fff;
background: rgb(102, 153, 204);
border: 1px solid rgb(102, 153, 204);
border-radius: 2px;
}
.tel-inp {
height: 45px;
line-height: 45px;
border: 1px solid rgb(102, 153, 204);
margin-bottom: 10px;
border-radius: 2px;
}
table {
width: 100%;
border: 1px solid rgb(102, 153, 204);
border-collapse: collapse;
border-spacing: 0;
}
table tr {
width: 100%;
height: 30px;
line-height: 30px;
}
table caption {
width: 100%;
height: 40px;
line-height: 40px;
background: rgb(102, 153, 204);
color: #fff;
border: 1px solid rgb(51, 102, 204);
border-bottom: 0;
box-sizing: border-box;
}
table tr td {
width: 50%;
text-align: center;
border: 1px solid rgb(51, 102, 204);
}
.left {
width:35%;
float: left;
text-align: center;
border-right: 1px solid rgb(102, 153, 204);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.right {
width: 65%;
float: right;
}
</style>
js部分:
<script type="text/javascript">
// 这里定义一个函数接收API返回的数据,然后赋值给对应的dom
function dataCallBack(data) {
console.log(data);
var province = document.querySelector(".province");
var catName = document.querySelector(".catName");
var mts = document.querySelector(".mts");
var telStr = document.querySelector(".telString");
province.innerHTML = data.province;
catName.innerHTML = data.catName;
mts.innerHTML = data.mts;
telStr.innerHTML = data.telString;
}
</script>
// 这里创建一个jsonp请求
<script type="text/javascript">
function TelSearch() {
this.telString = document.querySelector(".telString");
this.btn = document.querySelector(".search");
this.num = document.querySelector(".number");
this.mts = document.querySelector(".mts");
this.province = document.querySelector(".province");
this.catName = document.querySelector(".catName");
this.reg = /^1(3|4|5|7|8)\d{9}$/;
return this.init();
}
TelSearch.prototype = {
constructor: TelSearch,
init: function() {
this.getData();
},
getData: function() {
var that = this;
this.btn.onclick = function() {
if (that.num.value === '') {
alert('号码不能为空!');
return;
}
if (!that.reg.test(that.num.value)) {
alert('号码格式错误!');
that.num.value = "";
return;
}
// 如果以上条件都符合则创建script标签并加入到页面中,其中https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=(号码)为接口,&callback=dataCallBack的dataCallBack为上面创建的函数,用来接收服务端返回的,指定回调函数为dataCallBack。
var script = document.createElement("script");
script.src = "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=" + that.num.value + "&callback=dataCallBack";
document.body.appendChild(script);
that.num.value = "";
}
}
}
// 执行该函数
var t = new TelSearch;
</script>
注意:因为 script 标签的 src 属性只在第一次设置的时候起作用,导致 script 标签没法重用,所以每次完成操作之后要移除;
上一篇: 前端开发常遇问题以及解决方案