标签:
Jsonp和Json有根本上的不同:前者是一种跨域解决方案,后者是一种轻量级的数据交换格式。
可以把两者都理解为字符串,如下:
//Jsonp callback({ "name" : "张三", "age" : 18, "addr" : "北京市朝阳区" }) //Json { "name" : "张三", "age" : 18, "addr" : "北京市朝阳区" }
这里的callback就是一个函数,参数是{..},是一个要放到服务端执行的函数,它的主体在客户端,看代码之前先简单讲下JavaScript:
<script>
function callback(obj) {
alert(obj.name);//弹出张三
}
</script>
<script src="a.js"></script> //a.js代码如下 <!-- callback({ "name" : "张三", "age" : 18, "addr" : "北京市朝阳区" }) -->
网页顺利弹出‘张三‘。如果把a.js改下换成a.txt会怎样呢?虽然有点奇葩,但是我们先试下吧:
<script> function callback(obj) { alert(obj.name);//弹出张三 } </script> <script src="a.txt"></script> <!-- callback({ "name" : "张三", "age" : 18, "addr" : "北京市朝阳区" }) -->
事实上也是能弹出的,因为txt也好、js也好其实都是一种文本格式;这很好理解,因为我们初学html的时候也用过记事本编写过简单的html页面。
我们把a.js改造成a.html再试下,结果正常弹出!
总结一下:如果B站点下的页面要访问A站点下的a.html,我们是不是可以这样:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> function callback(obj) { alert(obj.name); }; </script> <script src="http://localhost:8080/Private/data/a.html"></script> </body> </html>
当然可以了,不过script外链非js文件太过奇葩了,所以我们要用到ajax,用ajax的好处是我们不必再客户端定义callback函数了。
ajax版的a.html如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp跨域</title> </head> <body> <script src="../../static/JavaScript/jquery-1.8.3.js"></script> <script> $.ajax({ dataType : ‘jsonp‘, async : true, url : ‘http://192.168.1.162:8080/Private/data/a.html?t=‘ + new Date().getTime(), // url : ‘http://192.168.1.162:8080/Private/data/a.txt?t=‘ + new Date().getTime(), //这样也行 // url : ‘http://192.168.1.162:8080/Private/data/a.js?t=‘ + new Date().getTime(), //这样也行 jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"callback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,这个可以跟后端配合定义下 success : function(data) { alert(data.name); }, error : function() { } }); </script> </body> </html>
也是会弹出‘张三‘的!
使用ajax可以让我们不必再客户端定义callback函数了。
我理解的比较浅显,就这吧。反正我是懂了。。。
标签:
原文地址:http://www.cnblogs.com/tianpw/p/5019703.html