首页 > 作文

Jsonp跨域原理及简单应用

更新时间:2023-04-07 22:20:15 阅读: 评论:0

浏览器的同源策略:

同源策略(same origin policy)是一种约定,它是由netscape提出的一个著名的安全策略,它限制了从圣诞祝福语同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源的定义:如果两个页面的协议端口(如果有指定)和主机都相同,则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”,泰国语或简单地叫做“tuple”. (“tuple” ,“元”,是指一些事物组合在一起形成一个整体,比如(1,2)叫二元,(1,2,3)叫三元)

如果协议、端口、主机(域名或ip地址,如果是ip地址则看做一个根域名)、子域名,当其中一个不同,则我们的请求即会发生跨域问题。

下表给出了相对http://store.company.com/如痴如醉的意思dir/page.html同源检测的示例:

url结果原因http://store.company.com/dir2/other.html同源http://store.company.com/dir/inner/another.html同源https://store.company.com/cure.html不同源协议不同http://store.company.com:81/dir/etc.html不同源端口不同http://news.company.com/dir/other.html不同源主机域名不同

突破同源策略限制:
1、script标签的src/img标签的src,或者说link标签的href他们没有被通源策略所限制
2、src或href链接的静态资源,本质上来说也是一个get请求

jsonp是什么?和json有关系吗?

json(javascript object notation) 是一种轻量级的数据交换格式。

jsonp是json with padding的略称。它是一个非官方非正式的传输的协议,它允许在服务器端集成script tags返回至客户端,通过javascript callback的形式实现跨域访问。

jsonp的简单实现:

html代码文化的名言:(运行在本地http://zrcloud.com/test.html)

<!doctype html public "-//妈妈我想对您说w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; chart=utf-8" /><title>jsonp简单实例</title><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script></head><body><h3>jsonp简单实例</h3><script type="text/javascript">  $(function() {    $.ajax({      type:'get',      async:fal,//同步请求      url:'http://mqcms.com/test.php',      datatype:'jsonp',      jsonp:'callback',//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)      jsonpcallback:'test',//自定义的jsonp回调函数名称,默认为jquery自动生成的随机函数名,也可以写"?",jquery会自动为你处理数据      success:function(data){          console.log(data);      }    })  })</script></body></html>

php服务器端代码:

<?phpheader('content-type:application/json; chart=utf-8');$callback =ist($_get['callback']) ? trim($_get['callback']) : '';$arr=['name'=>'test','age'=>18,'x'=>1];echo $callback.'('.json_encode($arr).')';?>

运行结果:

注:为什么我这次没有写test这个函数呢?而且竟然也运行成功了!

这就是jquery的功劳了,jquery在处理jsonp类型的ajax时(,虽然jquery也把jsonp归入了ajax,但其实它们真的不是一回事儿),自动帮你生成回调函数并把数据取出来供success属性方法来调用。

本文发布于:2023-04-07 22:19:36,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/3da6b59b467df1f3e989abb6d1b806df.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:Jsonp跨域原理及简单应用.doc

本文 PDF 下载地址:Jsonp跨域原理及简单应用.pdf

标签:函数   协议   端口   策略
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图