JSONP是一種使用模式，人們常常把JSONP和JSON混淆，他們雖然有關(guān)系，但是描述的不是一個(gè)事物，JSONP是JSON with Padding的簡(jiǎn)稱。本篇會(huì)說(shuō)明JSONP是一個(gè)什么？怎么是去使用。

通俗講，JSONP 為解決跨域而誕生。是為了基于瀏覽器Web請(qǐng)求不通源之間的請(qǐng)求。

為了下面更好的講解JSONP，先解釋一下跨域。

具體講，是解決不同源，被瀏覽器監(jiān)管Javascript的安全限制。

• 在http://suancuo.cn調(diào)用http://suancuo.cn/json/是不會(huì)跨域的。
• 在http://suancuo.cn 調(diào)用http://www.itboy.net/json/是跨域的，因?yàn)椴煌蛎?
• 在http://suancuo.cn調(diào)用http://a.sojson.com/search1_baidu.com.html 是跨域的。因?yàn)槭遣煌?jí)域名。
• 在http://suancuo.cn:8080調(diào)用http://suancuo.cn:8081 是跨域的。因?yàn)槭遣煌丝凇?
• 在http://suancuo.cn調(diào)用http://suancuo.cn 是跨域的。因?yàn)槭遣煌?qǐng)求協(xié)議，http和https。
• 在188.188.188.20調(diào)用199.199.199.99 是跨域的。因?yàn)椴煌琁P。
• 在localhost調(diào)用127.0.0.1 也是跨域的。其實(shí)他也是不同域名。

JSONP for Java （一）

前端代碼，Javascript：

<script>
    //jsonp回調(diào)方法，一定要寫在jsonp請(qǐng)求前面
    function callback(txt){
        alert(txt);
    }
</script>
<script src ="/layui/demo-testJsonp.shtml" type="text/javascript" ></script>

后端代碼，Java：

/**
 * jsonp 測(cè)試
 * @return
 */
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(){
	return "callback('test jsonp');";
}

前端會(huì)alert彈出的內(nèi)容“test jsonp”。

JSONP for Java ，自定義callback函數(shù)（二）

前端代碼，Javascript：

<script>
    //jsonp回調(diào)方法，一定要寫在jsonp請(qǐng)求前面
    function testjson(txt){
        alert(txt);
    }
</script>
<script src ="/layui/demo-testJsonp.shtml?callback=testjson" type="text/javascript" ></script>

后端代碼，Java：

/**
 * jsonp 測(cè)試
 * @return
 */
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(String callback){
	return callback +"('test jsonp');";
}

JSONP for Java ，jQuery Ajax請(qǐng)求

前端代碼，Javascript：

<script>
var testjsonp = function(data){
    for(var i in data){
        alert( i +"：" + data[i]);
    };
}
var demoJSONP = function () {
    //nowIp() 為獲取當(dāng)前的IP，這個(gè)函數(shù)是我自己的。
   $.getScript("https://open.onebox.so.com/dataApi?type=ip&src=onebox&tpl=0&num=1&query=ip&url=ip&ip="+nowIp()+"&callback=testjsonp");

}
</script>

運(yùn)行一下試試

這個(gè)接口您不要去嘗試使用，因?yàn)樗臄?shù)據(jù)來(lái)自百度而已。

JSONP for PHP ，jQuery

PHP代碼：

<?php
    $data = ".......";
    $callback = $_GET['callback'];
    echo $callback.'('.json_encode($data).')';
    exit;
?>

前端代碼，Javascript：

<script>
$.ajax({
    type : "post",
    url : "ajax.php",
    dataType : "jsonp",
    jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(默認(rèn)為:callback)
    jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名
    success : function(json){
        alert('success');
    },
    error:function(){
        alert('fail');
    }
});
</script>