以下測(cè)試代碼使用php，瀏覽器測(cè)試使用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在服務(wù)器設(shè)置請(qǐng)?jiān)试S跨域(注意：IE9測(cè)試不通過)
$.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));
}
});
/*
第二種JSONP：
在客戶端動(dòng)態(tài)注冊(cè)一個(gè)函數(shù)function test(data)，然后將函數(shù)名傳到服務(wù)器，服務(wù)器返回一個(gè)test({json})到客戶端運(yùn)行,這樣就調(diào)用客戶端的function test(data),從而實(shí)現(xiàn)了跨域,jquery已經(jīng)支持jsonp
*/
// 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));
}
});
/*
第三種，原理與jsonp類似，web頁面上調(diào)用js文件時(shí)不受跨域影響,
只要利用<script>標(biāo)簽的src屬性，動(dòng)態(tài)加載js方式就能跨域，該方式為異步，通過testjs()回調(diào)
*/
var testjs = function(msg){
$('#js').html(JSON.stringify(msg));
}
$('#loadjson')[0].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請(qǐng)求實(shí)現(xiàn)跨域:
<div id="js">
</div>
</body>
</html>
服務(wù)器端處理
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);
header('Content-type:application/x-javascript');
echo "$method($jsonData);";
?>
IE9測(cè)試，頁面輸出內(nèi)容
header跨域:
jsonp跨域:
{"success":1,"name":"penngo"}
js請(qǐng)求實(shí)現(xiàn)跨域:
{"success":1,"name":"penngo"}
chrome,firefox,safari測(cè)試，頁面輸出內(nèi)容
header跨域:
{"success":1,"name":"penngo"}
jsonp跨域:
{"success":1,"name":"penngo"}
js請(qǐng)求實(shí)現(xiàn)跨域:
{"success":1,"name":"penngo"}