JSONP 教程

JSONP 教程

JSONP是一种使用模式，人们常常把JSONP和JSON混淆，他们虽然有关系，但是描述的不是一个事物，JSONP是JSON with Padding的简称。本篇会说明JSONP是一个什么？怎么是去使用。

通俗讲，JSONP 为解决跨域而诞生。是为了基于浏览器Web请求不通源之间的请求。

为了下面更好的讲解JSONP，先解释一下跨域。

具体讲，是解决不同源，被浏览器监管Javascript的安全限制。

在https://www.sojson.com调用https://www.sojson.com/json/是不会跨域的。
在https://www.sojson.com 调用http://www.itboy.net/json/是跨域的，因为不同域名。
在https://www.sojson.com调用http://a.sojson.com/search1_baidu.com.html 是跨域的。因为是不同二级域名。
在https://www.sojson.com:8080调用https://www.sojson.com:8081 是跨域的。因为是不同端口。
在https://www.sojson.com调用http://www.sojson.com 是跨域的。因为是不同请求协议，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 ="/layui/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 ="/layui/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>