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 ...
随机推荐
- Struts2框架拦截器：
Struts 2框架提供了良好的预配置,并准备使用的盒拦截.下面列出了几个重要的拦截器: SN Interceptor & 描述 1 aliasAllows parameters to hav ...
- 关闭数据库时SHUTDOWN: waiting for active calls to complete.处理
有时候在关闭数据库时,发出shutdown immediate;命令后一直未关闭.查看ALERT日志.在等待一段时间后日志中有提示: SHUTDOWN: waiting for active call ...
- ssh 面试
Struts1工作原理1. 初始化:struts框架的总控制器ActionServlet是一个Servlet,它在web.xml中配置成自动启动的Servlet,在启动时总 控制器会读取配置文件(st ...
- Laravel5.1 路由 -基础
什么是路由? 大K简单的说下,路由是用户访问我们程序的一个入口,比方说 你在浏览器输入:www.myblogs.com/create 就会打开一个页面,我们接收到这一个请求后后台需要做一些事儿来反馈给 ...
- jqgrid 事件说明
Events(事件) 事件响应动作被设置为表格的属性,以下定义了行被选中时的响应: var lastSel; jQuery("#gridid").jqGrid({ ... o ...
- node.js调用函数
首先EditPlus编辑器,打开新建的文本文档,另存为副本 调用函数分为调用本地函数,和其他文件的函数 1.调用本地函数 var http = require('http'); http.create ...
- poj 3590(dp 置换)
题目的意思是对于序列1,2,...,n.要你给出一种字典序最小的置换使得经过X次后变成最初状态,且要求最小的X最大. 通过理解置换的性质,问题可以等价于求x1,x2,..,xn 使得x1+x2+... ...
- 【BZOJ4817】[Sdoi2017]树点涂色 LCT+线段树
[BZOJ4817][Sdoi2017]树点涂色 Description Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同.定义一条路径的权值是:这条路 ...
- 【BZOJ3158】千钧一发 最小割
[BZOJ3158]千钧一发 Description Input 第一行一个正整数N. 第二行共包括N个正整数,第 个正整数表示Ai. 第三行共包括N个正整数,第 个正整数表示Bi. Output 共 ...
- 用JS改变的元素CSS样式，css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...