json 和 jsonp

用JSON来传数据,靠JSONP来跨域

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。一个是描述信息的格式,一个是信息传递双方约定的方法。

JSONP有什么用?

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

如何使用JSONP?

下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。

 1 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
 2 <script type="text/javascript">  
 3     function jsonpCallback(result) {  
 4         //alert(result);  
 5         for(var i in result) {  
 6             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
 7         }  
 8     }  
 9     var JSONP=document.createElement("script");  
10     JSONP.type="text/javascript";  
11     JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  
12     document.getElementsByTagName("head")[0].appendChild(JSONP);  
13 </script>  

或者

 1 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
 2 <script type="text/javascript">  
 3     function jsonpCallback(result) {  
 4         alert(result.a);  
 5         alert(result.b);  
 6         alert(result.c);  
 7         for(var i in result) {  
 8             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
 9         }  
10     }  
11 </script>  
12 <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>  

JavaScript的链接,必须在function的下面。

 

posted @ 2017-02-10 15:01  米修^~^  阅读(137)  评论(0编辑  收藏  举报