jsonp详解

jsonp详解

取不到数据!

  上周客户新买了服务器,原本在旧的服务器上放着客户的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.proxy.ustclug.org/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.proxy.ustclug.org/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方式访问远程服务。

 

来源:http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

转载于:https://www.cnblogs.com/yuwensong/archive/2013/05/28/3103064.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/110116.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 【C语言】4种方法求最大公约数和最小公倍数及比较它们的运行时间

    【C语言】4种方法求最大公约数和最小公倍数及比较它们的运行时间一、题目要求利用辗转相除法、穷举法、更相减损术、Stein算法求出两个数的最大公约数或者/和最小公倍数。最大公约数:指两个或多个整数共有约数中最大的一个。例如:【12和24】12的约数有:1、2、3、4、6、12;24的约数有:1、2、3、4、6、8、12、24。它们共有的约数为:1、2、3、4、6、12,则12和24的最大公约数为12…

  • dsp定时器初始化程序C语言,C语言定时器实验

    dsp定时器初始化程序C语言,C语言定时器实验C语言定时器实验实验三C语言定时器实验一、实验目的1.进一步熟悉DSP的中断机制2.在掌握中断服务程序编写的基础上进一步熟悉定时器的运用3.进一步掌握如何编写DSP中断服务子程序二、实验设备1.具有USB接口的PC机一台2.USB仿真器一台3.ARM/DSP/FPGA实验箱一台三、实验原理本实验是在我们基本上掌握DSP中断机制的基础上,进一步学习如何在DSP内部实现定时器的正确操作以及定时器中…

  • 将pip源更换到国内镜像「建议收藏」

    将pip源更换到国内镜像「建议收藏」将pip源更换到国内镜像用pip管理工具安装库文件时,默认使用国外的源文件,因此在国内的下载速度会比较慢,可能只有50KB/s。幸好,国内的一些顶级科研机构已经给我们准备好了各种镜像,下载速度可达2MB/s。其中,比较常用的国内镜像包括:(1)阿里云http://mirrors.aliyun.com/pypi/simple/(2)豆瓣http://pypi.douban.com/simp…

  • matlab的fread函数的用法_matlab fread 大小端

    matlab的fread函数的用法_matlab fread 大小端fread函数常见用法:1、A=fread(fileID,sizeA,precision,skip,machinefmt) 2、A=fread(fileID)3、fread(fileID,sizeA)4、A=fread(fileID,sizeA,precision)5、A=fread(fileID,sizeA,precision,skip)6、A=fread(fileID,sizeA,p

  • TIFF文件切割_tif文件分割

    TIFF文件切割_tif文件分割TIFF文件由于可以存储多种形式的数据类型,也可以存储大量的数据,故其体积比较大,如果我们想截取其中的一部分图片数据,如下图:截取如下图部分:保存之后同样还是一个TIFF图片。1.自己定义了一个类实现头文件:#pragmaonce#include#include”tiflib.h”#include#include

    2022年10月30日
  • 计算机图形学光栅化实验_光栅化算法

    计算机图形学光栅化实验_光栅化算法光栅化光栅化的任务将在投影变换中得到的正则立方体显示在屏幕上屏幕screen像素(pixels)的集合。屏幕的大小使用分辨率(resolution)来刻画。经典的光栅显示设备像素pixel像素是一个具有统一颜色的小立方体颜色由三部分组成red,green,blue屏幕空间​ 屏幕被划分成一个个正方体,称为像素。像素使用坐标(x,y)(x,y)(x,y)来表示,其中心是(x+0.5,y+0.5)(x+0.5,y+0.5)(x+0.5,y+0.5),

    2022年10月21日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号