Ajax--同源策略,jsonp跨域传输原理（callback），
什么是同源策略？
阮一峰的博客 同源策略
同源策略的解决方法： 跨域传输
img 标签的src是可以引入其他域名下的图片
script标签的src属性同理 ，也可以引入其他域名下的js文件，并执行 1.script的属性引入文件(页面地址)的时候是允许跨域
2.在页面地址后,拼接?callback=参数，让后端能接受到我们的参数
3.需要后端的配合，接收传过来的参数（函数名称），把我们处理好的json数据，作为函数的参数，再传回到前端
4.把我处理好的json数据，作为函数的参数在传回到前端 核心技术:
前端定义函数后端调用函数
（前端定义函数发送给后台，后台把数据作为定义函数的形参传给前端） 跨域传输例子：cross.html 跨域数据传输
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
img 标签的 src 是可以引入其他域名下的图片，
script 标签的 src属性同理，也可以引入其他域名(跨域)下的js文件，并执行
-->
<!--
1. script的src属性引入文件(页面地址)的时候是允许跨域
2. 在src地址后，拼接?callback=参数，让后端能接收到我们参数
3. 需要后端配合，接收传过来的参数(函数名称)，
4. 把我们处理好的json数据，作为函数的参数再传回到前端
核心技术：
前端定义函数，后端调用函数。
(前端定义函数发送给后台，后台把数据作为定义函数的参数传给前端。)
-->
<img src="http://www.ruanyifeng.com/blogimg/asset/2016/bg2016041202.jpg" alt="">
</body>
</html>
<script>
function getCrossJson(json) {
console.log(json);
alert("我们在html页面创建了一个函数，但是不在这里调用");
}
</script>
<!-- script 可以加载文件，并执行这些文件 -->
<!--<script src="http://localhost/AJAX/day02/13_cross.php"></script>-->
<!-- 跨域加载php文件 -->
<script src="http://127.0.0.1/AJAX/cross.php?callback=getCrossJson"></script>
在服务器中的cross.php
<?php
header('Content-Type:text/javascript;charset=utf-8;');
// echo 'getCrossJson()'; 写死的一个函数
$callback = $_GET['callback'];
// 读取一份json文件，把它放到$jsonStr变量里
$jsonStr = file_get_contents('nav.json');
echo "$callback($jsonStr)";
?>
Ajax--同源策略,jsonp跨域传输原理（callback），的更多相关文章
- 第二百七十四节，同源策略和跨域Ajax
同源策略和跨域Ajax 什么是同源策略 尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措 ...
- cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案
cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...
- 11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用
1. cookie 浏览器存储技术.(服务器将少量数据交于浏览器存储管理) 作用: 存储数据, 解决 http 协议无状态问题 工作流程: 浏览器发送请求给服务器,请求登录 服务器返回响应给浏览器,此 ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
- 【转】JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- JSONP跨域的原理解析（转）
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
- JSONP跨域的原理
一种脚本注入行为 在 2011年10月27日 那天写的 已经有 12671 次阅读了 感谢 参考或原文 服务器君一共花费了23.005 ms进行了2次数据库查询,努力地为您提供了这个页面. ...
- JSONP跨域的原理解析及其实现介绍
JSONP跨域的原理解析及其实现介绍 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-22 JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并 ...
随机推荐
- java 调用区块链 发布和调用智能合约
java连接区块链 很简单 ,调用智能合约要麻烦一些. 先说连接 区块链查询数据. 1 maven 项目导入 web3j 的依赖. <dependency> <groupId> ...
- Spring MVC(八)--控制器接受简单列表参数
有些场景下需要向后台传递一个数组,比如批量删除传多个ID的情况,可以使用数组传递,数组中的ID元素为简单类型,即基本类型. 现在我的测试场景是:要从数据库中查询minId<id<maxId ...
- nginx使用手册--nginx.conf文件配置详解
#运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; ...
- ES6之主要知识点（六）数组
引自http://es6.ruanyifeng.com/#docs/array 1.扩展运算符(...) 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用 ...
- 解决使用mybatis模糊查询为空的问题
解决方法: 在数据库配置的url后添加?useUnicode=true&characterEncoding=utf-8 参考: https://blog.csdn.net/IT_private ...
- AlexNet详细解读
AlexNet详细解读 目前在自学计算机视觉与深度学习方向的论文,今天给大家带来的是很经典的一篇文章 :<ImageNet Classification with Deep Convolutio ...
- (补充)10.Hibernate框架的查询方式
技术分析之Hibernate框架的查询方式 1. 唯一标识OID的检索方式 * session.get(对象.class,OID) 2. 对象的导航的方式 3. HQL的检索方式 * Hibernat ...
- [转]浅谈C#中常见的委托
一提到委托,浮现在我们脑海中的大概是听的最多的就是类似C++的函数指针吧,呵呵,至少我的第一个反应是这样的. 关于委托的定义和使用,已经有诸多的人讲解过,并且讲解细致入微,尤其是张子阳的那一篇.我就不 ...
- 解决linux机器克隆后eth0不见的问题
克隆机器之后,两个几的物理地址和ip地址是一样的,导致克隆的机器网络不可用,可以通过通过如下步骤修改: 通过ifconfig –a 命令可查看所有的ip地址配置. 通过这个命令可以发现有一个eth ...
- UOJ261 【NOIP2016】天天爱跑步 LCA+动态开点线段树
UOJ261 [NOIP2016]天天爱跑步 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.天天爱跑步是一个养成类游戏,需要玩家每天按时上线, ...