JSONP 教程

JSONP是一種使用模式,人們常常把JSONP和JSON混淆,他們雖然有關系,但是描述的不是一個事物,JSONP是JSON with Padding的簡稱。本篇會說明JSONP是一個什么?怎么是去使用。

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

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

具體講,是解決不同源,被瀏覽器監管Javascript的安全限制。

  • http://www.liohssf.cn調用http://www.liohssf.cn/json/是不會跨域的。
  • http://www.liohssf.cn 調用http://www.itboy.net/json/是跨域的,因為不同域名。
  • http://www.liohssf.cn調用https://icp.sojson.com/search1_baidu.com.html 是跨域的。因為是不同二級域名。
  • http://www.liohssf.cn:8080調用http://www.liohssf.cn:8081 是跨域的。因為是不同端口。
  • http://www.liohssf.cn調用http://www.liohssf.cn 是跨域的。因為是不同請求協議,http和https。
  • 188.188.188.20調用199.199.199.99 是跨域的。因為不同IP。
  • localhost調用127.0.0.1 也是跨域的。其實他也是不同域名。

JSONP for Java (一)

前端代碼,Javascript:

<script>
    //jsonp回調方法,一定要寫在jsonp請求前面
    function callback(txt){
        alert(txt);
    }
</script>
<script src ="/demo/testJsonp.shtml" type="text/javascript" ></script>

后端代碼,Java:

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

前端會alert彈出的內容“test jsonp”

JSONP for Java ,自定義callback函數(二)

前端代碼,Javascript:

<script>
    //jsonp回調方法,一定要寫在jsonp請求前面
    function testjson(txt){
        alert(txt);
    }
</script>
<script src ="/demo/testJsonp.shtml?callback=testjson" type="text/javascript" ></script>

后端代碼,Java:

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

JSONP for Java ,jQuery Ajax請求

前端代碼,Javascript:

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

}
</script>

這個接口您不要去嘗試使用,因為它的數據來自百度而已。

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",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(默認為:callback)
    jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名
    success : function(json){
        alert('success');
    },
    error:function(){
        alert('fail');
    }
});
</script>
支付掃碼

所有贊助/開支都講公開明細,用于網站維護:贊助名單查看

正在加載... ...

时时彩定千位