关于JSONP跨域请求原理的深入解析
目录
- 什么是同源策略
- 什么是JSONP
- 练习
- jsonp的缺点
- 总结
什么是同源策略
同源策略，它是由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跨域请求原理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JSONP跨域GET请求解决Ajax跨域访问问题
前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要
-
AJAX跨域请求之JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该
-
跨域请求的完美解决方法(JSONP, CORS)
一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题.解决方法有JSONP,Flash等等. JSONP 我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe>.那就是说如果要跨域访问数据,就服务端只能把数据放在js格式的文件里.恰巧我们知道JSON可以简洁的描述复杂数据,而且JSON还被js原生支持,所以在客户端几乎可以随心所欲的处
-
JSONP跨域请求实例详解
JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON
-
JSONP跨域请求
什么是跨域: 1.域名不同 2.域名相同端口不同 js出于对安全考虑不支持跨域请求.我们可以使用JSONP解决跨域问题. 一.JSONP是什么 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页js是无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <scr
-
关于JSONP跨域请求原理的深入解析
目录 什么是同源策略 什么是JSONP 练习 jsonp的缺点 总结 什么是同源策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 简单来讲,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面.当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行.如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 什么是J
-
Ajax jsonp跨域请求实现方法
什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 h
-
深入分析JSONP跨域的原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same- Origin Policy"(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档 在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的 页面中包含的JavaScript
-
JSONP跨域的原理解析及其实现介绍
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的页面中包含的JavaScript代码,
-
浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法
由于同源策略的缘故,ajax不能向不同域的网站发出请求. 比如a站localhost需要向b站请求数据,地址为:http://www.walk-sing.com/api.php 请求的代码如下: <html> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $.get
-
jsonp跨域请求数据实现手机号码查询实例分析
本文实例讲述了jsonp跨域请求数据实现手机号码查询的方法.分享给大家供大家参考,具体如下: 前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 之前一篇<说说JSON和JSONP 也许你会豁然开朗>对jsonp已经介绍的很详细了,这里就不多介绍了,直接上实例吧 代码: <!DOCTYPE HTML> <html> <head&
-
详解java 中Spring jsonp 跨域请求的实例
详解java 中Spring jsonp 跨域请求的实例 jsonp介绍 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSO
-
Vue2.0 vue-source jsonp 跨域请求
本文介绍了Vue2.0 vue-source jsonp 跨域请求,分享给大家,希望对大家有所帮助 以调用百度的输入提示接口为例 main.js import Vue from 'vue' import VueResouse from 'vue-resource' import App from './App.vue' Vue.use(VueResouse) new Vue({ el: '#app', render: h => h(App) }); App.vue <script> ex
-
原生js实现ajax请求和JSONP跨域请求操作示例
本文实例讲述了原生js实现ajax请求和JSONP跨域请求.分享给大家供大家参考,具体如下: 直接上代码: const ajax = (params = {}) => { const nowJson = params.jsonp ? jsonp(params) : json(params); function jsonp(params){ //创建script标签并加入到页面中 var callbackName = params.jsonp; var head = document.getEle