jsonp详解—javasript/jQuery跨域请求

参考文章：

http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

https://zh.wikipedia.org/wiki/JSONP

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

http://www.ruanyifeng.com/blog/2016/04/cors.html

http://www.clanfei.com/2012/08/1637.html

https://zh.wikipedia.org/wiki/%E8%B7%A8%E4%BE%86%E6%BA%90%E8%B3%87%E6%BA%90%E5%85%B1%E4%BA%AB

 

同源策略基本概念

同源策略（Sameorigin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

例子：同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面。当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

具体实例：

一个端口是2698，一个2701，按照定义它们是不同源的。

2.用jQuery发起不同源的请求

在2698端口的网页上添加一个按钮，Click事件随便发起两个向端口为2701域的请求。

$("#getOtherDomainThings").click(function () {    $.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {        console.log(data)    })    $.get("http://localhost:2701/home/index", function (data) {        console.log(data)    })})

根据同源策略，很明显会悲剧了。浏览器会阻止，根本不会发起这个请求。（not allowed by Access-Control-Allow-Origin）

OK，原来jsonp是要解决这个问题的。

script标签的跨域能力

不知道大家知不知道CDN这个东西，例如微软的CDN，使用它，我们的网页可以不提供jQuery，由微软的网站帮我们提供：

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

回到我们的2698端口的网页，上面我们在Click事件里有一个对2701端口域的jQuery文件的请求，这次使用script标签来请求。

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

当然，200，OK了

同样是端口2698的网页发起对2701域的请求，放在script里设置scr属性的OK了，另一个方式就悲剧。利用script的跨域能力，这就是jsonp的基础。

利用script获取不同源的json

既然它叫jsonp，很明显目的还是json，而且是跨域获取。根据上面的分析，很容易想到：利用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取。实践：

function CreateScript(src) {    $("<script><//script>").attr("src", src).appendTo("body")}

添加一个按钮事件来测试一下：

$("#getOtherDomainJson").click(function () {    $.get('http://localhost:2701/home/somejson', function (data) {        console.log(data)    })})

首先，第一个浏览器，http://localhost:2701/home/somejson这个Url的确是存在一个json的，而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的，但是最下面报js语法错误了。原来用script标签加载完后，会立即 把响应当js去执行，很明显{"Email":"[e-mail]","Remark":"我来自遥远的东方"}不是合法的js语句。

利用script获取异域的jsonp

显然，把上面的json放到一个回调方法里是最简单的方法。例如，变成这样：

如果存在jsonpcallback这个方法，那么jsonpcallback({"Email":"[e-mail]","Remark":"我来自遥远的东方"})就是合法的js语句。

由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，所以就带一个QueryString让客户端告诉服务端，回调方法是什么，当然，QueryString的key要遵从服务端的约定，上面的是”callback“。

添加回调函数：

function jsonpcallback(json) {    console.log(json)}

把前面的方法稍微改改参数：

$("#getJsonpByHand").click(function () {    CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")})

200OK，服务器返回jsonpcallback({"Email":"[e-mail]","Remark":"我来自遥远的 东方"})，我们也写了jsonpcallback方法，当然会执行。OK顺利获得了json。没错，到这里就是jsonp的全部。

JQuery Ajax的跨域请求解决方案   

只支持get方式

第一种方法是在ajax函数中设置dataType为'jsonp'

$.ajax({type : "get",async:false,url : "http://www.xxx.com/ajax.do",dataType : "jsonp",jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数jsonpCallback:"success_jsonpCallback",//callback的function名称success : function(json){alert(json);alert(json[0].name);},error:function(){alert('fail');}});
第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可
$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){//处理data数据});
也可以简单地使用getScript方法

//此时也可以在函数外定义foo方法function foo(data){//处理data数据}$.getScript('http://www.a.com/user?id=123&callback=foo');


总结
一句话就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。
jsonpcallback({"Email":"[e-mail]","Remark":"我来自遥远的东方"})
 
<button id="btn">click</button><script type="text/JavaScript">    function $(str){        return document.getElementById(str)    }    function CreateScript(src) {        var Scrip=document.createElement('script');        Scrip.src=src;        document.body.appendChild(Scrip);    }    function jsonpcallback(json) {            console.log(json);//Object { email="中国", email2="中国222"}    }    $('btn').onclick=function(){      CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")        }</script>


                                             
        0        0           
	
				
	
					   
jsonp详解—javasript/jQuery跨域请求
	  	   
jsonp详解—javasript/jQuery跨域请求
	  	   
jquery jsonp跨域请求
	  	   
jquery jsonp 跨域请求
	  	   
jquery jsonp 跨域请求
	  	   
jsonp跨域请求详解
	  	   
jsonp详解跨域请求
	  	   
跨域请求jsonp详解
	  	   
.net jquery jsonp跨域请求
	  	   
jquery jsonp 跨域请求实例
	  	   
jquery+jsonp跨域请求注意事项
	  	   
jquery使用jsonp跨域请求问题
	  	   
jQuery ajax  jsonp实现跨域请求
	  	   
JQuery利用JSONP实现跨域请求
	  	   
jQuery ajax jsonp实现跨域请求
	  	   
JSONP jQuery Ajax 跨域请求
	  	   
JS & jQuery 中的 jsonp (跨域请求)
	  	   
js&jquery跨域详解jsonp，jquery并发大量请求丢失回调bug
	     		  
	  	   
【前端】输入金额时如何判断数字合法
	  	   
class-dump 的安装与使用
	  	   
笔记：读取sql文件，然后将数据批量插入数据库
	  	   
Android 高德地图开发 如何去掉路线规划上起始点图标！
	  	   
什么是真空镀膜?
	  	   
jsonp详解—javasript/jQuery跨域请求
	  	   
【工作笔记】Java 字符串互换判等问题
	  	   
axis2系列之services.xml文件详解
	  	   
Events
	  	   
机器学习数据挖掘-软件、网站、课程资源知识点汇总
	  	   
java 去除字符串中的空格
	  	   
聊聊车企与碳纤维的那些事儿
	  	   
gevent指南
	  	   
swift与OC之间不得不知道的21点【转】