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 >
原创文章 转载请注明 来自美公网天下
本文的链接地址是:http://www.biuman.com/2013/01/jsonp-example-html/