您的位置：首页 > Web前端 > JavaScript

JS跨域

2015-12-27 16:28 441 查看

客户端 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">
//客户端服务器ip 192.168.1.101，跨域服务器ip 192.168.155.128
//原始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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航