使用JSONP解决跨域请求

由于同源策略的限制，在一个源下只允许请求当前源（域名、协议、端口）的资源。如果要在当前源下请求另一个源的数据，就是跨域请求了．最近碰到这个问题，上网找了一些资料发现用JSONP可以解决跨域请求的问题，特此记录下来．

JSONP是一个非官方的协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback的形式实现跨域访问。也就是我们可以通过客户端使用html的script标记来跨域请求服务端，服务端响应中返回一段script代码，来回调客户端的一个javascript函数．可以直接使用JSON传递javascript对象。

具体使用方式是这样的：
假定现在有两个域：
域A：client.com
域B：server.com
现在client.com需要访问server.com获得一些数据，就可在client.com的页面中嵌入
下面这样的代码：

 

<script type="text/javascript">
    　// 服务端返回数据的回调函数
　　 function callbackFun(result) {
	    alert(result);
    　}
    // 创建一个script标签
    var requestData = document.createElement("script") ;
    requestData.type = "text/javascript";
    // src请求指向server端
    requestData.src = "http://server.com?param1=xxx&param2=xxx";
    if (heads.length) {
    	  heads[0].appendChild(requestData);
    } else {
    	  document.documentElement.appendChild(requestData);
    }
</script>

上述src的请求在server.com中将返回如下数据：

 

callbackFun('[{"key1" : "value1}, {"key2" : "value2"}]')

 
其实这个回调函数里可以返回任何数据，可以是json,可以是xml,可以是一段页面代码．．．

这样就完成了一次跨域请求．