淺談JSONP 的工作原理

  小編最近在工作中經常用到 jsonp 這個東西， 表示之前從來沒用過  最近稍微研究了下 當然很多內容來源於網上 收集整理 你懂的 ~~~

 

話說我們訪問一個頁面的時候 需要像另一個網站獲取部分信息， 這就是所謂的跨域請求才能完成的功能， 現實生活中有很多 比如引入外部js， img 等等， 說到發送請求， 在web2.0的時代 我們避免不了 ajax 請求了， 當然我們在

工作中用到 ajax 跨域請求 是必須遇到的，當然ajax 是不支持跨域請求的 說到這里我比較汗顏啊， 當然天無絕人之路，有個叫jsonp 的家伙 可以解決這個問題， 下面我們就來分析一下在這個東西是怎么工作的額 。

說道JSONP，很簡單，就是利用<script>標簽沒有跨域限制的“漏洞”（歷史遺跡啊）來達到與第三方通訊的目的。當需要通訊時，本站腳本創建一個<script>元素，地址指向第三方的API網址，形如： 
<script src="http://www.example.net/api?param1=1&param2=2"></script> 
並提供一個回調函數來接收數據（函數名可約定，或通過地址參數傳遞）。 
第三方產生的響應為json數據的包裝（故稱之為jsonp，即json padding），形如： 
callback({"name":"hax","gender":"Male"}) 
這樣瀏覽器會調用callback函數，並傳遞解析后json對象作為參數。本站腳本可在callback函數里處理所傳入的數據。 

可能多數人對它的知曉程度僅限於jQuery，jQuery提供了發送jsonp請求的方法。比如在使用$.ajax()方法的時候

     

   jQuery(document).ready(function(){ 
        $.ajax({
             type: "p",
             url: "http://hf-test.haoju.cn/esf/ajax/test",
             dataType: "jsonp",
             jsonp: "callback",
             success: function(json){
             //  alert(json);
             },
             error: function(){
                
             }
         });
     });

   jQuery將jsonp請求封裝成類似ajax請求的樣子，這樣能讓開發者在使用的時候更加方便，但是實際上，jsonp壓根不是通過XMLHttpRequest來實現的。不得不說你們被騙了

下面的代碼你就知道jsonp的如何實現的了

 

var callbackName = 'callback';

window[callbackName] = function (data) {
alert(data);
// 對返回的數據做后續處理
}

var script = document.createElement('script');
script.src = 'http://hf-test.haoju.cn/esf/ajax/test?callback='+callbackName;
document.body.appendChild(script);

 

這是前端部分的代碼，要想真正實現JSONP的功能，還需要后端的配合。針對上面這個例子，當前端請求這個script地址的時候，后端只要按以下內容響應就會有神奇的效果：

echo   callback('my is jsonp');

說道這兒，很多人也許就恍然大悟了。JSONP名字聽着高端，其實也不過如此嘛。

實際上，jQuery發JSONP請求時也是這么做的。