JSONP到底是個什麼東西

這個世界上有好多事對你來說是模稜兩可，可能是這樣或者那樣的原因你沒有動力去了解它，以至於它久久縈繞在你的心頭，JSONP就是這麼一件事。今天終於有動力想了解一番，經過一番熱火朝天的谷歌百度後，發現JSONP這東西說起來簡單的很啊，我自己用一句話總結就是：使用script標籤進行跨域訪問 。由於跨域請求返回的資料和JSON相關，故而得名JSONP。

眾所周知，javascript有同源策略的限制，是不允許跨域訪問的，比如位於a.xxx.com下面的js程式碼，

function print_log(json) {
console.log(json.name);
}

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://b.xxx.com/test?callback=print_log', true);

假設/test?callback=print_log介面的返回值為：

print_log({"name": "小明", "id" : 1823, "rank": 7})

/test介面返回了一段js程式碼，這段程式碼如果正常執行的話將會打印出“小明”，但是由於同源策略，位於a.xxx.com上的js想請求b.xxx.com上的test介面是無法通過的，這就是常說的“js無法跨域”。有沒有辦法實現跨域呢，大神們想了各種各樣的辦法，其中之一就是JSONP，具體來說就是雖說js不能跨域，但是有個例外，那就是script標籤可以，利用script標籤的跨域特性訪問其他域名上的介面，動態生成一段js程式碼，這樣就繞過了同源策略，實現了跨域訪問。具體程式碼如下，

var script = document.createElement('script');
script.setAttribute('src', 'http://b.xxx.com/test?callback=print_log');

這實際上相當於執行下面的程式碼，

function print_log(json) {
console.log(json.name);
}

print_log({"name": "小明", "id" : 1823, "rank": 7})

不出意外的話可以看到打印出的“小明”了。