大家都知道为了安全起见,浏览器是不支持ajax跨域请求的,小伙伴们为了解决跨域请求,一般会用jsonp的方式,那么除了jsonp以外,真的就解决不了跨域吗?当然不是,其实ajax也是可以跨域请求的。只不过这一点是在后来才支持的,而且需要一定的http协议的知识基础。那么闲话不多说,接下来开始Coding!!!
先来看看前台代码:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'>
<title></title>
<script src="http://static.wkimg.com/common/lib/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var theurl='http://www.myhost.com/jsonp/ajaxCrossDomain.php';
var params={};
params.name='Lilei';
params.age='28';
$('#click').bind('click',function(){
$.ajax({
type: "POST",
url: theurl,
data:params,
dataType: "json",
success: function(json) {
$('h1').html('yourname:'+json.name+'---yourage:'+json.age);
}
});
});
});
</script>
</head>
<body>
<a href="javascript:;" target="_self" id="click">点击测试</a>
<h1 id="back_data"></h1>
</body>
</html>
后台代码
<?php
$bak_data=json_encode($_POST);
echo $bak_data;
接下来我们测试一下如下图。
如图所示,其实是访问并没失败,但是数据并没有回来。报错中告诉你在请求的资源中没有允许该Access-Control-Allow-Origin。那么接下来其实只要我们在服务端指定一下就可以了。
更改后代码:
<?php
$bak_data=json_encode($_POST);
header("Access-Control-Allow-Origin:http://localhost");
echo $bak_data;
接下来我们再请求如图:
在服务端允许了来自该域名的请求后,我们就能正常的使用ajax进行前后交互了。