使用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,可以是一段页面代码...
这样就完成了一次跨域请求
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
-->枪声依旧<--

posted on 2012-03-08 21:43 枪声依旧 阅读(1367) 评论(0)  编辑  收藏 所属分类: 前端


只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问  
 
<2012年3月>
26272829123
45678910
11121314151617
18192021222324
25262728293031
1234567

导航

统计

常用链接

留言簿

随笔分类

随笔档案

文章分类

搜索

最新评论

阅读排行榜

评论排行榜