Jsonp解决跨域问题原理

1.什么是Jsonp？
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
JSONP由两部分组成：回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，但客户端和服务器端的名称一定要一致）。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回
2.什么是跨域？
跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。
3.Jsonp原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
（1）可以动态/静态添加了一个script标签，src指向跨域的一个php脚本，js函数名作为callback参数传入

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body><p>jsonp</p><button type="button" >点击</button><table border="1" cellspacing="0" cellpadding=""><tr><th>书名</th><th>作者</th><th>描述</th></tr></table><script type="text/javascript">var btn =document.querySelector('button')btn.onclick = function() {for(var key in data){var tr= document.createElement('tr');document.querySelector('table').appendChild(tr);for(var arr in data[key]){var td= document.createElement('td');tr.appendChild(td);td.align = 'center';td.innerHTML = data[key][arr];}}}function tablecallback(obj){data=obj;}</script><!-- 静态 --><!-- <script type="text/javascript" src="http://vue.com/2020-8-4/DOM4.php?callback=tablecallback"></script> --><!-- 动态创建标签script ，src指向跨域的一个php脚本--><script type="text/javascript">var script = document.createElement('script');script.src = "http://vue.com/2020-8-4/DOM4.php?callback=tablecallback";document.querySelector('body').appendChild(script);</script>
</body>
</html>

PHP代码

<?phpheader('Content-type: application/json');$callback =htmlspecialchars($_GET['callback']);$books = array("01"=>array("bookName"=>"三国演义","author"=>"罗贯中","descrip"=>"一个杀伐纷争的年代"),"02"=>array("bookName"=>"水浒传","author"=>"施耐庵","descrip"=>"108个好汉"),"03"=>array("bookName"=>"西游记","author"=>"吴承恩","descrip"=>"佛教和道教之间的故事"),"04"=>array("bookName"=>"红楼梦","author"=>"曹雪芹","descrip"=>"一个封建王朝的缩影"),"05"=>array("booskName"=>"《战争与和平》","author"=>"托尔斯泰","descrip"=>"爱国热情和英雄主义"),"06"=>array("bookName"=>"《巴黎圣母院》","author"=>"雨果","descrip"=>"宗教的虚伪"), "07"=>array("bookName"=>"《童年》","author"=>"高尔基","descrip"=>"社会人生的独特见解"));echo $callback . "(" . json_encode($books) . ")";
?>

PHP代码返回了一个JS函数

tablecallback({
01: {bookName: "三国演义", author: "罗贯中", descrip: "一个杀伐纷争的年代"}
02: {bookName: "水浒传", author: "施耐庵", descrip: "108个好汉"}
03: {bookName: "西游记", author: "吴承恩", descrip: "佛教和道教之间的故事"}
04: {bookName: "红楼梦", author: "曹雪芹", descrip: "一个封建王朝的缩影"}
05: {booskName: "《战争与和平》", author: "托尔斯泰", descrip: "爱国热情和英雄主义"}
06: {bookName: "《巴黎圣母院》", author: "雨果", descrip: "宗教的虚伪"}
07: {bookName: "《童年》", author: "高尔基", descrip: "社会人生的独特见解"}
})

所以JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数的函数执行代码。
使用jquery的jsonp如何发起跨域请求

<!DOCTYPE html>
<html>
<head><title>GoJSONP</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">$(document).ready(function(){$.ajax({type : "get",async: false,url : "http://vue.com/2020-8-4/DOM4.php?callback=tablecallback",dataType: "jsonp",jsonp:"callback", //请求php的参数名jsonpCallback: "jsonhandle",//要执行的回调函数success : function(data) {console。log(data);}});});
</script>
</body>
</html>

