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})
不出意外的話可以看到打印出的“小明”了。