用JSON来传数据,靠JSONP来跨域javascript
JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差异,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。咱们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给本身同志时使用的接头方式。一个是描述信息的格式,一个是信息传递双方约定的方法。php
JSONP有什么用?html
因为同源策略的限制,XmlHttpRequest只容许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,能够经过script标签实现跨域请求,而后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。java
如何使用JSONP?json
下边这一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的下面。app