1.JSONP（JSON with Padding-填充json数据也就是常用的json跨域方式）：利用script标签，通过特定的src地址的调用，来执行一个客户端的js函数，在 服务器端生成相对的数据（json格式）并以参数的形式传递给这个客户端的js函数并执行这个函数，前提是需要服务器端的数据输出支持。
2.为什么使用JSONP：由于 JSON 只是一种含有简单括号结构的纯文本，因此许多通道都可以交换 JSON 消息。因为同源策略的限制，我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法，即通过使用 JSON 与 <script> 标记相结合的方法，从服务端直接返回可执行的JavaScript函数调用或者JavaScript对象。
3.谁在使用JSONP：dojo、JQuery、Youtube GData API 、Google Social Graph API 、Digg API 、GeoNames webservice、豆瓣API、Del.icio.us JSON API等。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var interface_url = ''; var id = ''; var school = ''; $.ajax({ type: "GET", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 url: interface_url, data: "school="+school+"&id="+id, success: function(msg){ if(msg.errmsg=='ok'){ //开始进行自己的逻辑处理 }else{ alert('信息获取失败！'); window.close(); } }, error: function(msg){ $('.act-comments').append('暂无信息...'); return false; } }); |
访问：interface_url?callback=success_jsonpCallback&school=school$id=id
跟平时使用的异步Ajax一样，只是里面添加了jsonp、jsonpCallback两个参数，这个会自动拼接到你访问的 interface_url中当做参数名和参数值。
服务器端要做一个判断：如果是正常的情况下返回普通的json字符串就可以了，但是判断链接中是否含有jsonp的callback，如果是php，那就if($_get[‘callback’])，如果判断通过，就要在普通的json格式字符外再加上一个对象名——即获取到的callback参数的值。看到下面的例子应该就明白了吧。
普通的json格式：
|
1 |
{"data":{"list":[{"game_id":"272","ctime":"2014-06-26 17:32:23","begin_time":"2014-06-28 17:33:15","end_time":"2015-02-14 17:33:15","members_count":"4"}]},"ret":0,"errcode":0,"errmsg":"ok"} |
返回的jsonp格式：
|
1 2 3 |
success_jsonpCallback( {"data":{"list":[{"game_id":"272","ctime":"2014-06-26 17:32:23","begin_time":"2014-06-28 17:33:15","end_time":"2015-02-14 17:33:15","members_count":"4"}]},"ret":0,"errcode":0,"errmsg":"ok"} ) |