js跨域,比如说你点击你本地环境里面的一张页面上的一个按钮,请求服务器端的一个文件。要想成功返回有效数据,那就必须得跨域。
上代码:index.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsonp跨域</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//运用跨域方法
function getmesg(){
$.ajax({
url:'http://xxx.xxx.xxx.xxx/ccb/jsonp.php', //跨域到http://www.wp.com,另,http://test.com也算跨域
type:'GET', //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
dataType:'jsonp', //指定为jsonp类型
data:{"name":"Zjmainstay"}, //数据参数
jsonp:'callback', //服务器端获取回调函数名的key,对应后台有$_GET['callback']='getName';callback是默认值(这两项是用了jsonp之后一定要写的,格式问题,没有为什么!jsonp:'callback' 是必写项!)
jsonpCallback:'getName', //回调函数名(这一项是用了jsonp之后一定要写的,格式问题,没有为什么!其中 getName是回调函数名)
success:function(result){ //成功执行处理,对应后台返回的getName(data)方法。
alert(result.name);
},
error:function(msg){
alert(msg.toSource()); //执行错误
}
});
}
//-----------------------------------------------------------------------------------------------------------------------------------
//普通不跨域的ajax
function notajax(){
$.ajax({
url:'http://xxx.xxx.xxx.xxx/ccb/jsonp.php', //跨域到http://www.wp.com,另,http://test.com也算跨域
type:'GET', //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
dataType:'text', //指定数据类型
data:{"name":"Zjmainstay"}, //数据参数
success:function(result){ //成功执行处理,对应后台返回的getName(data)方法。
alert(result.name);
},
error:function(msg){
alert(msg.toSource()); //执行错误,访问不到 会返回错误!!!
}
});
}
</script>
<body>
<a href="javascript:void(0);" οnclick="getmesg();">点击跨域</a>
<br/><br/><br/><br/><br/><br/>
<a href="javascript:void(0);" οnclick="notajax();">普通ajax</a>
</body>
</html>
引用的是jquery.js
服务器端文件:jsonp.php
<?php
header('Content-type:text/html; charset=utf-8');
$arr = array(
'name'=>'这个是名字',
'age'=>'今天27岁'
);
echo 'getName('.json_encode($arr).')'
?>
使用跨域之后返回结果: