跨域问题jsonp

Posted 2020-09-28 我叫王自信

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨域问题jsonp相关的知识，希望对你有一定的参考价值。

不得不说的同源政策：

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

　这就是引起为何取不到数据的原因了，那如何才能解决跨域的问题呢？没错，我们现在可以进入正题，来了解下什么是JSONP了。

1 <!DOCTYPE html5>
2 <html>
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");

我们回上去再看看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数据填充进回调函数。

　　一般情况下，我们希望这个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服务调用了，是不是很简单，下面我们来了解下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方式访问远程服务。

以上是关于跨域问题jsonp的主要内容，如果未能解决你的问题，请参考以下文章