深入剖析jsonp跨域原理
在项目中遇到一个jsonp跨域的问题，于是仔细的研究了一番jsonp跨域的原理。搞明白了一些以前不是很懂的地方，比如：
1）jsonp跨域只能是get请求，而不能是post请求；
2）jsonp跨域的原理到底是什么；
3）除了jsonp跨域之外还有那些方法绕过“同源策略”，实现跨域访问；
4）jsonp和ajax，或者说jsonp和XMLHttpRequest是什么关系；
等等。
1.同源策略
说到跨域，首先要明白“同源策略”。同源是指：js脚本只能访问或者请求相同协议，相同domain(网址/ip)，相同端口的页面。
我们知道，js脚本可以访问所在页面的所有元素。通过ajax技术，js也可以访问同一协议，同一个domain(ip)，同一端口的服务器上的其他页面，请求到浏览器端之后，利用js就可以进行任意的访问。但是对于协议不同， 或者domain不同或者端口不同的服务器上的页面就无能为力了，完全不能进行请求。
下面在本地搭建两个tomcat，分别将端口设为8080，和8888，进行相关实验。显然他们的端口是不同的。演示如下：
http://localhost:8888/html4/ajax.html的代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="jsonp">
<meta name="description" content="jsonp">
<title>jsonp</title>
<style type="text/css">
*{margin:0;padding:0;}
a{display:inline-block;margin:50px 50px;}
</style>
</head>
<body>
<a href="javascript:;" onclick="myAjax();">click me</a> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function myAjax(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = ActionXObject("Microsoft.XMLHTTP");
} xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
console.log(xmlhttp.responseText);
}
}
var url = "http://localhost:8080/minisns/json.jsp" + "?r=" + Math.random();
xmlhttp.open("Get", url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send();
} </script>
</body>
</html>
这里为了结果不受其他js库的干扰，使用了原生的XMLHttpRequest来处理，结果如下：
我们看到8080端口的js的ajax请求无法访问8888端口的页面。原因是“同源策略不允许读取”。
既然普通的ajax不能访问，那么怎样才能访问呢？大家都知道，使用jsonp啊，那jsonp的原理是什么呢？他为什么能跨域呢？
2.jsonp跨域的原理
我们知道，在页面上有三种资源是可以与页面本身不同源的。它们是：js脚本，css样式文件，图片，像taobao等大型网站，很定会将这些静态资源放入cdn中，然后在页面上连接，如下所示，所以它们是可以链接访问到不同源的资源的。
1）<script type="text/javascript" src="某个cdn地址" ></script>
2）<link type="text/css" rel="stylesheet" href="某个cdn地址" />
3）<img src="某个cdn地址" alt=""/>
而jsonp就是利用了<script>标签可以链接到不同源的js脚本，来到达跨域目的。当链接的资源到达浏览器时，浏览器会根据他们的类型来采取不同的处理方式，比如，如果是css文件，则会进行对页面 repaint，如果是img 则会将图片渲染出来，如果是script 脚本，则会进行执行，比如我们在页面引入了jquery库，为什么就可以使用 $ 了呢？就是因为 jquery 库被浏览器执行之后，会给全局对象window增加一个属性： $ ，所以我们才能使用 $ 来进行各种处理。（另外为什么要一般要加css放在头部，而js脚本放在body尾部呢，就是为了减少repaint的次数，另外因为js引擎是单线程执行，如果将js脚本放在头部，那么在js引擎在执行js代码时，会造成页面暂停。）
利用 页面上 script 标签可以跨域，并且其 src 指定的js脚本到达浏览器会执行的特性，我们可以进行跨域取得数据。我们用一个例子来说明：
8888端口的html4项目中的jsonp.html页面代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="jsonp">
<meta name="description" content="jsonp">
<title>jsonp</title>
</head>
<body> <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
var url = "http://localhost:8080/html5/jsonp_data.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>
</body>
</html>
其访问的8080端口的html5项目中的jsonp_data.js代码如下：
callbackFun({"age":100,"name":"yuanfang"})
将两个tomcate启动，用浏览器访问8888端口的html4项目中的jsonp.html，结果如下：
上面我们看到，我们从8888 端口的页面通过 script 标签成功 的访问到了8080 端口下的jsonp_data.js中的数据。这就是 jsonp 的基本原理，利用script标签的特性，将数据使用json格式用一个函数包裹起来，然后在进行访问的页面中定义一个相同函数名的函数，因为 script 标签src引用的js脚本到达浏览器时会执行，而我们有定义了一个同名的函数，所以json格式的数据，就做完参数传递给了我们定义的同名函数了。这样就完成了跨域数据交换。jsonp的含义是：json with padding，而在json数据外包裹它的那个函数，就是所谓的 padding 啦^--^
明白了原理之后，我们再看一个更加实用的例子：
8080端口的html5项目中定义一个servlet:
package com.tz.servlet; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON; @WebServlet("/JsonServlet")
public class JsonServlet extends HttpServlet
{
private static final long serialVersionUID = 4335775212856826743L; protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
String callbackfun = request.getParameter("mycallback");
System.out.println(callbackfun); // callbackFun
response.setContentType("text/json;charset=utf-8"); User user = new User();
user.setName("yuanfang");
user.setAge(100);
Object obj = JSON.toJSON(user); System.out.println(user); // com.tz.servlet.User@164ff87
System.out.println(obj); // {"age":100,"name":"yuanfang"}
callbackfun += "(" + obj + ")";
System.out.println(callbackfun); // callbackFun({"age":100,"name":"yuanfang"}) response.getWriter().println(callbackfun);
} protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
this.doPost(request, response);
} }
在8888端口的html4项目中的jsonp.html来如下的跨域访问他：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="jsonp">
<meta name="description" content="jsonp">
<title>jsonp</title>
<style type="text/css">
*{margin:0;padding:0;}
div{width:600px;height:100px;margin:20px auto;}
</style>
</head>
<body>
<div>
<a href="javascript:;">jsonp测试</a>
</div> <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function callbackFun(data)
{
console.log(111);
console.log(data.name);
//data.age = 10000000;
//alert(0000);
}
$(function(){
$("a").on("click", function(){
$.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);
}
});
})
});
</script>
</body>
</html>
结果如下：
我们看到，我们成功的跨域取到了servlet中的数据，而且在我们指定的回调函数jsonpCallback:'callbackFun' 和 sucess 指定的回调函数中都进行了执行。而且总是callbackFun先执行，如果我们打开注释：//data.age = 10000000; //alert(0000);
就会发现：在callbackFun中对 data 进行修改之后，success指定的回调函数的结果也会发生变化，而且通过alert(0000)，我们确定了如果alert(000)没有执行完，success指定的函数就不会开始执行，就是说两个回调函数是先后同步执行的。
结果如下：
3.jsonp 跨域与 ajax
从上面的介绍和例子，我们知道了 jsonp 跨域的原理，是利用了script标签的特性来进行的，但是这和ajax有什么关系呢？显然script标签加载js脚本和ajax一点关系都没有，在没有ajax技术之前，script标签就存在了的。只不过是jquery的封装，使用了ajax来向服务器传递 jsonp 和 jsonpCallback 这两个参数而已。我们服务器端和客户端实现对参数 jsonp 和 jsonpCallback 的值，协调好，那么就没有必要使用ajax来传递着两个参数了，就像上面第二个例子那样，直接构造一个script标签就行了。不过实际上，我们还是会使用ajax的封装，因为它在调用完成之后，又将动态添加的script标签去掉了，我们看下相关的源码：
上面的代码先构造一个script标签，然后注册一个onload的回调，最后将构造好的script标签insert进去。insert完成之后，会触发onload回调，其中又将前面插入的script标签去掉了。其中的 代码 callback( 200, "success" ) 其实就是触发 ajax 的jsonp成功时的success回调函数，callback函数其实是一个 done 函数，其中包含了下面的代码：
因为传入的是 200 ，所以 isSuccess = true; 所以执行 "success"中的回调函数，response = ajaxHandleResponse(...) 就是我们处理服务器servelt返回的数据，我们可以调试：console.log(response.data.age); console.log(response.data.name); 看到结果。
3.jsonp 跨域与 get/post
我们知道 script，link, img 等等标签引入外部资源，都是 get 请求的，那么就决定了 jsonp 一定是 get 的，那么为什么我们上面的代码中使用的 post 请求也成功了呢？这是因为当我们指定dataType:'jsonp',不论你指定：type:"post" 或者type:"get"，其实质上进行的都是 get 请求！！！从两个方面可以证明这一点：
1）如果我们将JsonServlet中的 doGet()方法注释掉，那么上面的跨域访问就不能进行，或者在 doPost() 和 doGet() 方法中进行调试，都可以证明这一点；
2）我们看下firebug中的“网络”选项卡：
我们看到，即使我们指定 type:"post"，当dataType:"jsonp" 时，进行的也是 GET请求，而不是post请求，也就是说jsonp时，type参数始终是"get"，而不论我们指定他的值是什么，jquery在里面将它设定为了get. 我们甚至可以将 type 参数注释掉，都可以跨域成功：
$(function(){
$("a").on("click", function(){
$.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跨域只能是get，jquery在封装jsonp跨域时，不论我们指定的是get还是post，他统一换成了get请求，估计这样可以减少错误吧。其对应的query源码如下所示：
// Handle cache's special case and global
jQuery.ajaxPrefilter( "script", function( s ) {
if ( s.cache === undefined ) {
s.cache = false;
}
if ( s.crossDomain ) {
s.type = "GET";
s.global = false;
}
});
if( s.crossDomain){ s.type = "GET"; ...} 这里就是真相！！！！！！！！在ajax的过滤函数中，只要是跨域，jquery就将其type设置成"GET"，真是那句话：在源码面前，一切了无秘密！jquery源码我自己很多地方读不懂，但是并不妨碍我们去读，去探索！
4.除了jsonp跨域方法之外的其他跨域方法
其实除了jsonp跨域之外，还有其他方法绕过同源策略，
1）因为同源策略是针对客户端的，在服务器端没有什么同源策略，是可以随便访问的，所以我们可以通过下面的方法绕过客户端的同源策略的限制：客户端先访问 同源的服务端代码，该同源的服务端代码，使用httpclient等方法，再去访问不同源的 服务端代码，然后将结果返回给客户端，这样就间接实现了跨域。相关例子，参见博文：http://www.cnblogs.com/digdeep/p/4198643.html
2）在服务端开启cors也可以支持浏览器的跨域访问。cors即：Cross-Origin Resource Sharing 跨域资源共享。jsonp和cors的区别是jsonp几乎所有浏览器都支持，但是只能是get，而cors有些老浏览器不支持，但是get/post都支持，cors的支持情况，可以参见下图(来自：http://caniuse.com/#search=cors)
cors实例：
项目html5中的Cors servlet：
public class Cors extends HttpServlet
{
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");
response.getWriter().write("cors get");
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");
response.getWriter().write("cors post");
} }
在html4项目中访问他：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="jsonp">
<meta name="description" content="jsonp">
<title>cors</title>
<style type="text/css">
*{margin:0;padding:0;}
div{width:600px;height:100px;margin:20px auto;}
</style>
</head>
<body>
<div>
<a href="javascript:;">cors测试</a>
</div> <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("a").on("click", function(){
$.ajax({
type:"post",
url:"http://localhost:8080/html5/cors",
success:function(data) {
console.log(data);
alert(data);
}
});
})
});
</script>
</body>
</html>
访问结果如下：
5. 参数jsonp 和 jsonpCallback
jsonp指定使用哪个名字将回调函数传给服务端，也就是在服务端通过 request.getParameter(""); 的那个名字，而jsonpCallback就是request.getParamete("")取得的值，也就是回调函数的名称。其实这两个参数都可以不指定，只要我们是通过 success ： 来指定回调函数的情况下，就可以省略这两个参数，jsnop如果不知道，默认是 "callback"，jsnpCallback不指定，是jquery自动生成的一个函数名称，其对应源码如下：
var oldCallbacks = [],
rjsonp = /(=)\?(?=&|$)|\?\?/; // Default jsonp settings
jQuery.ajaxSetup({
jsonp: "callback",
jsonpCallback: function() {
var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( nonce++ ) );
this[ callback ] = true;
return callback;
}
});
深入剖析jsonp跨域原理的更多相关文章
- jsonp 跨域原理详解
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- jsonp跨域原理
Jsonp原理: 首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器.注意:服务端得到ca ...
- jsonp跨域原理解析
前言: 跨域请求是前台开发中经常遇到的场景,但是由于浏览器同源策略,导致A域下普通的http请求没法加载B域下的数据,跨域问题由此产生.但是通过script标签的方式却可以加载非同域下的js,因此可以 ...
- Jsonp跨域原理及简单应用
浏览器的同源策略: 同源策略(Same Origin Policy)是一种约定,它是由Netscape提出的一个著名的安全策略,它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是 ...
- javascript实现jsonp跨域问题+原理
在工作中往往存在跨域的问题 ,跨域是什么概念就不在这里了,搜这类问题的肯定已经知道了.下面直接探讨jsonp跨域原理 jspon跨域原理: 1.动态创建一个script标签 var script = ...
- JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
- WebApi2 jsonp跨域问题
一:故事背景 以前在写WebApi2的时候,一直是用作前后端分离(WebApi2 +angularjs),可是最近自己在给WebApp写接口的时候遇到了很多坑,总结一下就是跨域问题.而跨域问题 ...
- 前端跨域之jsonp跨域
jsonp跨域原理 原理:因为通过script标签引入的js是不受同源策略的限制的(比如baidu.com的页面加载了google.com的js).所以我们可以通过script标签引入一个js或者一个 ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
随机推荐
- SQL Server里PIVOT运算符的”红颜祸水“
在今天的文章里我想讨论下SQL Server里一个特别的T-SQL语言结构——自SQL Server 2005引入的PIVOT运算符.我经常引用这个与语言结构是SQL Server里最危险的一个——很 ...
- 【Android进阶系列教程】前言
起因 因为初学Android的时候还没有写博客的意识,现在Android的门是入了,正在进阶的道路上行走,但是就这一路也走了不少的弯路.我想,总得来说Android入门还是比较容易的,网络资源比较丰富 ...
- Scrum团队成立3.0
博客园 首页 新随笔 联系 订阅 管理 随笔 - 23 文章 - 0 评论 - 26 0428-Scrum团队成立3.0 ------------------------------3.0---- ...
- error LNK1281: 无法生成 SAFESEH 映像 LNK2026 模块对于 SAFESEH 映像是不安全的 VS2015 /win10
平台 VS2015 /win10 错误 LNK1281 无法生成 SAFESEH 映像. 错误 LNK2026 模块对于 SAFESEH 映像是不安全的. 将 release 改成 debug
- csharp:VerifyCode in winform or webform
winform: using System; using System.Collections.Generic; using System.ComponentModel; using System.D ...
- fibonacci数列从a到b的个数
Description 我们定义斐波那契数列如下: f1=1 f2=2 f(n)=f(n-1)+f(n-2)(n>=3) 现在,给定两个数a和b,计算有多少个斐波那契数列中的数在a和b之间( ...
- PHP的静态变量和引用函数
直接贴代码,结果的原因写在备注了 <?php /** * Created by PhpStorm. * User: Administrator * Date: 16-8-25 * Time: 上 ...
- 推荐两个很好用的javascript模板引擎
http://www.jsviews.com/#jsrender,支持if/for等常用逻辑,自称下一代jquery template plugin标准 https://github.com/janl ...
- 「C语言」int main还是void main？
从大一入学刚接触C到现在已满7个月了,虽然刚开始就知道```int main```才是标准的写法,但一直没有深刻理解为什么不能用```void main```而必须使用```int main```. ...
- 用SQL语句操作数据
转载请注明出处:http://www.cnblogs.com/smbk/ 1.点击[新建查询]按钮,打开SQL命令编辑框,对数据库表的操作以及维护都可以通过编辑SQL命令实现. 2.在编辑框内编辑创建 ...