JSONP

定義(先後端交互只能是字符）

利用src標籤，引入咱們即將要跨域的資源，利用回調函數來拿到本來跨域的數據

1.

在jsonp1.txt中

1 <script src="http://localhost/1903/jsonp/data/myjsonp1.txt"></script>
2 <script>
3     //jsonp 經過scr標籤引入資源
4      fn()
5 </script>

在json1.html中

1 <script src="http://127.0.0.1/1903/jsonp/data/jsonp1.txt"></script>
2 <script>
3     // jsonp是經過script標籤引入資源
4     
5     fn()//hello
6 </script>

2.

在jsonp2.html中

1 <?php
2 
3     // echo "console.log('hello')";

 //因爲echo後面輸出的是字符，因此須要加 ''

4  echo "function fn(){ 5  console.log('HELLO') 6  }"; 7 8 ?>

 

在json2.html中

1 <script src="http://127.0.0.1/1903/jsonp/data/jsonp2.php"></script>
2 <script>
3     // jsonp是經過script標籤引入資源
4     fn()
5 
6     // 發現： 7 // 只要是被script標籤引入的文件，都會先解析，解析以後，將輸出的字符，按照js代碼執行，--->在HTML中寫函數，在PHP中執行
8 </script>

3.

在js中定義函數，在php中執行函數。在php執行函數傳參-->在HTML中的函數中接收-->php文件經過script的src引入進來，把php中echo的出來的東西當作js代碼來執行，執行函數時候就把PHP中的數據帶了過來。這時候實現跨域（HTML的地址和src的地址不一致）

 

在jsonp3.html中

 1 <script>
 2     // jsonp是經過script標籤引入資源
 3     
 4     // 發現：
 5     // 只要是被script標籤引入的文件，都會先解析，解析以後，將輸出的字符，按照js代碼執行
 6     function fn(res){
 7         console.log(res)
 8     }
 9 </script>
10 <script src="http://127.0.0.1/1903/jsonp/data/jsonp3.php"></script>

 1 <?php
 2         $data="hello";
 3         //echo "fn(123)";
 4 
 5         echo "fn(".$data")";// hello is not defined
 6         //等同於 "fn(hello)" //hello是字符，外面的""是PHP，裏面的是js的
 7         
 8         echo "fn('".$data."')";        //hello
 9         
10     ?>

4.

 1 <script>
 2     var oaaa=document.getElementById("aaa")
 3     var obbb=document.getElementById("bbb")
 4     var obtn=document.getElementById("btn")
 5     obtn.onclick=function(){
 6         var url="http://127.0.0.1/1903/jsonp/data/jsonp4.php";
 7         var oa=oaaa.value;
 8         var ob=obbb.value;
 9         jsonp(url,function(res){
10             console.log(res)
11         },{
12             user:oa,
13             pass:ob,
14         });
15     }
16     function jsonp(url,callback,data){
17         data=data?data:{};//data爲參數，不須要聲明
18         let str="";
19         for( let i in data){
20             str=str+i+"="+data[i]+"&";
21         }
22         url=url+"?"+str.slice(0,str.length-1);
23 
24         //1.script標籤
25         var script=document.createElement("script");
26         script.src=url;
27         document.body.appendChild(script);
28         //2.函數
29         window.fn=function (res){
30             callback(res);//hello php,這是接收到的數據:---
31         }
32     }
33 </script>

 1 <?php
 2 
 3     $u = @$_GET["user"];
 4     $p = @$_GET["pass"];
 5 
 6     $data = "hello php,這是接收到的數據:".$u."---".$p;
 7 
 8     echo "fn('". $data ."')";//字符串拼接
 9 
10 ?>

5.

 1 <script>
 2     var oaaa=document.getElementById("aaa")
 3     var obbb=document.getElementById("bbb")
 4     var obtn=document.getElementById("btn")
 5     obtn.onclick=function(){
 6         var url="http://127.0.0.1/1903/jsonp/data/jsonp5.php";
 7         var oa=oaaa.value;
 8         var ob=obbb.value;
 9         jsonp(url,function(res){
10             console.log(res)
11         },{
12             user:oa,
13             pass:ob,
14             // "cb表示後端規定的函數名所在的字段名"
15             cb:"asmjdgajksd",
16             // cloumnName表示前端的函數如何正確找到函數名；cloumnName和後臺不要緊，本身定義
17             cloumnName:"cb"
18         });
19     
20     }
21     function jsonp(url,callback,data){
22         data=data?data:{};//data爲參數，不須要聲明
23         let str="";
24         for( let i in data){
25             str=str+i+"="+data[i]+"&";
26         }
27         url=url+"?"+str.slice(0,str.length-1);
28 
29         //1.script標籤
30         var script=document.createElement("script");
31         script.src=url;
32         document.body.appendChild(script);
33         //2.函數
34       　　 //data.cloumnName找到的是"fnName"，可是這個單子自己不是咱們要找的，
　　　　　　　　上面的對//應的屬性"cb"纔是咱們須要的。因此須要再解析一層data[data.cloumnName]
35       　　 // 最後cloumnName與後臺徹底不要緊，
36       　　 // window[data["callback"]] = function(res){
37         　 // window["asmjdgajksd"] = function(res){
38           // window.asmjdgajksd = function(res){
39         window[data[data.cloumnName]]=function (res){
40             callback(res);//hello php,這是接收到的數據:---
41         }
42         
43     }
44 </script>

 1 <?php
 2 
 3     $u = @$_GET["user"];
 4     $p = @$_GET["pass"];
 5     $fnName = @$_GET["cb"];
 6 
 7     $data = "hello php,這是接收到的數據:".$u."---".$p;
 8 
 9 
10     echo $fnName."('". $data ."')";
11 
12 ?>