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 左移右移 2个数交换
左移右移的能够使得数字*2或者/2 那*3怎么办,就左移一位然后再+ 经典面试题: 1.交换2个数,不用temp a=10 b=12 1.1 a = a + b = 22 b = a - b = ...
- [AC自己主动机+状压dp] hdu 2825 Wireless Password
题意: 给n.m,k ,再给出m个单词 问长度为n的字符串.至少在m个单词中含有k个的组成方案有多少种. 思路: 因为m最大是10,所以能够採取状压的思想 首先建立trie图,在每一个单词的结束节点标 ...
- 浅谈IM软件怎样建立安全socket连接、登录
----------------------------------------------------欢迎查看IM软件业务知识<专栏>-------------------------- ...
- openstack组件通讯端口定义
openstack 组件通讯是通过ZeroMQ+ceilometer发送组件调用信息,具体是通过TCP通讯,发送数据和接收数据是用同一个端口(在配置文件指定),下面通过代码稍作解析: IceHouse ...
- winform 的 checklistbox动态绑定并选中值
绑定的代码:这里绑定的是一个泛型 BLL.PowerBLL powerbll = new BLL.PowerBLL(); checkpower.DataSource = powerbll.GetAll ...
- 打印99乘法表-python
题目:如何打印出阶梯状的99乘法表? 题解: #coding:utf-8def multiplication_tables(num):#for i in range(1,10): for j in r ...
- 输入一个十进制数N，将它转换成R进制数输出（运用递归实现）
#include<stdio.h> int cnt=0; //用来记录每个进制存放的位置 char num[20]; //用来存 ...
- spring-security+hibernate4+quartz实现的心跳检测项目（转 收藏）
转自:http://www.52itstyle.com/thread-27470-1-1.html HeartBeat. ~2 Z8 U! ?8 r心跳检测各类应用服务器(如Tomcat,Jetty) ...
- ofstream和ifstream详细用法
ASCII和二进制文件的输入输出 First:包含头文件#include <fstream> ASCII输入: 首先要创建一个in-stream对象:ifstream fin(" ...
- dfs_部分和问题
给定整数a1,a2,....,an ,选若干数时它们的和为k. 解析:每个数有两种状态:加.不加. 全部n个数都决定其状态后进行判断.复杂度O(2n) 生成可行解空间多用dfs实现. import j ...