新手學跨域之Jsonp

• jsonp
• iframe
  ● document.domain
  ● window.name
  ● location.hash
  ● navigator (IE6 bug)
  ● postMessage
• CORS
  ● XMLHttpRequest (modern browser)
  ● XDomainRequest (IE8+)
• 圖像Ping (略)
• flash (略)
• 代理/轉發
  ● http-server
  ● webpack-dev-server
  ● nginx

Jsonp我的的理解是後端向前端傳輸JSON格式數據一種方式，形如 callback({"name":"Joy","age":"22","gender":"male"})。
callback("a") 這種雖然包裹的數據不是JSON格式的，但應該也算吧？

Jsonp平時主要用在獲取一些信息，好比經過公開api獲取城市天氣啊啥的。剛學的時候一頭霧水，理解了就很簡單了。

---

一步一步理解

1.簡單的函數聲明，調用。這裏data爲形參，'a'爲實參

<script>
function callback(data) { console.log(data) }
callback('a'); // -> a
</script>

2.聲明和調用分佈在兩個script標籤裏，這裏就要注意順序了， 函數申明要在前

<script>
function callback(data) { console.log(data) }
</script>
<script>
callback('a');
</script>

3.函數調用在外部js文件

// foo.com的foo.html文件
<script>
function callback(data) { console.log(data) }
</script>
<script src="http://bar.com/call.js"></script>

// call.js文件
callback('a');

4.把這裏外部js文件call.js替換成用php輸出試試

// foo.html文件
<script>
function callback(data) { console.log(data) }
</script>
<script src="http://bar.com/call.php"></script>

//call.php
<?php
echo 'callback("a")';
?>

5.加上參數，參數是看後端須要的是什麼，若是不知道後端暴露的接口或者說是API，就無法交換數據

// foo.html文件
<script>
function callback(data) { console.log(data) }
</script>
<script src="http://bar.com/call.php?cb=callback&id=2"></script>

// call.php
<?php
$call = $_GET['cb'];
$id = $_GET['id'];
$arr = array('aaa', 'bbb', 'ccc');
echo $call.'("'. $arr[$id] .'")';
?>

上面就實現了跨域的數據交換，簡單來講就是前端聲明，後端調用。前端經過script把參數傳給後端，後端把參數對應的數據當實參並構形成一個函數調用。如圖

Jsonp也是這樣，只不過他返回的是JSON數據。須要注意的是函數名並不老是自定義的，不少狀況下都是後臺寫死的。

實例，經過Jsonp獲取QQ用戶頭像。
api: http://ptlogin2.qq.com/getface?uin=qq號，能夠看出他只要參數QQ號(還有其餘參數，不過不是必須的這裏就不寫了)，隨便寫個QQ號http://ptlogin2.qq.com/getfac...123456，瀏覽器打開，能夠看到輸出了pt.setHeader({"123456":"http:\/\/q1.qlogo.cn\/g?b=qq&k=xyOnRe5ML3Aw96iaaQ1hh6w&s=40&t=1370250302"});，他這裏的函數名已經寫死了，因此咱們的js代碼函數名要按他給的寫

var pt = {};
pt.setHeader = function (data) {
    // console.log(data);
    for (var i in data) {
        console.log(data[i]);
    }
}
// 動態建立script，這裏QQ號我就不寫動態的了
var s = document.createElement('script');
s.src = 'http://ptlogin2.qq.com/getface?uin=88888';
document.head.appendChild(s);

jQuery的Jsonp

jQuery的Jsonp是封裝在ajax方法下面的，但和ajax沒什麼關係，實現方法和上面差很少
例如獲取微博的搜索結果
api: http://s.weibo.com/ajax/jsonp..._cb=函數名&key=關鍵字

先用原生js實現

function getResult(o) {
    console.log(o.data);
}
var s = document.createElement('script');
s.src = 'http://s.weibo.com/ajax/jsonp/suggestion?_cb=getResult&key=a';
document.head.appendChild(s);

這裏的函數名getResult就能夠自定義

jQuery實現

$.ajax({
    url: 'http://s.weibo.com/ajax/jsonp/suggestion?key=a',
    dataType: 'jsonp',
    jsonp: '_cb',
    success: function (o.data) {
        console.log(o.data)
    }
});

能夠看到jQuery不用本身再聲明一個命名函數，而是直接在succss裏回調。經過請求能夠看到，jQuery默默的給_cb傳遞了一個jQuery2xxx..的參數，而succss回調就是這個jQuery2xxx...的命名函數。固然若是要自定義也能夠經過jsonpCallback設置，具體看jQuery的api