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

时间 2019-11-10

标签深刻 jsonp 解决 ajax 问题栏目 JSON 繁體版

原文原文链接

同源策略

　　为何会出这样的错误呢？这是由于全部支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释：javascript

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

　　这就是引发为什么取不到数据的缘由了，那如何才能解决跨域的问题呢？没错，咱们如今能够进入正题，来了解下什么是JSONP了。java

JSON和JSONP

　　JSONP和JSON好像啊，他们之间有什么联系吗？jquery

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON你们应该是很了解了吧，不是很清楚的朋友能够去json.org上了解下，简单易懂。web

　　JSONP是JSON with Padding的略称。它是一个非官方的协议，它容许在服务器端集成Script tags返回至客户端，经过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度ajax

　　JSONP就像是JSON+Padding同样(Padding这里咱们理解为填充)，咱们先看下面的小例子而后再详细介绍。json

跨域的简单原理

　　光看定义还不是很明白，那首先咱们先来手动作个简单易懂的小测试。新建一个asp.net的web程序，添加sample.html网页和一个test.js文件，代码以下：api

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