JSONP的出現(xiàn)是因為游覽器的同源策略，所謂同源是指所請求的主機，域名，協(xié)議，端口與當(dāng)前相同。同源策略限制了我們無法通過原生的XMLHttpRequest()對象獲取到j(luò)son數(shù)據(jù)。為了突破這個限制，開發(fā)者想出了一個解決方案，JSONP。

什么是JSONP

首先jsonp不是json數(shù)據(jù)，JSON是一種數(shù)據(jù)格式，而JSONP是一種數(shù)據(jù)調(diào)用方式，是解決JSON跨域獲取的解決方案。因此JSONP（JSON with Padding）其實是一個非官方的協(xié)議。

JSONP原理

由于同源策略，XMLHttpRequest()對象無法跨域，但<script> 、<img>、<link>等標(biāo)簽是可以跨域的。所以可以利用<script>標(biāo)簽來向服務(wù)器發(fā)送請求，服務(wù)器端接收到請求后返回一段js代碼，調(diào)用客戶端寫好的方法，并把JSON數(shù)據(jù)傳入該方法中，客戶端即可拿到數(shù)據(jù)。

原理：script請求php文件->php輸出JavaScript文本->文本代碼中包含JSON
數(shù)據(jù)->返回的代碼文本插入到客戶端中->客戶端交互返回的JavaScript文本。

原理知道了，再看下代碼是怎么實現(xiàn)的。
jQuery版：

 $.ajax({
    dataType:'jsonp',
    jsonp:'jsonp_callback',  //后端檢測請求所包含的值是否是jsonp_callback
    url:'http://www.baidu.com/getData.php',
    success:function(){
        //dosomthing
    }
});

JavaScript版：

function json(jsonObj) {
   //dosomthing
}
    
// 調(diào)用jsonHandle，傳入地址、追加參數(shù)，服務(wù)器端返回js代碼，
// 并調(diào)用客戶端寫好的json方法并把json數(shù)據(jù)傳入進(jìn)來。
function jsonHandle(url) {
    var script = document.createElement("script");
    script.setAttribute("src",url);
    document.body.appendChild(script);
    
    // 防止 script 標(biāo)簽冗余
    if(oScript) {
      document.body.removeChild(oScript);
    }
}

JSONP總結(jié)

本文已經(jīng)涉及到后端的代碼，但是對后端的代碼不是非常熟悉，故沒有貼出來。但要想掌握好JSONP跨域的知識或者更好的理解，了解后端（比如php）的一些知識是非常有必要的。

最后注意一點！雖然jQuery把JSONP內(nèi)置在了AJAX里，但是一定要清楚，jQuery的AJAX和JSONP是完全不一樣的，一定不能混淆！