JsonP跨域请求原理

- 日理万妓 2021-12-14 13:25 428阅读 0赞

前端访问后台获取数据请求一般都会存在CROS同源问题。（即 端口 域名 协议 相同才可以访问）。

一般我们通过本地服务器代理访问，但是这样就会存在上述问题。 所以我们就需要不触发CROS同源问题就需要应用JSONP来处理。

什么是JOSNP呢？

①通过标签具有访问的意义。

②具有herf属性的标签。 （如：a标签、form表单等。）

③具有引用的标签。（script标签、img标签、src标签）

我们首先需要找个api端口 下面我们以天气JOSNP api举例：[https://api.asilu.com/weather/?city=广州][https_api.asilu.com_weather_city]

一定要抓取的API存在callback返回值

** 原生JS：**

1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title></title>
     7         <style type="text/css">
     8             * {
         
     9                 margin: 0;
    10                 padding: 0;
    11                 list-style: none;
    12             }
    13             
    14             input {
         
    15                 width: 600px;
    16                 height: 30px;
    17                 outline: none;
    18                 display: block;
    19                 margin: 10px auto;
    20                 border-radius: 3px;
    21                 border: 1px solid #ccc;
    22             }
    23             
    24             input:focus {
         
    25                 color: skyblue;
    26                 border-color: skyblue;
    27             }
    28             
    29             table {
         
    30                 width: 600px;
    31                 margin: 0 auto;
    32                 line-height: 30px;
    33                 border-collapse: collapse;
    34             }
    35         </style>
    36     </head>
    37 
    38     <body>
    39         <input type="text" placeholder="请输入你要查询的城市" list="search" />
    40         <table border="1">
    41             <thead>
    42                 <tr>
    43                     <th>日期</th>
    44                     <th>温度</th>
    45                     <th>天气</th>
    46                     <th>风向</th>
    47                 </tr>
    48             </thead>
    49             <tbody>
    50 
    51             </tbody>
    52         </table>
    53 
    54         <script type="text/javascript">
    55             //接口https://api.asilu.com/weather/?callback=fn&city=广州
    56             var ipt = document.getElementsByTagName("input")[0];
    57             var tbody = document.querySelector("tbody");
    58             //搜索
    59             ipt.onkeyup = function(ev) {
    60                 if(ev.keyCode === 13) {
    61                     //创建一个标签
    62                     var script = document.createElement("script");
    63                     //设置属性
    64                     script.src = "http://api.asilu.com/weather/?callback=fn&city" + ipt.value;
    65                     //插入到body
    66                     document.body.appendChild(script);
    67                     //清空
    68                     document.body.removeChild(script);
    69                 }
    70             }
    71 
    72             function fn(data) {
    73                 var str = "";
    74                 for(var i = 0; i < data.weather.length; i++) {
    75                     str += "<tr>\
    76                         <td>" + data.weather[i].date + "</td>\
    77                         <td>" + data.weather[i].temp + "</td>\
    78                         <td>" + data.weather[i].weather + "</td>\
    79                         <td>" + data.weather[i].wind + "</td>\
    80                     </tr>";
    81                 }
    82                 console.log(data);
    83                 tbody.innerHTML = str;
    84             }
    85         </script>
    86     </body>
    87 
    88 </html>

** $Jquery JsonP：**

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6     </head>
     7     <body>
     8         <button>请求</button>
     9         
    10         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    11         <script type="text/javascript">
    12             $("button").click(function(){
    13                 
    14                 //jquery的jsonp
    15                 $.ajax({
    16                     url: "https://www.baidu.com/sugrec?prod=pc&wd=哈哈&cb=fn",
    17                     dataType: "jsonp", //指定服务器返回的数据类型
    18                     jsonp: "cb",   //默认cb
    19                     jsonpCallback: "fn",//回调函数的名字
    20                     success: function(data){
    21                         console.log(data)
    22                     }
    23                 });
    24                 
    25                 
    26             })
    27             
    28             
    29         </script>
    30     </body>
    31 </html>

转载于:https://www.cnblogs.com/xuyx/p/10744512.html

[https_api.asilu.com_weather_city]: https://api.asilu.com/weather/?city=%E5%B9%BF%E5%B7%9E