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:"callback_fn", 10. success:function(data){ 11. alert(data + ":1"); 12. } 13. }); Java 代码（后端） 1. @RequestMapping(value=”testJsonp”) 2. @ResponseBody 3. public String testJsonp(String callback){ 4. return callback +”(‘test jsonp’);”; 5. } 这时候会调用callback_fn 方法，并且把返回值赋值给data 。这里看不出来跨域，那么我来演示一下跨域的 Demo 。 四、跨域 JSONP 。 其实上面的都支持跨域，但是为了更真实的演示，我找了一个sina的 JSONP 链接来演示。 JS代码 1. 2. function callback_fn(data){ 3. console.log("callback_fn"); 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 可以自己演练一下。