文档章节

深入浅出JSONP--解决ajax跨域问题

ForingY
 ForingY
发布于 2015/11/25 10:04
字数 2448
阅读 54
收藏 0

同源策略

  为什么会出这样的错误呢?这是因为所有支持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的代码:

  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代码:

       MyService : IHttpHandler      {            ProcessRequest(HttpContext context)          {                            callback = context.Request.QueryString[];                            json = ;   
             context.Response.ContentType = ; 
                          context.Response.Write(callback +  + json + );
         } 
  
           IsReusable 
         { 
              
             { 
                  ; 
             } 
         } 
     }

程序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     //回调函数person15     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来进行跨域访问。先暂时写到这吧。

转自:http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html


© 著作权归作者所有

ForingY
粉丝 23
博文 272
码字总数 156129
作品 0
杭州
程序员
私信 提问
深入浅出篇-网络-ajax的诞生&跨域详解

网络-深入浅出篇文章: 初识网络 Http协议和Ip地址 域名与DNS解析 Jsonp原理 一. ajax ajax的诞生: 发送网络请求的方式: 在浏览器中直接输入网址 (其无法用代码控制) 在控制台输入locatio...

Honer
2019/10/24
0
0
看小白如何解决ajax跨域问题

由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题。本篇将讲述一个小白从遇到跨...

六只
2012/06/29
1.5W
3
juery的跨域请求2

时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解...

无信不立
2016/05/24
0
0
ajax跨域问题我只学一种解决方案

Ajax跨域问题的jsonp解决方案 在前端我们经常会使用Ajax来向服务器发送请求和接收服务器响应回来的数据,一般来说在同一个服务器的数据来往是没有什么问题的,但是有时使用Ajax请求数据并不局限...

JH30K
2019/10/05
0
0
前端筑基篇(一)->ajax跨域原理以及解决方案

说明 本文内容较老,而且已经不再更新,最新更新请移步 http://www.jianshu.com/p/82b82d5dd1ea 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 ...

撒网要见鱼
2016/09/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

检查字符串是否不为空且不为空

如何检查字符串是否不为null也不为空? public void doStuff(String str){ if (str != null && str != "**here I want to check the 'str' is empty or not**") { /* handl......

javail
4分钟前
7
0
No module named 'apscheduler.schedulers'

关于 ModuleNotFoundError: No module named 'apscheduler.schedulers' 和 ModuleNotFoundError: No module named 'apscheduler' 的问题,网上有不少解决。大多数都是因为,文件起名与模块名......

開援带碼
25分钟前
27
0
如何查看Android的系统版本?

有谁知道我怎么能检查系统版本(例如1.0 , 2.2 ,等)编程? #1楼 我无法对答案发表评论,但是Kaushik的答案存在一个严重错误:SDK_INT与系统版本不同,但实际上是指API级别。 if(Build.VER...

技术盛宴
51分钟前
35
0
引入AI变量,精准农业正在加速豹变?

  不久前,“江苏省脱贫率达 99.99%,尚未脱贫人数仅剩 6 户、17 人”这样一则新闻刷屏。“把这 17 个人迁出,江苏就全省脱贫”、“最后这 6 户人家拖了后腿”,在网民们的调侃和质疑声背后...

水果黄瓜
54分钟前
41
0
Elasticsearch系列---结构化搜索

概要 结构化搜索针对日期、时间、数字等结构化数据的搜索,它们有自己的格式,我们可以对它们进行范围,比较大小等逻辑操作,这些逻辑操作得到的结果非黑即白,要么符合条件在结果集里,要么...

清茶豆奶
今天
69
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部