解決跨域問題僻他，就一定會說JSONP方法兽狭。JSONP到底是怎么實現(xiàn)的，一起看一下垃帅。
先制造一個跨域的情況延届，我是用Hbuilder新建一個html文件，然后點擊上方的瀏覽器logo就可以在瀏覽器中打開了贸诚，Hbuilder回自己啟動一個服務方庭。然后要創(chuàng)建一個接口，我用的是php酱固。我的電腦上有phpStudy械念，會有一個php的繼承環(huán)境，只要啟動phpStudy它也會啟動一個服務运悲。這兩個服務的地址是不一樣的龄减，所以就會出現(xiàn)跨域的情況。
我的html頁面如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="http://192.168.0.73/php/test.php?callback=jsonp"></script>
<script>
function jsonp(data){
console.log(data)
}
</script>
</body>
</html>
就是用script標簽的src去請求一個接口(http://192.168.0.73/php/test.php)班眯。然后在接口的后面的加上一個參數(shù)callBack=jsonp希停。所以拼接后就如上面的代碼。
然后是php的代碼
<?php
$callBack = $_GET['callback']; // 1.獲取參數(shù)
$json = "{\"name\":\"zhangsan\"}"; // 2.定義一個json
echo $callBack . "(" . $json . ")"; // 3.返回數(shù)據(jù)
php的邏輯是這樣的：
- 獲取我們請求的參數(shù)callback署隘，因為
callback=jsonp宠能， 所以參數(shù)值是jsonp。 - 定義一個json數(shù)據(jù)磁餐。
- 拼接第一步獲得的參數(shù)值和第二部不定義的json违崇，其實這時候就相當于拼接成了
jsonp({"name":"zhangsan"})。然后在用echo將它返回給客戶端诊霹。
客戶端拿到請求結果后邏輯是這樣的：
- script標簽拿到結果
jsonp({"name":"zhangsan"})羞延。 - 因為是script標簽，所以會把請求拿到的東西看成一個js文件脾还。
- 既然是js文件伴箩，那么拿到后肯定會執(zhí)行。
- 我們的結果是
jsonp({"name":"zhangsan"})鄙漏， 這不就是一個函數(shù)名為jsonp的函數(shù)調(diào)用嗎赛蔫，還傳了參數(shù)。 - 既然是函數(shù)執(zhí)行泥张，就回去作用域?qū)ふ疫@個函數(shù)呵恢，結果就是我們預先定義好的函數(shù)jsonp啊。
- jsonp函數(shù)執(zhí)行了媚创，我們就可以在這個函數(shù)中處理我們的數(shù)據(jù)了渗钉。
所以總結來說，JSONP方法跨域就是相當于script標簽去請求一個js文件，請求完成執(zhí)行js鳄橘。而這個js文件的內(nèi)容就是后臺拼接的一個函數(shù)調(diào)用語句jsonp({"name":"zhangsan"})声离，并且函數(shù)的參數(shù)是直接將值放在函數(shù)括號里的(這里是一個json)。這里的函數(shù)就是我們之前定義好的一個全局函數(shù)瘫怜。
