素材牛VIP会员

两种方式解决js应用ajax的跨域问题

 所属分类:论坛-技术档案

 浏览:744次  评论:1次  发布时间:2016-11-22
文章简介:我们知道,用服务端脚本做js来用可以实现通信,但是,他功能太简单,不够灵活,还是需要像ajax这样的通信来的方便。今天公司在使用phonegap时遇到了ajax跨域问题,我偷听了一下,总结了一下ajax两种跨域问题。嘿嘿。

我们知道,用服务端脚本做js来用可以实现通信,但是,他功能太简单,不够灵活,还是需要像ajax这样的通信来的方便。今天公司在使用phonegap时遇到了ajax跨域问题,我偷听了一下,总结了一下ajax两种跨域问题。嘿嘿。

当然这样应用场景是有前提的,一般情况下,我们都是在同个域名下,但是做客户端软件或手机应用,没有域,所以要解决跨域通信。

第一种方式就是jsonp

html代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript">  
     jQuery(document).ready(function(){   
        $.ajax({  
             type: "GET",  
             async: false,  
             url:"http://abc.sucainiu.com/ajax.php",//跨域请求地址
             dataType: "jsonp",  
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)  
             jsonpCallback:"bbb",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据  
             success: function(json){  
                 alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。回调函数名为: '+json.func);  
             },  
             error: function(){  
                 alert("fail");  
             }  
         });  
     });  
 </script>  
 </body>
</html>

abc.sucainiu.com/ajax.php后端处理代码

$callback = isset($_GET["callback"]) ? $_GET["callback"] : 'flightHandler';  
$a = array(    
    'code'=>'CA1998',    
    'price'=>'6000',    
    'tickets'=>20,    
    'func'=>$callback,    
);    
$result = json_encode($a);    
echo "{$callback}($result)";    
exit;  

第二种方式,就是php等的服务端脚本,头信息加入

header('Access-Control-Allow-Origin: *');

这样,其脚本的返回值就可以在任何域下使用了,ajax保持原来的用法即可。

 标签:JSajax跨域

讨论这个项目(1)回答他人问题或分享插件使用方法奖励牛币

    37***qq
    2016年11月29日 10:06
 文明上网,理性发言!