JSONP跨域请求原理及示例

今天药忘吃喽~ 2022-05-24 05:43 268阅读 0赞

# 一、JSON和JSONP？ #

JSON（JavaScript Object Notation）和JSONP（JSON with Padding）虽然只有一个字母的差别，但其实根本不是一回事：JSON是一种轻量级的数据传输格式，而JSONP是一种依靠开发人员的聪明才智创造出来的一种非官方跨域数据交互协议。打个比喻：JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。一个是描述信息的格式，一个是信息传递双方约定的方法。

# JSON实例： #

// 描述一个人 
    var person = {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    }
     
    // 获取这个人的信息 
    var personAge = person.Age;
     
    // 描述几个人 
    var members = [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]

那么JSONP具体是做什么的呢？

首先抛出浏览器同源策略这个概念，为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面，所谓同源就是协议、域名和端口号都相同，否则就是不同源的，可以参考以下实例：

<table style="border-spacing:0px;width:837px;margin:10px 0px 10px 10px;font-size:14px;font-weight:700;padding:0px;border:1px solid rgb(192,192,192);color:rgb(51,51,51);font-family:Tahoma, Arial, '宋体', sans-serif;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;"> 
   <th style="padding:2px 10px;margin:0px;border-color:rgb(187,187,187);color:rgb(0,0,0);background:rgb(222,231,236);border-collapse:collapse;">URL</th> 
   <th style="padding:2px 10px;margin:0px;border-color:rgb(187,187,187);color:rgb(0,0,0);background:rgb(222,231,236);border-collapse:collapse;">说明</th> 
   <th style="padding:2px 10px;margin:0px;border-color:rgb(187,187,187);color:rgb(0,0,0);background:rgb(222,231,236);border-collapse:collapse;">是否允许通信</th> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br style="margin:0px;padding:0px;">http://www.a.com/b.js</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">同一域名下</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">允许</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/lab/a.js<br style="margin:0px;padding:0px;">http://www.a.com/script/b.js</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">同一域名下不同文件夹</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">允许</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com:8000/a.js<br style="margin:0px;padding:0px;">http://www.a.com/b.js</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">同一域名，不同端口</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br style="margin:0px;padding:0px;">https://www.a.com/b.js</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">同一域名，不同协议</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br style="margin:0px;padding:0px;">http://70.32.92.74/b.js</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">域名和域名对应ip</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br style="margin:0px;padding:0px;">http://script.a.com/b.js</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">主域相同，子域不同</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">http://www.a.com/a.js<br style="margin:0px;padding:0px;">http://a.com/b.js</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">同一域名，不同二级域名（同上）</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">不允许（cookie这种情况下也不允许访问）</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">http://www.cnblogs.com/a.js<br style="margin:0px;padding:0px;">http://www.a.com/b.js</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">不同域名</td> 
   <td style="padding:2px 10px;margin:0px;font-weight:normal;border-color:rgb(187,187,187);border-collapse:collapse;">不允许</td> 
  </tr> 
 </tbody> 
</table>

**JSONP就是用来解决跨域请求问题的。**

# 二、JSONP请求原理 #

JSONP实现跨域请求的原理简单的说，就是动态创建`<script>`标签，然后利用`<script>`的src不受同源策略约束来跨域获取数据，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的；而数据就是传入回调函数中的 JSON 数据。

# 三、JSONP具体实现 #

首先来看一下JSONP的执行过程：

*  首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。
 *  然后以 javascript 语法的方式，生成一个function， function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
 *  最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
 *  客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据，作为参数， 传入到了客户端预先定义好的 callback 函数(如回调成功函数success: function (json))里。

接下来看一下使用XMLHttpRequest进行跨域请求会如何：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax</title>
    </head>
    <body>
        <div id="mydiv">
            <button id="btn">点击</button>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function() {
    
        var oBtn = document.getElementById('btn');
    
        oBtn.onclick = function() {
    
            var xhr = new XMLHttpRequest();
    
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                        alert( xhr.responseText );
                }
            };
    
            xhr.open('get', 'https://api.douban.com/v2/book/search?q=javascript&count=1', true);
            xhr.send(); 
        };
    
    };
    </script>
    </html>

![70][]

提示不允许访问的错误。

再看一下使用JSONP实现的跨域访问：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSONP实现跨域2</title>
    </head>
    <body>
        <div id="mydiv">
            <button id="btn">点击</button>
        </div>
    </body>
    <script type="text/javascript">
        function handleResponse(response){
                console.log(response);
        }
    </script>
    <script type="text/javascript">
        window.onload = function() {
    
        var oBtn = document.getElementById('btn');
    
        oBtn.onclick = function() {     
    
            var script = document.createElement("script");
            script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
            document.body.insertBefore(script, document.body.firstChild);   
        };
    };
    </script>
    </html>

在控制台，我们可以查看到返回的response数据格式为JSON对象格式的，具体取出哪些参数，可根据自己需要：

![70 1][]

通过JQuery封装jsonp实现跨域请求：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery实现JSONP</title>
    </head>
    <body>
        <div id="mydiv">
            <button id="btn">点击</button>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn").click(function(){
    
                $.ajax({
                    async : true,
                    url : "https://api.douban.com/v2/book/search",
                    type : "GET",
                    dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                    jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                    jsonpCallback: 'handleResponse', //设置回调函数名
                    data : {
                        q : "javascript", 
                        count : 1
                    }, 
                    success: function(response, status, xhr){
                        console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                        console.log(response);
                    }
                });
            });
        });
    </script>
    </html>

最后的结果与JavaScript通过动态添加<script>标签得到的结果是一样的。

![70 2][]

# 四、JSONP的优缺点 #

**优点：**

*  不像XMLHttpRequest对象实现的Ajax请求那样收到同源策略的限制；
 *  兼容性更好，在更古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
 *  在请求完毕后可以通过调用callback的方式回传结果；

缺点：

*  只支持get请求而不支持post等其他类型的HTTP请求（因为jsonp实际不是发了一个ajax请求，而是一个script里边src的属性，所以不能post）；
 *  只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题；

# 五、AJAX与JSONP的区别 #

ajax与jsonp在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，但本质上是不同的，ajax的核心是通过XMLHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

# 参考链接： #

*  https://blog.csdn.net/u011897301/article/details/52679486
 *  https://kb.cnblogs.com/page/139725/
 *  https://blog.csdn.net/u014607184/article/details/52027879
 *  https://blog.csdn.net/sylarmp/article/details/35602571

[70]: /images/20220524/61fe301db72a4838ba548f7d502938ab.png
[70 1]: /images/20220524/7da001c62d104c4eac6361d7b9e67347.png
[70 2]: /images/20220524/dbb5f6361bcc4a99a53ec94410042ab7.png