jsonp跨域总结
同源限制: 浏览器不允许一个域的脚本请求另一个域的文档，通俗来说，不允许访问不同协议、不同域名或不同端口的文档
跨域处理方法:
1.jsonp
前提: 浏览器虽然对ajax请求做出了限制，但script的链接没有限制，例如: <script src= 'xxx'>,我们可以轻松地链接到另一个域的文件
原理:
首先在客户端创建一个回调函数，将回调函数的名称(例如callback)传给服务端;
服务端生成json数据data后，创建js文件，将callback(data)(data成了callback的参数)写入js文件；
客户端创建script文件，链接地址为此前生成的js文件地址；
解析script文件，返回的callback(data)即调用callback函数(前面已创建)，由此，我们获取了data，如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script> //创建callback函数
function callBack(data){
console.log(data)
}
</script>
<script> //客户端返回的文件
callBack({content: 'xx'})
</script>
</html>
实际应用的例子如下:
<script type="text/javascript">
var url = "http://localhost:8080/html5/jsonp_data11.js";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
function callbackFun(data)
{
console.log(data.age);
console.log(data.name);
}
</script>
也可以使用jquery
$.ajax({
type:"post",
url:"http://localhost:8080/html5/JsonServlet",
dataType:'jsonp',
jsonp:'mycallback',
jsonpCallback:'callbackFun',
success:function(data) {
console.log(2222);
console.log(data.age);
}
});
值得注意的是使用jsonp是一个前后端配合的过程，后台根据前端的请求也得做成相应调整，特别是使用jquery时， 有时回调函数名是jsonp属性的值，有时候追加到
url后面。
优点: 很好地解决了同源策略的限制
缺点:
1.只能GET；
2.不会返回状态码；
3.安全性不佳，毕竟返回一段js，对安全由一定威胁。
jsonp跨域总结的更多相关文章
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 借助node实战JSONP跨域
一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...
- jsonp跨域+ashx（示例）
前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...
- Jsonp跨域访问
很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...
- jsonp 跨域请求
背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...
- 我的jsonp跨域问题
关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题: 首先什么是跨域,简单地 ...
- jsonP跨域调用
-------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
- jsonp跨域问题
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
随机推荐
- 第二章----python基础
概要:python是一种计算机编程语言,有自己的一套语法,编译器或者解释器负责把符合语法的程序代码翻译成CPU能识别的机器码,然后执行.python使用缩进来组织代码块,Python程序中大小写是敏感 ...
- Python简单分布式爬虫
分布式爬虫采用主从模式.主从模式是指由一台主机作为控制节点,负责管理所有运行网络爬虫的主机(url管理器,数据存储器,控制调度器),爬虫只需要从控制节点哪里接收任务,并把新生成任务提交给控制节点.此次 ...
- zxing 二维码扫描 配置和使用
本文转载至 http://blog.csdn.net/a6472953/article/details/8796501 二维码扫描使用最多的主要有两个库:zbarSDK 和zxing 关于zbar ...
- jmeter 响应数据更换显示类型（json、html、text）
.默认情况下是Text格式 2.修改为json格式显示
- iOS学习笔记（十七）——文件操作（NSFileManager）
iOS的沙盒机制,应用只能访问自己应用目录下的文件.iOS不像android,没有SD卡概念,不能直接访问图像.视频等内容.iOS应用产生的内容,如图像.文件.缓存内容等都必须存储在自己的沙盒内.默认 ...
- EasyGBS国标流媒体视频平台接入海康、大华、宇视的摄像机、硬盘录像机NVR、国标下级平台的方案
在上一篇<EasyNVR和EasyDSS云平台联手都不能解决的事情,只有国标GB28181能解决了>我们大致介绍了国标GB/T28181的使用场景,而且初步介绍了EasyGBS国标视频平台 ...
- 关于webpack打包图片的路径问题
在webpack打包的时候,用css-loader的时候,在css文件里用的引用的背景的图片的时候,如果是url()...那么里面的路径不能用相对路径,得用绝对路径,而且必须是带http的,幸好,,, ...
- 阻塞队列 ArrayBlockingQueue 我给自己挖了一个坑
说一句MMB, 一下午时间, package cn.tbnb1.seckil.quene; import java.util.concurrent.ArrayBlockingQueue; import ...
- D3D9和OpenGL加载纹理图片的API是哪个？
D3D9 创建一个空纹理,当返回 S_OK 且 ppTexture 纹理对象指针不为 NULL 时,则表示该函数调用成功. HRESULT D3DXCreateTexture( _In_ LPDIR ...
- SQL实战
一.表关系 二.操作表 1.自行创建测试数据 表结构和数据 SET NAMES utf8;SET FOREIGN_KEY_CHECKS = 0; -- ------------------------ ...