jsonp原理

（转http://www.sojson.com/blog/121.html）
JSONP 是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP 和 JSON 的区别： JSON 是一种传输格式，而 JSONP 呢是一种数据的获取方式。其实他们没什么相关性，有的人说带callback的 JSON 传输就是 JSONP ，下面我会证明这是错误的说法。 JSONP 可以跨域，记住这一点就可以了。下面开始 Demo 演示。
一、简单JSONP演示
JS 代码：
1.
2. //jsonp回调方法，一定要写在jsonp请求前面
3. function callback(txt){
4. alert(txt);
5. }

7.
Java 代码（后端）：
1. /**
2. * jsonp 测试
3. * @return
4. */
5. @RequestMapping(value=”testJsonp”,method=RequestMethod.GET)
6. @ResponseBody
7. public String testJsonp(){
8. return “callback(‘test jsonp’);”;（）
9. }
此时，当页面加载的时候，会alert 一个messag “test jsonp” ，表示成功了，这里注意的一点就是，回调方法要在调用之前，要不然会出现说callback 方法是未定义的错误。
二、自定义callback函数
js方法：
1.
2. //jsonp回调方法，一定要写在jsonp请求前面
3. function testjson(txt){
4. alert(txt);
5. }

7.
Java代码（后端）
1. /**
2. * jsonp 测试
3. * @return
4. */
5. @RequestMapping(value=”testJsonp”,method=RequestMethod.GET)
6. @ResponseBody
7. public String testJsonp(String callback){
8. return callback +”(‘test jsonp’);”;
9. }
很easy吧。
三、 Ajax JSONP Demo。
JS代码：
1.
2. function callback_fn(data){
3. alert(data + ":2");
4. }
5. .ajax(6.type:"get",7.dataType:"jsonp",8.url:"/demo/testJsonp.shtml",9.jsonpCallback:"callbackfn",10.success:function(data)11.alert(data+":1");12.13.);Java代码（后端）1.@RequestMapping(value=”testJsonp”)[e-mail](Stringcallback)4.returncallback+”(‘testjsonp′);”;5.这时候会调用callbackfn方法，并且把返回值赋值给data。这里看不出来跨域，那么我来演示一下跨域的Demo。四、跨域JSONP。其实上面的都支持跨域，但是为了更真实的演示，我找了一个sina的JSONP链接来演示。JS代码1.2.functioncallbackfn(data)3.console.log("callbackfn");4.console.log(data);5.6..ajax({
7. type:"get",
8. dataType:"jsonp",
9. url:"http://sax.sina.com.cn/newimpress?adunitid=PDPS000000047325&rotate_count=36",
10. jsonpCallback:"callback_fn",
11. success:function(data){
12. console.log("success");
13. console.log(data);
14. }
15. });

看控制台输出的内容。
[图片]
已经OK了，这些 JSONP 的 Demo 可以自己演练一下。