JSONP跨域


由于Ajax请求不支持跨域,多个域名交互就会有问题。

跨域的原理是这样的,在html中的src属性请求的地址是可以跨域的,比如<img >和<script>

比如 test.js中

test({name:'meigong',sex:'man'});
index.html中

<script >  
  
function test(data){  
  
alert('姓名:'+data.name+"性别:"+data.sex);  
  
}  
  
</script>  
<script src='http://www.biuman.comt/test/test.js'></script>  
这时候会弹出框,越狱成功!


下面做个封装,把回调的函数名传递过去 模仿百度


<script>  
  
//回调函数  
function test(a){  
   alert(a.name);  
}  
setTimeout(function(){  
    var url ="http://www.biuman.com/test/jsonp/test.php?cb=test";  
    var script =document.createElement('script');  
    script.setAttribute('src', url);  
    document.getElementsByTagName("body")[0].appendChild(script);  
},100);  
</script >
test.php  
  
<?php  
$filename = './su';  
$fun = $_GET['cb'];  
$arr=array(  
'name'=>'meigong',  
'sex' =>'man'  
);  
$res = json_encode($arr);  
$res = $fun." (".$res.")";  
file_put_contents($filename,$res);  
header('Content-type: biuman/test');  
header('Content-Disposition: attachment; filename='.$filename);  //下载模式,firebug的网络 中响应看不到内容  
readfile("$filename");  
exit();  
?>  
此外,jquery 也封装了jsonp

<script >  
$(function(){  
    $.ajax({  
         url: "http://www.biuman.com/test/jsonp/test.php",  
         dataType: "jsonp",  
         jsonp: "cb", //  
         //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)  
        jsonpCallback:"test", //需要的回调函数  
         success: function(data){  
                alert(data.name);  
         },  
        error: function(){  
            alert('网络异常');  
        }  
    });  
})  
</script >  


<script type="text/javascript" src="http://sources.ikeepstudying.com/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
  $.getJSON("http://test.ikeepstudying.com/json.php?callback=?",
  function(result) {
    for(var i in result) {
      alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
    }
  });
</script>

 

posted @ 2015-02-09 10:49  前度天下  阅读(268)  评论(0编辑  收藏  举报