JSONP跨域 （百度为例）

2013-01-31

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

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

比如 test.js中

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

view plain copy to clipboard print ?

1. <script>
3. functiontest(data){
4. alert('姓名:'+data.name+"性别:"+data.sex);
5. }
6. </script>
7. <scriptsrc='http://www.biuman.comt/test/test.js'></script>

这时候会弹出框，越狱成功！

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

//回调函数

functiontest(a){

alert(a.name);

}

setTimeout(function(){

varurl="http://www.biuman.com/test/jsonp/test.PHP?cb=test";

varscript=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

$(function(){

$.ajax({

url:"http://www.biuman.com/test/jsonp/test.PHP",

dataType:"jsonp",248)"> jsonp:"cb",//

//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

jsonpCallback:"test",0)">//需要的回调函数

success:function(data){

alert(data.name);

},248)"> error: alert('网络异常');

});

})

</script>

原创文章 转载请注明 来自美公网天下

本文的链接地址是:http://www.biuman.com/2013/01/jsonp-example-html/