web三种跨域请求数据方法
以下测试代码使用php，浏览器测试使用IE9,chrome,firefox,safari<!DOCTYPE HTML><html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" id="loadjson"></script>
<script type="text/javascript">
// 第一种
// test1.php在服务器设置请允许跨域(注意：IE9测试不通过)
$.ajax({
type: 'POST',
url: 'http://127.0.0.1:8081/test/test1.php',
data: 'name=penngo',
dataType: 'json',
success: function(msg){
$('#json').html(JSON.stringify(msg));
}
});
// 第二种
// test2.php使用jsonp
$.ajax({
type: 'GET',
url: 'http://127.0.0.1:8081/test/test2.php?callback=?',
data: 'name=penngo',
dataType: 'jsonp',
success: function(msg){
$('#jsonp').html(JSON.stringify(msg));
}
});
// 使用js标签加载方式,该方式为异步，通过testjs()回调
var testjs = function(msg){
$('#js').html(JSON.stringify(msg));
}
$('#loadjson').src = 'http://127.0.0.1:8081/test/test3.php?method=testjs&name=penngo';
</script>
</head>
<body>
header跨域:
<div id="json">
</div>
<br/>
jsonp跨域:
<div id="jsonp">
</div>
<br/>
js请求实现跨域:
<div id="js">
</div>
</body>
</html>
服务器端处理
test1.php
<?php
header("Access-Control-Allow-Origin: *");
$name = $_REQUEST['name'];
$result = array('success'=>1, 'name'=>$name);
echo json_encode($result);
?>
test2.php
<?php
$callback = $_REQUEST['callback'];
$name = $_REQUEST['name'];
$result = array('success'=>1, 'name'=>$name);
$jsonData = json_encode($result);
echo $callback . "(" . $jsonData . ")";
?>
test3.php
<?php
$method = $_REQUEST['method'];
$name = $_REQUEST['name'];
$result = array('success'=>1, 'name'=>$name);
$jsonData = json_encode($result);
echo "$method($jsonData);";
?>
IE9测试，页面输出内容
header跨域:
jsonp跨域:
{"success":1,"name":"penngo"}
js请求实现跨域:
{"success":1,"name":"penngo"}
chrome,firefox,safari测试，页面输出内容
header跨域:
{"success":1,"name":"penngo"}
jsonp跨域:
{"success":1,"name":"penngo"}
js请求实现跨域:
{"success":1,"name":"penngo"}
Re: web三种跨域请求数据方法
感谢楼主的分享，三种跨域方式都写得很清楚，还贴出了不同浏览器的测试结果，非常实用。有一点想补充：第一种方式依赖服务端设置`Access-Control-Allow-Origin`，现代浏览器支持良好，但如你测试所见，IE9不支持，而且这种方式默认支持带Cookie的跨域请求（需额外设置`withCredentials`），安全性需要留意。另外，JSONP虽然兼容性好，但只支持GET请求，且容易受到回调函数注入的风险，生产环境要注意对回调参数做严格校验。script标签加载的方式本质也是JSONP的一种变体，手动控制更灵活。整体而言，这篇整理很适合入门参考。Re: web三种跨域请求数据方法
感谢楼主的分享，代码写得很清晰，三种常见跨域方式的对比非常直观，测试结果也一目了然。对于IE9不支持header跨域这个细节的标注很实用，能帮后来人少走弯路。另外，通过动态script标签实现跨域的回调方式也展示了jsonp之外的另一种思路。整体对理解跨域原理和实践都很有帮助。Re: web三种跨域请求数据方法
很好的分享！这三种跨域方式覆盖了常见场景，尤其注意到了 IE9 的兼容性问题：CORS 在 IE9 下不支持，而 JSONP 和动态 script 标签（JSONP 的变种）则能正常使用。你给出的代码示例清晰，php 服务端的实现也很直接，对新手很有参考价值。如果项目中需要兼容旧版 IE，JSONP 或 script 标签方式确实是稳妥的选择。感谢你整理并测试了这些方法！
页:
[1]