json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。
同源策略
首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思,实践一下就知道了。
1. 随便建两个网页
在你的apache的httpd.conf配置文件中添加如下配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
Listen
11111
Listen
22222
namevirtualhost
localhost
:
11111
namevirtualhost
localhost
:
22222
<
VirtualHost
localhost:11111
>
ServerAdmin
tangrucheng
@
gmail
.
com
ServerName
localhost
:
11111
DocumentRoot
E
:
/
wamp
/
www
/
test
/
test11111
<
/VirtualHost
>
<
Directory
"E:/wamp/www/test/test11111"
>
Options
Indexes
FollowSymLinks
MultiViews
AllowOverride
All
Order
allow
,
deny
Allow
from
all
<
/Directory
>
<
VirtualHost
localhost:22222
>
ServerAdmin
tangrucheng
@
gmail
.
com
ServerName
localhost
:
22222
DocumentRoot
E
:
/
wamp
/
www
/
test
/
test22222
<
/VirtualHost
>
<
Directory
"E:/wamp/www/test/test22222"
>
Options
Indexes
FollowSymLinks
AllowOverride
None
Order
allow
,
deny
Allow
from
all
<
/Directory
>
|
这样一个端口是11111,一个22222,按照定义它们是不同源的。
2. 用jQuery发起不同源的请求
在11111端口的网页上添加一个按钮,Click事件随便发起向端口为22222域的请求:
根据同源策略,很明显会悲剧了。浏览器会阻止,根本不会发起这个请求。
OK,原来jsonp是要解决这个问题的。
script标签的跨域能力
不知道大家知不知道CDN这个东西,例如微软的CDN,使用它,我们的网页可以不提供jQuery,由微软的网站帮我们提供:
回到我们的11111端口的网页,上面我们在Click事件里有一个对22222端口域的jQuery文件的请求,这次使用script标签来请求。
当然,200,OK了。
同样是端口11111的网页发起对22222域的请求,放在script里设置scr属性的OK了,另一个方式就悲剧。利用script的跨域能力,这就是jsonp的基础。
利用script获取不同源的json
既然它叫jsonp,很明显目的还是json,而且是跨域获取。根据上面的分析,很容易想到:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。实践:
首先,第一个浏览器,http://localhost:22222/index.php这个Url的确是存在一个json的,而且在端口11111网页上用script标签来请求这个22222这个Url也是200OK的,但是最下面报js语法错误了。原来用script标签加载完后,会立即把响应当js去执行,很明显{"a":1,"b":2,"c":3,"d":4,"e":5}不是合法的js语句。
利用script获取异域的jsonp
显然,把上面的json放到一个回调方法里是最简单的方法。例如,变成这样:
如果存在jsonpcallback这个方法,那么jsonpcallback({"a":1,"b":2,"c":3,"d":4,"e":5})就是合法的js语句。
由于服务器不知道客户端的回调是什么,不可能hard code成jsonpcallback,所以就带一个QueryString让客户端告诉服务端,回调方法是什么,当然,QueryString的key要遵从服务端的约定,上面的是”callback“。
添加回调函数:
把前面的方法稍微改改参数:
200OK,服务器返回jsonpcallback({"a":1,"b":2,"c":3,"d":4,"e":5}),我们也写了jsonpcallback方法,当然会执行。OK顺利获得了json。没错,到这里就是jsonp的全部。
利用jQuery获取jsonp
上面的方式中,又要插入script标签,又要定义一个回调,略显麻烦,利用jQuery可以直接得到想要的json数据,同样是上面的jsonp(服务器端代码不变):
得到的结果跟上面一样。
总结
一句话就是利用script标签绕过同源策略,获得一个类似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想得到的json。
到这里不免产生一个疑惑,同源策略是基于安全的原因建立的,发起不同源的请求是被认为不安全的,不可以接受的,但为什么这样绕一个小圈子就可以接受呢?这样就安全了吗?感觉就像洗澡时怕被人看见,把门关上,但侧面的大窗户却是打开的,这样做有意义吗?元芳你怎么看?
原文:http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html
推荐阅读:http://www.cnblogs.com/yjf512/p/3222269.html
-------------------------------------------------------------------------------------------------------------
取不到数据!
上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中取得的。由于又购买了新的服务器,客户想把web主页和那个后台程序分开来,后台程序被部署到了新的服务器上。不过这个项目是我的同事小福同志开发的,也就由他来把程序分开部署,然后进行一些小改动。
"怎么最新消息取不到了,异步处理的url也已经添加上新服务器的地址(http://xxxx.com/.../news.ashx),奇怪了..."小福在一边抱怨,我看了看IE7下还出了个脚本错误"アクセスが拒否されました"的错误(环境是日文的,意思是访问被拒绝了)。网上查了下中文环境应该是"没有权限"吧。在Firefox和Chrome上是看不到任何脚本错误的,不过可以通过Firebug工具测出这个错误("Permission denied to call method XMLHttpRequest.open")。
同源策略
为什么会出这样的错误呢?这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释:
同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。
这就是引起为何取不到数据的原因了,那如何才能解决跨域的问题呢?没错,我们现在可以进入正题,来了解下什么是JSONP了。
JSON和JSONP
JSONP和JSON好像啊,他们之间有什么联系吗?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。
JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。--来源百度
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充), 我们先看下面的小例子然后再详细介绍。
跨域的简单原理
光看定义还不是很明白,那首先我们先来手动做个简单易懂的小测试。新建一个asp.net的web程序,添加sample.html网页和一个test.js文件,代码如下:
sample.html的代码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>test</title> 5 <script type="text/javascript" src="test.js"></script> 6 </head> 7 <body> 8 </body> 9 </html>
test.js的代码:
1 alert("success");
打开sample.html后会跳出"success”这样的这样的信息框,这似乎并不能说明什么, 跨域问题到底怎么解决呢?好,现在我们模拟下非同源的环境,刚才我们不是已经用Visual Studio新建了一个Web程序吗(这里我们叫A程序),现在我们再打开一个新的Visual Studio再新建一个Web程序(B程序),将我们的之前的test.js文件从A程序中移除然后拷贝到B程序中。两个程序都运行起来后,Visual Studio会启动内置服务器,假设A程序是localhost:20001,B程序是localhost:20002,这就模拟了一个非同源的环境了(虽然域名相同但端口号不同,所以是非同源的)。
OK,我们接下来应该改下sample.html里的代码,因为test.js文件在B程序上了,url也就变成了localhost:20002。
sample.html部分代码:
1 <script type="text/javascript" src="http://localhost:20002/test.js"></script>
请保持AB两个Web程序的运行状态,当你再次刷新localhost:20001/sample.html的时候,和原来一样跳出了"success"的对话框,是的,成功访问到了非同源的localhost:20002/test.js这个所谓的远程服务了。到了这一步,相信大家应该已经大概明白如何跨域访问了的原理了。
<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行。
JSONP的实现模式--CallBack
刚才的小例子讲解了跨域的原理,我们回上去再看看JSONP的定义说明中讲到了javascript callback的形式。那我们就来修改下代码,如何实现JSONP的javascript callback的形式。
程序A中sample的部分代码:
1 <script type="text/javascript"> 2 //回调函数 3 function callback(data) { 4 alert(data.message); 5 } 6 </script> 7 <script type="text/javascript" src="http://localhost:20002/test.js"></script>
程序B中test.js的代码:
1 //调用callback函数,并以json数据形式作为阐述传递,完成回调 2 callback({message:"success"});
这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。
将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义吧。
一般情况下,我们希望这个script标签能够动态的调用,而不是像上面因为固定在html里面所以没等页面显示就执行了,很不灵活。我们可以通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务了。
程序A中sample的部分代码:
1 <script type="text/javascript"> 2 function callback(data) { 3 alert(data.message); 4 } 5 //添加<script>标签的方法 6 function addScriptTag(src){ 7 var script = document.createElement('script'); 8 script.setAttribute("type","text/javascript"); 9 script.src = src; 10 document.body.appendChild(script); 11 } 12 13 window.onload = function(){ 14 addScriptTag("http://localhost:20002/test.js"); 15 } 16 </script>
程序B的test.js代码不变,我们再执行下程序,是不是和原来的一样呢。如果我们再想调用一个远程服务的话,只要添加addScriptTag方法,传入远程服务的src值就可以了。这里说明下为什么要将addScriptTag方法放入到window.onload的方法里,原因是addScriptTag方法中有句document.body.appendChild(script);,这个script标签是被添加到body里的,由于我们写的javascript代码是在head标签中,document.body还没有初始化完毕呢,所以我们要通过window.onload方法先初始化页面,这样才不会出错。
上面的例子是最简单的JSONP的实现模型,不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的,比如Google的ajax搜索接口:http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?
q=?这个问号是表示你要搜索的内容,最重要的是第二个callback=?这个是正如其名表示回调函数的名称,也就是将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调。有点罗嗦了,还是看看实现代码吧:
1 <script type="text/javascript"> 2 //添加<script>标签的方法 3 function addScriptTag(src){ 4 var script = document.createElement('script'); 5 script.setAttribute("type","text/javascript"); 6 script.src = src; 7 document.body.appendChild(script); 8 } 9 10 window.onload = function(){ 11 //搜索apple,将自定义的回调函数名result传入callback参数中 12 addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result"); 13 14 } 15 //自定义的回调函数result 16 function result(data) { 17 //我们就简单的获取apple搜索结果的第一条记录中url数据 18 alert(data.responseData.results[0].unescapedUrl); 19 } 20 </script>
像这样的JSONP服务还有很多(以下信息来自使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup):
Digg API:来自 Digg 的头条新闻:
http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?
Geonames API:邮编的位置信息:
http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
Flickr JSONP API:载入最新猫的图片:
http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
Yahoo Local Search API:在邮编为 10504 的地区搜索比萨:
http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?
接下来我们自己来创建一个简单的远程服务,实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示,这次我们在程序B上创建一个MyService.ashx文件。
程序B的MyService.ashx代码:
1 public class MyService : IHttpHandler 2 { 3 public void ProcessRequest(HttpContext context) 4 { 5 //获取回调函数名 6 string callback = context.Request.QueryString["callback"]; 7 //json数据 8 string json = "{\"name\":\"chopper\",\"sex\":\"man\"}"; 9 10 context.Response.ContentType = "application/json"; 11 //输出:回调函数名(json数据) 12 context.Response.Write(callback + "(" + json + ")"); 13 } 14 15 public bool IsReusable 16 { 17 get 18 { 19 return false; 20 } 21 } 22 }
程序A的sample代码中的调用:
1 <script type="text/javascript"> 2 function addScriptTag(src){ 3 var script = document.createElement('script'); 4 script.setAttribute("type","text/javascript"); 5 script.src = src; 6 document.body.appendChild(script); 7 } 8 9 window.onload = function(){ 10 //调用远程服务 11 addScriptTag("http://localhost:20002/MyService.ashx?callback=person"); 12 13 } 14 //回调函数person 15 function person(data) { 16 alert(data.name + " is a " + data.sex); 17 } 18 </script>
这就完成了一个最基本的JSONP服务调用了,是不是很简单,下面我们来了解下JQuery是如何调用JSONP的。
jQuery对JSONP的实现
jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法(详细可以参考http://api.jquery.com/jQuery.getJSON/)。那我们就来修改下程序A的代码,改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参,所以只写了getJSON(url,[callback])):
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){ alert(data.name + " is a a" + data.sex); }); </script>
结果是一样的,要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个问号是内部自动生成的一个回调函数名。这个函数名大家可以debug一下看看,比如jQuery17207481773362960666_1332575486681。
当然,加入说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?我们可以使用$.ajax方法来实现(参数较多,详细可以参考http://api.jquery.com/jQuery.ajax)。先来看看如何实现吧:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $.ajax({ url:"http://localhost:20002/MyService.ashx?callback=?", dataType:"jsonp", jsonpCallback:"person", success:function(data){ alert(data.name + " is a a" + data.sex); } }); </script>
没错,jsonpCallback就是可以指定我们自己的回调方法名person,远程服务接受callback参数的值就不再是自动生成的回调名,而是person。dataType是指定按照JSOPN方式访问远程服务。
利用jQuery可以很方便的实现JSONP来进行跨域访问。先暂时写到这吧。