跨域：獲取不同源的資源時，就屬于跨域誉简。源：協(xié)議碉就、域名、端口闷串。默認端口是80瓮钥。三者任一不同就是跨域。
ajax 直接請求跨域的資源時烹吵，存在跨域無權限訪問的問題碉熄。而頁面上的引入 js 文件時則不受跨域影響，并且可以發(fā)現(xiàn)凡擁有 src 屬性的標簽肋拔，都擁有跨域的能力锈津，比如 <script>、<img> 凉蜂、<iframe> 琼梆。
而跨域請求 jsonp 正是利用了，<script> 標簽的跨域能力窿吩。
大致原理
首先在頁面中定義一個 handle 函數(shù)茎杂，然后通過引入的 <script> ，傳入?yún)?shù)并執(zhí)行 handle 函數(shù)纫雁，傳入的參數(shù)即頁面期望跨域請求拿到的數(shù)據(jù)煌往。
<!DOCTYPE html>
<html>
<head>
<script>
function handle (data) {
let res = JSON.parse(data);
document.getElementById('result').innerHtml = res.result;
}
</script>
<script src="http://www.xxx.com/test.js"></script>
</head>
<body>
<p>
result is <span id="result"></span>
</p>
</body>
</html>
test.js 文件內容如下：
// test.js
handle({"result": "riverjean"});
簡單的 jsonp 實現(xiàn)
動態(tài)地創(chuàng)建 script 標簽，實現(xiàn) jsonp 請求：
<!DOCTYPE html>
<html>
<head>
<script>
window.handle = function (data) {
let res = JSON.parse(data);
document.getElementById('result').innerHtml = res.result;
}
function jsonp (url, callback) {
var script = document.createElement('script');
var target = url + '先较？callback=' + callback携冤；
script.setAttribute(src, target);
document.getElementsByTagName('head')[0].appendChild(script);
}
jsonp('http://www.xxx.com/testjsonp', handle)
</script>
</head>
<body>
<p>
result is <span id="result"></span>
</p>
</body>
</html>
然后服務端會返回一段代碼給客戶端執(zhí)行：
handle({"result": "riverjean"});
