JSONP解决跨域(含百度数据案例)
一、JSONP及跨域基本知识
JSONP,全称JSON with Padding,它可以看做是一种JSON的使用模式,它可以让网页从别的主机(域名)地址当中获取资源,即跨域读取数据.
跨域是怎么来的?
在浏览器同源策略的限制下，非同源下的请求会产生跨域问题
什么是跨域呢?
同源策略即：同一协议，同一域名，同一端口号。
跨域:当其中一个不满足时，我们的请求即会发生跨域问题
举例:
http://www.baidu.com:5000到https://www.baidu.com:5000的请求会出现跨域（域名、端口相同但协议不同）
http://www.baidu.com:5000到http://www.baidu.com:5001的请求会出现跨域（域名、协议相同但端口不同）
http://www.baidu.com:5000到http://www.abcde.com:5000的请求会出现跨域（域名不同）`
最常见到跨域问题就是当我们在利用Ajax进行数据的请求时,只要是跨域的请求,一律不被允许.
JSONP为什么可以实现跨域请求数据?
我们发现,当在Web页面上用script、img、iframe等标签通过src属性,或者通过link的href属性等这些引入一些外部的文件时,他们都不会受到跨域的影响,能够正常使用跨域的数据.
<script src="./jquery-3.4.1.min.js"></script> //src引入jquery文件
<link rel="stylesheet" href="./css/index.css"> //href引入一个css文件
其实也很好理解,通过src或者href引入一些静态资源,这些的本质都是通过浏览器发送了一个get请求.
这样我们也就可以隐约的猜到JSONP的跨域原理:
JSONP其实就是利用了上面所说的这一点,来实现跨域请求.我们可以猜想一下,如果我们将需要请求的数据通过这种方式引入,我们是不是也就可以进行跨域的数据请求呢,下面我们就来具体看一下JSONP到底是如何进行跨域数据请求的.
一、JSONP跨域请求实现
JSONP是怎么来的?
- 上面我们已经知道了可以通过href和src引入外部的文件,我们一般进行跨域数据请求都是从服务端,所以首先我们需要在远程服务器上设法将把数据加载到js格式的文件里.
- 我们知道JSON是一种纯字符形式的数据格式,它也被称为js的对象表示法,而它又独立于语言和平台,支持许多不同的编程语言(包括服务端).所以它就成为一种用在前后端数据交互请求的数据格式.
- 有了这些条件,逐渐的我们就形成了一种JSONP的使用模式来进行跨域数据的请求.
JSONP跨域请求原理
JSONP可以看做是一种非正式的传输协议,它允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP跨域请求实现(百度数据案例)
首先我们来看一段代码
1 <body>
2 <input id="search" type="text">
3 <script>
4 let search = document.querySelector("#search");
5 search.oninput = function () {
6 let val = this.value; //获取输入框的值
7 let oScript = document.createElement("script"); //创建script标签节点
8 let src = ` https://www.baidu.com/sugrec?prod=pc&wd=${decodeURI(val)}&cb=fn`;
9 oScript.src = src; //给创建的script标签添加src属性
10 document.body.appendChild(oScript) //动态添加script标签
11 }
12 </script>
13</body>
- 代码讲解
首先我们有一个input输入框,用于模拟百度搜索框的输入.
获取搜索框的DOM节点,并绑定一个input事件,当有输入时触发事件执行相关的操作
上面input事件代码(6-10行)就是通过JSONP的跨域请求获取到了百度搜索提示数据.
前面我们知道了可以通过script标签当中的src引入跨域的文件,所以这里我们首先创建一个script空标签,代码第8行是百度搜索提示数据资源地址以及一些参数,最后的"cb=fn"就是我们用户传递给服务端的callback参数, 然后第9行将这个src资源地址添加到script标签当中,最后我们将这个script标签动态添加到浏览器当中,这样就实现了我们跨域请求数据（本地—百度）.
上面是通过实例介绍了jsonp为什么能够跨域请求数据以及基本的实现步骤,下面我们来介绍一下其中的核心callback参数
- callback参数
let src = https://www.baidu.com/sugrec?prod=pc&wd=${decodeURI(val)}&cb=fn;
我们首先来分析一下这个百度资源地址的基本构成
- "https://"是请求的协议
- 百度默认端口是443(这里省略)
- "www"是主机(http 的默认主机是 www）
- "baidu.com"是服务器的域名
- "/sugrec"是服务器上的资源路径
- "?"后面的是相关的参数(多个参数之间用&分割)
这里我们需要知道参数是:
- wd参数:用于接收百度输入框当中的输入内容,
这里的"${decodeURI(val)}“外部”
${}"是模板字符串用来包裹变量/表达式
资源地址当中的字符需要编码才能够使用,所以下面是用来编码和解码的函数
编码:encodeURL("你好") // "%E4%BD%A0%E5%A5%BD"
解码:decodeURL("%E4%BD%A0%E5%A5%BD") // "你好"
- cb参数即JSONP当中需要传给服务端的参数callback,后面的参数值用来接收一个函数名(这里是fn),这个函数名用来包裹住JSON数据,我们可以通过这个参数的值(函数名)来自定义处理返回的数据.
- callback参数值(函数名)
首先来看一下这里由函数名包裹的json数据(以wd传入小米为例)
fn({"q":"小米","p":false,"g":[
{"type":"sug","sa":"s_1","q":"小米官网"},
{"type":"sug","sa":"s_2","q":"小米推送"},
{"type":"sug","sa":"s_3","q":"小米10"},
{"type":"sug","sa":"s_4","q":"小米手机"},
{"type":"sug","sa":"s_5","q":"小米商城"},
{"type":"sug","sa":"s_6","q":"小米股票"},
{"type":"sug","sa":"s_7","q":"小米10pro至尊版"},
{"type":"sug","sa":"s_8","q":"小米10青春版参数"},
{"type":"sug","sa":"s_9","q":"小米手机旗舰"},
{"type":"sug","sa":"s_10","q":"小米电视"}],
"slid":"8775837059469112784","queryid":"0x26094f285d75d0"})
我们将"wd"和"cb"这两个参数传入,发送请求给服务端,就会为我们返回上面这种由fn这个函数名所包裹的json数据的形式.其中我们可以看到第一个"q"后面就是我们传入的wd参数值(输入搜索的内容),"g"后面是一个数组形式,而这个数组当中的"q"后面就是当我们用百度搜索时的相关提示信息,下面我们可以进行这样的操作:
看代码:
1 function fn(data) {
2 let g = data.g || [];
3 let add_tag = '';
4 g.forEach(function (item) {
5 add_tag += `${item.q} `
})
6 ul.innerHTML = add_tag;
}
首先fn函数当中的data就是服务端返回给我们,也就是上面函数名当中所包裹的一大堆数据,可以看出它是我们js当中的对象形式,所以我们就可以直接将data当做对象来进行相关的操作.
上面函数当中做了这样的处理:
第二行:获取data当中的g属性的值赋值给变量g,如果不存在则将一个空数组赋值给变量g.
第三行:定义一个空字符串对应的变量.
四五六行:我们可以看到g属性所对应的值是一个数组,数组当中是若干个对象,每个对象当中都有"type",“sa”,"q"属性,然后我们通过forEach方法遍历上面得到的数组,然后将q属性的值以模板字符串的方式封装成html代码,增加到网页当中.
通过上面的处理我们就模拟了百度搜索的输入提示文字效果.
最后,附上案例源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度搜索</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: #151241;
}
.main {
width: 500px;
margin: 200px auto;
}
#search {
display: inline-block;
width: 500px;
height: 54px;
}
ul li {
width: 500px;
height: 40px;
padding: 8px 5px;
background-color: #fff;
border: 1px solid #999;
list-style: none;
}
a {
font-size: 14px;
color: #333;
text-decoration: none;
}
</style>
<body>
<div class="main">
<input id="search" type="text" autocomplete="off">
<ul id="auto-complete"></ul>
</div>
<script>
let search = document.querySelector("#search");
let ac = document.querySelector('#auto-complete');
let btn = document.querySelector('#btn')
search.oninput = function () {
let val = this.value;
let oScript = document.createElement("script");
let src = ` https://www.baidu.com/sugrec?prod=pc&wd=${decodeURI(val)}&cb=zxc`;
oScript.src = src;
document.body.appendChild(oScript)
btn.onclick = function () {
window.location = `https://www.baidu.com/s?wd=${encodeURI(val)}`
}
}
function zxc(data) {
console.log(typeof data);
let g = data.g || [];
let add_tag = '';
g.forEach(function (item) {
add_tag += `${item.q} `
})
ac.innerHTML = add_tag;
}
</script>
</body>
</html>