码迷,mamicode.com
首页 > Web开发 > 详细

JS跨域

时间:2015-12-27 17:51:29      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

客户端 localjs.php 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript">
//原始jsonP跨域方法
function orgjsonp(){
    //设置服务器回调本地的js方法名
    var jsBackFun = "jsCallBackFun";
    //创建一个script标签元素
    var scriptDom  = document.createElement("script");
    scriptDom.type = "text/javascript";
    scriptDom.src  = "http://192.168.155.128/longserver.php?jsBackFun="+jsBackFun;
    //找到head第一个标签元素
    var headDom = document.getElementsByTagName("head")[0];
    //将新建的script元素添加到headDom第一个子标签之前(这里就是<title></title>之前)
    headDom.insertBefore(scriptDom, headDom.firstChild);
}

//jquery jsonP跨域
function jqueryjsonp(){
    var jsBackFun = "jsCallBackFun";
    $.ajax({
        url            : "http://192.168.155.128/longserver.php",
        type           : "get",
        data           : {‘jsBackFun‘ : jsBackFun},
        dataType       : "jsonp"
    });
}

//跨域服务器端需要回调的js方法
function jsCallBackFun(data) {
    alert(data.name);
    alert(data.age);
}

//JSONP跨域方式只能通过GET传值,CROS方式则可通过任何HTTP方式传值

//服务器端设置CORS客户端跨域方法,就是只在服务器端打开允许访问限制,客户端用原有的AJAX正常访问即可
function crosajax(){
    var cros = true;
    $.post("http://192.168.155.128/longserver.php",{‘cros‘:cros},function(data){
        $.each(data,function(i,n){
            alert(n);
        })
    },"json");
}
</script>
</head>
<body>
    <input type="button" value="click orgjsonp!" onclick="orgjsonp();" />
    <input type="button" value="click jqueryjsonp!" onclick="jqueryjsonp();" />
    <input type="button" value="click crosajax!" onclick="crosajax();" />
</body>
</html>

 

跨域服务器端 longserver.php 页面

<?php
$cros = $_POST[‘cros‘];
if(isset($cros)){ //设置CROS跨域
    //允许任何域发起的请求都可以获取当前服务器的数据,这样有很大的危险性,恶意站点可能通过XSS攻击服务器
    //header("Access-Control-Allow-Origin:*");
    //只允许http://192.168.1.101域发起的请求都可以获取当前服务器的数据
    header("Access-Control-Allow-Origin:http://192.168.1.101");
    //要回传的数据
    $backArr   = array(‘name‘=>‘crosname‘,‘age‘=>‘crosage‘);
    echo json_encode($backArr);
    
    /*
    如果页面里不想使用header设置也可以在Apache服务器的httpd.conf里设置
    Apache需要使用mod_headers模块来激活HTTP头的设置,找到 #LoadModule headers_module modules/mod_headers.so 将前面的 # 去掉
    找到
    <Directory />
    AllowOverride none
    Require all denied
    </Directory>
    将其中的 Require all denied 改成 Header set Access-Control-Allow-Origin * 或者 Header set Access-Control-Allow-Origin http://192.168.1.101 即可
    <Directory />
    AllowOverride none
    Header set Access-Control-Allow-Origin http://192.168.1.101
    </Directory>
     */
}else{ //原始jsonP跨域
    //要回调的js方法名
    $jsBackFun = $_GET[‘jsBackFun‘];
    //要回传的数据
    $backArr   = array(‘name‘=>‘jsonpname‘,‘age‘=>‘jsonpage‘);
    //转换成json串
    $backjson  = json_encode($backArr);
    //拼接成跨域返回的字符串,就是把json串做参数放入一个可以回调的js方法里。
    $resultStr = "$jsBackFun($backjson);";
    //返回
    echo $resultStr;
}

客户端服务器ip 192.168.1.101,跨域服务器ip 192.168.155.128

JS跨域

标签:

原文地址:http://www.cnblogs.com/dreamhome/p/5080328.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!