jsonp跨域原理简单总结_jsonp的工作原理

jsonp跨域原理简单总结_jsonp的工作原理JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-OriginPolicy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。

这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。

JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。

通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在abc.example.com下的页面,不能向def.example.com提交Ajax请求。

然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。

JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。

 

利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP,这项技术可以解决跨域提交Ajax请求的问题

假设在http://example1.com/index.php这个页面中向http://example2.com/getinfo.php提交GET请求,我们可以将下面的JavaScript代码放在http://example1.com/index.php这个页面中来实现:

var eleScript= document.createElement("script");  
eleScript.type = "text/javascript";  
eleScript.src = "http://example2.com/getinfo.php";  
document.getElementsByTagName("head")[0].appendChild(eleScript); 

Jetbrains全家桶1年46,售后保障稳定


JSONP的
优点


它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;兼容性好

当GET请求从http://example2.com/getinfo.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://example1.com/index.php页面中的一个callback函数。

JSONP的缺点是它只支持GET请求而不支持POST等其它类型的HTTP请求;不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15

 在响应端(http://跨域的dns/document!searchJSONResult.action),通过 jsoncallback = request.getParameter(“jsoncallback”) 得到jquery端随后要回调的js function name:jsonp1236827957501 然后 response的内容为一个Script Tags:”jsonp1236827957501(“+按请求参数生成的json数组+”)”; jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组); 这样就达到了跨域数据交换的目的。

JSONP原理

JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。

这样其实”jQuery AJAX跨域问题”就成了个伪命题,jquery $.ajax方法名有误导人之嫌。

如果设为dataType: ‘jsonp’,这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议。

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。

JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。

如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

jsonCallback函数jsonp1236827957501(….):是浏览器客户端注册的,获取跨域服务器上的json数据后,回调的函数

Jsonp的执行过程如下:

首先在客户端注册一个callback (如:’jsoncallback’), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,要用jsonp1236827957501(……)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。

然后以 javascript 语法的方式,生成一个function,function名字就是传递上来的参数 ‘jsoncallback’的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,传入到了客户端预先定义好的 callback 函数里。

可以说jsonp的方式原理上和<script src=”http://跨域/…xx.js”></script>是一致的。JSONP是一种脚本注入(Script Injection)行为,所以有一定的安全隐患。

那jquery为什么不支持post方式跨域呢?

虽然采用post+动态生成iframe是可以达到post跨域的目的,但这样做是一个比较极端的方式,不建议采用。

也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的,万不得已还是不要剑走偏锋。

来个超简单的例子:

<!DOCTYPE HTML>   
<html>   
<head>   
<title>Test Jsonp</title>  
<script type="text/javascript">   
function jsonpCallback(result)   {   
 	alert(result.msg);   
 	}   
</script>  
<script type="text/javascript"src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>   
</head>   
</html>   


http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback 这个 url 是跨域服务器取 json 数据的接口,参数为回调函数的名字,返回的格式为:jsonpCallback({msg:’this is json data’})
其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后回调的函数。

简述原理与过程:

首先在客户端注册callback,然后把callback的名字传给服务器。

此时,服务器生成 json 数据。然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp。

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里。(动态执行回调函数)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234143.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 动态规划之01背包问题及其优化(python实现)「建议收藏」

    动态规划之01背包问题及其优化(python实现)「建议收藏」动态规划之01背包问题及其优化(python实现)**背包问题(**Knapsackproblem)是一种组合优化的NP完全问题。问题描述为:给定一组物品,每种物品都有自己的重量和价格,在限定的总重量内,我们如何选择,才能使得物品的总价格最高。问题的名称来源于如何选择最合适的物品放置于给定背包中。解决思路:动态规划,对每一件物品遍历背包容量,当背包可容纳值大于等于当前物品,与之前已放…

  • pycharm查找替换快捷键_python查找指定字符串并替换

    pycharm查找替换快捷键_python查找指定字符串并替换快捷键ctrl+shift+r弹出如下界面上边我的dealed就是要被替换的内容,handled就是替换后的内容点击replaceinfindwindows…点击allfiles就是全部替换了

  • lunix针对用户的常用操作命令

    lunix针对用户的常用操作命令(1)使用who查看目前有哪些用户登录了服务器,见下图[root@vm18~]#whorootpts/02015-03-2710:23(192.168.9.188)从上文可以看出用户root使用ip地址为192.168.9.188登录到linux系统上 (2)看看root都在什么时间登录过系统 [root@vm18~]#lastrootrootpts/0192.168.9.1…

  • linux中vim命令下一页,分享一些非常实用的 Vim 命令

    linux中vim命令下一页,分享一些非常实用的 Vim 命令删除标记内部的文字当我开始使用Vim时,一件我总是想很方便做的事情是如何轻松的删除方括号或圆括号里的内容。转到开始的标记,然后使用下面的语法:di[标记]比如,把光标放在开始的圆括号上,使用下面的命令来删除圆括号内的文字:di(如果是方括号或者是引号,则使用:di{和:di”删除指定标记前的内容和删除标记内部有些相似,但目的不同。命令如下:dt[标记]会删除所有光标和标记之间的内容(保持标记不…

  • NSGA2 算法MATLAB完整代码 中文注释详解

    NSGA2 算法MATLAB完整代码 中文注释详解2019.7.17很意外本人这篇文章受到很多人的关注,在此把源码贴出来供大家更好的理解学习。https://download.csdn.net/download/joekepler/10590751========================分割=====================================本人最近研究NSGA2算法,网上有很多示例代码,但是基本没有…

  • js unit8array和java变量之间的关系

    js unit8array和java变量之间的关系unit8array如何同java进行交互最近一个项目遇到了一个二维码转换的问题,厂家给的demo只有js的转换方式,其中用到了Unit8,由于实际应用场景,转换应该由后端java代码进行实现,这里记录一下实现方式。JS对字符串操作的时候,有时候我们会用到UNIT8ARRAY,例如varbinary_string=window.atob(str);vararray=new…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号