JSONP 的工作原理，JSONP Demo讲解

JSON 2016-08-22 16:14:06 52694

JSONP 是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP 和 JSON 的区别： JSON 是一种传输格式，而 JSONP 呢是一种数据的获取方式。其实他们没什么相关性，有的人说带callback 的 JSON 传输就是 JSONP ，下面我会证明这是错误的说法。 JSONP 可以跨域，记住这一点就可以了。下面开始 Demo 演示。

一、简单JSONP演示

JS 代码：

<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 一个messag “test jsonp” ，表示成功了，这里注意的一点就是，回调方法要在调用之前，要不然会出现说callback 方法是未定义的错误。

二、自定义callback函数

js方法：

<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');";
}

很easy吧。

三、 Ajax JSONP Demo。

JS代码：

<script>
	function callback_fn(data){
		alert(data + ":2");
	}
	$.ajax({
		type:"get",
		dataType:"jsonp",
		url:"/demo/testJsonp.shtml",
		jsonpCallback:"callback_fn",
		success:function(data){
			alert(data + ":1");
		}
	});
</script>

Java 代码（后端）

@RequestMapping(value="testJsonp")
@ResponseBody
public String testJsonp(String callback){
	return callback +"('test jsonp');";
}

这时候会调用callback_fn 方法，并且把返回值赋值给data 。这里看不出来跨域，那么我来演示一下跨域的 Demo 。

四、跨域 JSONP 。

其实上面的都支持跨域，但是为了更真实的演示，我找了一个sina的 JSONP 链接来演示。

JS代码

<script>
	function callback_fn(data){
		console.log("callback_fn");
		console.log(data);
	}
	$.ajax({
		type:"get",
		dataType:"jsonp",
		url:"http://sax.sina.com.cn/newimpress?adunitid=PDPS000000047325&rotate_count=36",
		jsonpCallback:"callback_fn",
		success:function(data){
			console.log("success");
			console.log(data);
		}
	});
</script>

看控制台输出的内容。