您的位置：首页 > 编程技术 > js  >  关于JSONP跨域请求原理的深入解析

关于JSONP跨域请求原理的深入解析

 更新时间：2022年1月6日 12:53  点击：581 作者：六叶草~

什么是同源策略

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。

简单来讲，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面。当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

什么是JSONP

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）

如何理解上面那句话

我们知道标签中的src属性既可以请求本地图片，也可以请求网上资源。也就是说html中的src属性是支持跨域的。同理jsonp跨域请求也是利用src属性，只不过用的是标签。

那么我们来举例看一下：

先写一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <title>jsonp请求资源</title>
    <script type="text/javascript" src="./t10.js"></script>
</body>
</html>

在写一个js文件：

console.log("我被请求了！");

打开控制台可以看到：

jsonp实现了本地数据的请求，在这里我们模拟了一下本地请求是怎么实现的。

如果请求服务器的数据该是怎样去实现呢？

了解跨域请求模式：

我们先打开百度的搜索页面，打开控制台，点击Network如下：

然后在页面输入一个b:

https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35457,34584,35245,35480,35499,35329,35316,26350,35475&wd=b&req=2&csor=1&cb=jQuery11020022466709590333256_1639545101298&_=1639545101299

关键字：wd=b

这是回调函数：

cb=jQuery11020022466709590333256_1639545101298&_=1639545101299

可以看到他的请求方式是GET方式，Jsonp的请求方式默认也是GET请求。通过get方式请求服务器，服务器返回的数据若是json字符串将自动转化为js对象。所以jsonp是需要服务器端和客户端相互配合的。

红色方框是返回的关键字：

可以发现，我们并没有写callback方法，jQuery自动帮我们封装了一个callback方法。我们修改CD为001后发现它的名字变成了001。

https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35457,34584,35245,35480,35499,35329,35316,26350,35475&wd=b&req=2&csor=1&cb=001

练习

获取请求到的数据，并将它们显示出来（百度搜索框）。

做法如下：

可以根据我们输入的东西动态的创建脚本，然后获取回调函数里面的值的函数，然后页面添加一个列表把它们显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../12-5/js/jquery.js"></script>
    <style>
       input {
            width: 540px;
            height: 40px;
            border: 2px solid #4E6EF2;
        }
       li{
            height: 40px;
            width: 411px;
            line-height: 40px;
            font-size: 16px;
            list-style: none;
        } 
    </style>
</head>
<body>
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
   <div>
    <input type="text" value =''>
   </div>
    <ul></ul>
    <script>
    	//
        function getData(data){
            var script = document.querySelector('#jsonp');
            script.parentNode.removeChild(script);
            $('ul').html('');
            for(var i =0;i<data.g.length;i++){
                $('<li>'+data.g[i].q +'</li>').appendTo('ul');//将获取到的数据加入列表
            }
        }
        //动态生成script脚本
        function getList(wd){
            var script = document.createElement('script');
            script.id = 'jsonp';
            script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&req=2&csor=1&cb=getData&wd='+wd;
            document.body.appendChild(script);
        }
		//给input设置键盘事件。
        //实现输入文本后调用脚本函数
        var ipt = document.querySelector('input');
        ipt.addEventListener('keyup',function(){
            var wd = this.value;
            getList(wd);
        })
    </script>
</body>
</html>

jsonp的缺点

  • 只能发送get请求。因为script只能发送get请求
  • 需要后台配合。此种请求方式应该前后端配合，将返回结果包装成callback(result)的形式。

总结

到此这篇关于JSONP跨域请求原理的文章就介绍到这了,更多相关JSONP跨域请求原理内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/shao_xuan_/article/details/121949620

[!--infotagslink--]

相关文章

  • Java如何发起http请求的实现(GET/POST)

    这篇文章主要介绍了Java如何发起http请求的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-31

  • 解决Java处理HTTP请求超时的问题

    这篇文章主要介绍了解决Java处理HTTP请求超时的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-29

  • C#模拟http 发送post或get请求的简单实例

    下面小编就为大家带来一篇C#模拟http 发送post或get请求的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • js实现跨域的4种实用方法原理分析

    什么是js跨域呐？js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。要...2015-10-30

  • vue中jsonp插件的使用方法示例

    这篇文章主要给大家介绍了关于vue中jsonp插件的使用方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-10

  • js实现跨域的4种实用方法原理分析

    什么是js跨域呐？js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。要...2015-10-30

  • 原生JS封装Ajax插件(同域、jsonp跨域)

    这篇文章主要为大家详细介绍了原生JS封装Ajax插件，为大家介绍不同域之间互相请求资源的跨域...2016-05-05

  • jQuery Jsonp跨域模拟搜索引擎

    这篇文章主要介绍了jQuery Jsonp跨域模拟搜索引擎的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下...2017-06-24

  • spring cloud gateway中如何读取请求参数

    这篇文章主要介绍了spring cloud gateway中如何读取请求参数的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-07-15

  • 使用Feign消费服务时POST/GET请求方式详解

    这篇文章主要介绍了使用Feign消费服务时POST/GET请求方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-25

  • C#处理和对接HTTP接口请求的方法

    下面通过四步给大家介绍了c#处理和对接http接口请求的方法，分步骤介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看下吧...2020-06-25

  • SpringMvc自动装箱及GET请求参数原理解析

    这篇文章主要介绍了SpringMvc自动装箱及GET请求参数原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19

  • SpringMvc获取请求头请求体消息过程解析

    这篇文章主要介绍了SpringMvc获取请求头请求体消息过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-17

  • PHP如何使用cURL实现Get和Post请求

    这篇文章主要介绍了PHP如何使用cURL实现Get和Post请求,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-11

  • C#网络请求与JSON解析的示例代码

    这篇文章主要介绍了C#网络请求与JSON解析的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25

  • RestTemplate实现发送带headers的GET请求

    这篇文章主要介绍了RestTemplate实现发送带headers的GET请求，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-10-30

  • vue 接口请求地址前缀本地开发和线上开发设置方式

    这篇文章主要介绍了vue 接口请求地址前缀本地开发和线上开发设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-13

  • Spring MVC 处理一个请求的流程

    Spring MVC是Spring系列框架中使用频率最高的部分。不管是Spring Boot还是传统的Spring项目，只要是Web项目都会使用到Spring MVC部分。因此程序员一定要熟练掌握MVC部分。本篇博客简要分析Spring MVC处理一个请求的流程。...2021-02-06

  • 详解Vue-cli 创建的项目如何跨域请求

    本篇文章主要介绍了详解Vue-cli 创建的项目如何跨域请求 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-22

  • JS跨域解决方案之使用CORS实现跨域

    正常使用AJAX会需要正常考虑跨域问题，所以伟大的程序员们又折腾出了一系列跨域问题的解决方案，如JSONP、flash、ifame、xhr2等等。本文给大家介绍JS跨域解决方案之使用CORS实现跨域，感兴趣的朋友参考下吧...2016-04-17