JsonP跨域请求原理

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

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

什么是JOSNP呢？

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

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

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

我们首先需要找个api端口下面我们以天气JOSNP api举例：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>

JsonP跨域请求原理

猜你喜欢