淺談JSONP 的本質工做原理

json 是一種數據格式
jsonp 是一種數據調用的方式。

你能夠簡單的理解爲 帶callback的json就是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({
             url: "http://域名/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');

實際上，jQuery發JSONP請求時也是這麼作的。

下面是Jason跟JasonP的項目實戰鏈接：

http://www.qixing318.com/article/simply-describe-the-difference-between-json-with-json-as-well-as-the-actual-combat.html