JSONP解决跨域(含百度数据案例)

最新推荐文章于 2024-05-20 22:41:35 发布

Bqiuer

最新推荐文章于 2024-05-20 22:41:35 发布

阅读量768

点赞数 3

分类专栏： JavaScript 文章标签： javascript js jsonp

本文链接：https://blog.csdn.net/weixin_46057095/article/details/108448930

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、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 += `<li><a href="https://www.baidu.com/s?wd=${encodeURI(item.q)}">${item.q}</a></li>`
            })
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 += `<li><a href="https://www.baidu.com/s?wd=${encodeURI(item.q)}">${item.q}</a></li>`
            })
            ac.innerHTML = add_tag;
        }
    </script>
</body>
</html>

Bqiuer

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JSONP解决跨域(含百度数据案例)

一、JSONP及跨域基本知识JSONP,全称JSON with Padding,它可以看做是一种JSON的使用模式,它可以让网页从别的主机(域名)地址当中获取资源,即跨域读取数据.跨域是怎么来的?在浏览器同源策略的限制下，非同源下的请求会产生跨域问题什么是跨域呢?同源策略即：同一协议，同一域名，同一端口号。跨域:当其中一个不满足时，我们的请求即会发生跨域问题举例:http://www.baidu.com:5000到https://www.baidu.com:5000的请求会出现跨域（域
复制链接

扫一扫

专栏目录