4.Ajax和JSON区别
（1）ajax
1）ajax是一种发送http请求与后台进行异步通讯的技术，与后台通信，获取数据和信息，其原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步
2）一个完整的AJAX请求的步骤：
实例化XMLHttpRequest对象
连接服务器
发送请求
接收响应数据
3）ajax的解决：
json是一种数据交换格式 “暗号”，描述信息格式
jsonp是非官方跨域数据交互协议“接头方式”信息传递双方约定的方法，可以用来跨域
4）ajax的局部刷新
ajax 可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新
ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新
ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新
5）数据接口
数据接口是后台程序提供的，它是一个 url 地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回 json 格式的数据或者操作信息，格式也可以是text、xml等
6）同源策略
ajax 请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计 ajax 时基于安全的考虑
（2）jsonp
1）jsonp的产生原因
ajax直接请求普通文件存在跨域无权限访问的问题（静态页、动态页、web服务、wcf只要是跨域请求一律不准）
web的页面上调用js文件是不受跨域的影响（凡拥有src属性的标签都拥有跨域能力script img iframe）
可以判断现在想通过纯web端(ActiveX控件、服务端代理、H5之Websocket等方式不算)跨域访问数据就只有一种可能，就是在远程服务器上设法把数据装进js格式的文件里，供客户度调用和进一步处理
json的纯字符数格式可以简洁的描述复杂数据还被js原生支持
web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去
客户端在对json文件调用成功后获得自己所需的数据剩下的就按照自己需求进行处理和展现，这种获取远程数据的方式非常像ajax其实并一样
为了方便客户端使用数据逐渐形成非正式传输协议jsonp
该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据这样客户端就可以随意定制自己的函数来自动处理返回数据
2）jsonp是一种可以实现跨域发送http请求的数据通信格式，可以嵌在ajax中使用，其原理是利用script标签可以跨域链接资源的特性。
3）JSONP由两部分组成：回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，但客户端和服务器端的名称一定要一致）。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回
4）JSONP的请求过程：
请求阶段：浏览器创建一个 script 标签，并给其src 赋值
发送请求：当给script的src赋值时，浏览器就会发起一个请求
数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: ‘abc’})”)返回。当浏览器接收到了响应数据，由于发起请求的是 script，所以相当于直接调用 jsonpCallback 方法，并且传入了一个参数
5）JSONP的原理：
在客户端动态的创建一个 script 标签，代替 XHR 对象，指定 script.src 向服务器发起请求，请求的PHP页面除了返回需要的数据外，还需要填充一个指定的函数名
6）jsonp只支持get请求，ajax支持get和post请求
7）ajax 只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到 jsonp 技术，jsonp 可以跨域请求数据
（3）ajax和jsonp的实质核心、区别联系
1）ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装
2）实质不同
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本
3）区别联系
不在于是否跨域
　ajax通过服务端代理一样跨域
　jsonp也不并不排斥同域的数据的获取
4）jsonp是一种方式或者说非强制性的协议，ajax也不一定非要用json格式来传递数据
5）ajax 数据接口和 jsonp 数据接口的区别
开发返回数据的接口，如果是一般的 ajax 接口，让接口直接返回 json 格式的数据字符串就可以了，这种接口的数据是不能跨域请求的，如果要跨域请求数据，需要开发jsonp的接口，开发jsonp的接口，需要获取请求地址中的参数，也就是’callback’键对应的值，然后将这个值和json数据拼装成一个函数调用的形式的字符串返回，就完成了一个jsonp的接口，这个键值对是由$.ajax函数自动产生的
一般接口返回的数据形式：
‘{“iNum”:12,’sTr’:’abc’}’;
jsonp返回的数据形式：
‘jQuery1124018787969015631711_1522330257607({“iNum”:12,”sTr”:”abc”})’;

Jsonp解决跨域问题原理相关推荐

用jsonp 解决跨域问题
用jsonp 解决跨域问题参考文章: (1)用jsonp 解决跨域问题 (2)https://www.cnblogs.com/jiaoshuai/p/6844993.html 备忘一下.
jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域
jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域 <!DOCTYPE html> <html><head><meta chars ...
jsonp解决跨域问题（简单易懂）
在日常的项目开发中,前端和后台是要经常交互的,有时候前端去请求后端的接口时,会出现跨域这个问题,解决跨域的方法有很多,本文主要讲解下如何使用jsonp来解决跨域问题. 解决问题之前,我们首先要明白一个 ...
jsonp解决跨域问题
跨域就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下的对象或数据. 简单理解同一个域就是:相同域名.相同端口.相同协议! JS部分(使用 ...
Web笔记-使用jsonp解决跨域请求（CROS）问题
目录基本概念代码与实例基本概念当我在某web站点,这个站点里面发出了像其他站点的请求(不同链接,或者同一链接的不同端口),是会失败的,因为是浏览器的安全检测问题,当然,这个只是主流浏览器的功能 ...
前端跨域请求get_前端接收 get 请求，用jsonp 解决跨域问题，需要服务端的response 也要jsonp 类型...
1. 解决跨域必须在ajax 方法中dataType 设置为jsonp 2. 此时服务端返回的就必须是jsonp 类型的,而不是json 类型的 3. 客户端js 代码中ajax 方法还要设置json ...
Django 【第十九篇】JS实现的ajax、同源策略和前端JSONP解决跨域问题
一.回顾jQuery实现的ajax 首先说一下ajax的优缺点优点:AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面 ...
ajax跨界表单,ajax使用jsonp解决跨域问题
ubuntu环境配置网络配置主要文件:/etc/network/interfaces,这里是IP.网关.掩码等的一些配置: # This file describes the network in ...
JSONP解决跨域及ajax同步问题
2019独角兽企业重金招聘Python工程师标准>>> 1.前端js 1.参数定义:var sendJSONP = function(url){var settings = {url ...
什么是跨域（CORS）？怎么解决跨域（CORS）？
什么是跨域(CORS)? 跨域是指浏览器不能执行其他网站上的脚本,它是由浏览器的同源策略造成的,是浏览器对 JS 的安全限制.是浏览器从一个域名网页请求另一个域名资源时,出现端口.域名.协议任一不同, ...

Jsonp解决跨域问题原理

Jsonp解决跨域问题原理相关推荐

最新文章

热门文章