现在的位置: 首页 > 综合 > 正文

jquery框架下解决ajax跨域问题

2012年10月15日 ⁄ 综合 ⁄ 共 1037字 ⁄ 字号 评论关闭

HTML代码:

<button type="button" onclick="fun1()">跨域访问</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

js代码:

   // 跨域访问问题
    function jsonCallBack(url,callback) {
      $.getScript(url,function(){
      callback(json);
      });
    }

    function fun1(){
      jsonCallBack('http://mupicheng.com/js.php',function(json){
      alert(json.message);
      })
    }

跨域访问的PHP文件:

<?php
    $ary = array('result'=>0,'message'=>'跨域成功');
    $json = json_encode($ary);
    //一定要这样定义输出最后的JSON数据,这是利用JS的闭包特性
    echo "var json=$json;";
?>

该方案注意事项:
1:jQuery的版本必需大于 1.2版,否则不支持跨域处理
2:只支持 GET 方式的请求
3:请求的 URL 必需按如下例子中那样返回数据.
该方案注意利弊:
优点:
1:比用 iframe 加输出 parent.XXX() 的方案简单高效明了,前端处理更方便
2:相当 proxy 方式在编程上也简单多了
缺点:
1:必需使用jQuery,
2:返回的数据格式必需按示例样,当然不限于JSON,但它是处理最方便的.

GET方式访问实例:

<script type="text/javascript">
function fun1(){
    $.getJSON("http://a.com/c.php?no=10&msg=ok&format=json&jsoncallback=?",
    function(data){
    alert(data.msg);
});
}
</script>
<button type="button" onclick="fun1()">跨域处理</button>

c.php文件:

<?php
$no = $_GET['no'];
$msg = $_GET['msg'];
$json = json_encode(array('no'=>$no,'msg'=>$msg));
//必需以下这样输出
echo $_GET['jsoncallback'].'('.$json.')';

 

 

抱歉!评论已关闭.