我們知道前端頁(yè)面發(fā)送Ajax到服務(wù)端,服務(wù)端可以判斷請(qǐng)求是否是Ajax請(qǐng)求?而對(duì)于跨域的Ajax請(qǐng)求,我們知道通常有jsonp方法,那服務(wù)器PHP該如何處理這些jsonp請(qǐng)求呢?以及如何處理不是jsonp請(qǐng)求的ajax跨域呢?下面給大家分享解決這些問(wèn)題,希望可以幫助到大家。
用PHP判斷是否為Ajax請(qǐng)求?
我們知道在發(fā)送ajax請(qǐng)求的時(shí)候,可以通過(guò)XMLHttpRequest這個(gè)對(duì)象,創(chuàng)建自定義的header頭信息, 在jquery框架中,對(duì)于通過(guò)它的$.ajax, $.get, 或者$.post方法請(qǐng)求網(wǎng)頁(yè)內(nèi)容時(shí),它會(huì)向服務(wù)器傳遞一個(gè)HTTP_X_REQUESTED_WITH的參數(shù),php中就是在header一層判斷是否是ajax請(qǐng)求,對(duì)應(yīng)的根據(jù)$_SERVER['HTTP_X_REQUESTED_WITH']判斷。一般情況下$_SERVER['HTTP_X_REQUESTED_WITH']默認(rèn)是XMLHttpRequest,$_SERVER['HTTP_X_REQUESTED_WITH']也可以自定義創(chuàng)建的,使用XMLHttpRequest.setRequestHeader(name,value)。
示例:前端頁(yè)面發(fā)送普通的ajax請(qǐng)求給后端test.php。
CORS,又稱跨域資源共享,英文全稱Cross-Origin Resource Sharing。假設(shè)我們想使用Ajax從a.com的頁(yè)面上向b.com的頁(yè)面上要點(diǎn)數(shù)據(jù),通常情況由于同源策略,這種請(qǐng)求是不允許的,瀏覽器也會(huì)返回“源不匹配”的錯(cuò)誤,所以就有了“跨域”這個(gè)說(shuō)法。但是我們也有解決辦法,我們可以再b.com的頁(yè)面header信息中增加一行代碼:
當(dāng)我們?cè)O(shè)置的header為以上信息時(shí),任意一個(gè)請(qǐng)求過(guò)來(lái)之后服務(wù)端我們都可以進(jìn)行處理和響應(yīng),那么在調(diào)試工具中可以看到其頭信息設(shè)置,其中見(jiàn)紅框中有一項(xiàng)信息是“*Access-Control-Allow-Origin:* ”,表示我們已經(jīng)啟用CORS,如果要限制只允許某個(gè)域名的請(qǐng)求,可以這樣:
示例:通過(guò)CORS跨域請(qǐng)求數(shù)據(jù)
我們?cè)诹硪粋€(gè)網(wǎng)站域名下的ajax.php加上這樣的代碼:
$.ajax({
type: "GET",
url: 'test.php',
success: function(data) {
console.log(data);
}
});
服務(wù)端test.php可以判斷該請(qǐng)求是不是Ajax異步請(qǐng)求,然后根據(jù)業(yè)務(wù)需求做出響應(yīng)的回應(yīng)。
以下是服務(wù)端test.php的簡(jiǎn)單驗(yàn)證是否為ajax請(qǐng)求的代碼:
我們通過(guò)jQuery的JSONP方式可以實(shí)現(xiàn)跨域ajax請(qǐng)求,服務(wù)端php也需要做出相應(yīng)的處理,也就是說(shuō)php這邊必須和前端頁(yè)面按照一定的格式請(qǐng)求和返回?cái)?shù)據(jù)。function isAjax() {
return @$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ? true : false;
}
if (isAjax()) {
echo 'Ajax Request Success.';
} else {
echo 'No.';
}
Ajax發(fā)起JSONP跨域請(qǐng)求
示例:前端頁(yè)面發(fā)起JSONP請(qǐng)求:
$.ajax({
type: "get",
data: "random="+Math.random(),
url: "http://demo.helloweba.net/phpajax/jsonp.php",
dataType: "jsonp",
jsonp: "callback",
success: function(data) {
console.log(data);
},
error: function() {
console.log('Request Error.');
}
});
我們會(huì)發(fā)現(xiàn),ajax請(qǐng)求參數(shù)中有dataType: "jsonp"和jsonp: "callback",這個(gè)就表明了我要請(qǐng)求的是jsonp,并且會(huì)有回調(diào)callback返回。當(dāng)然,我們也可以自定義回調(diào)函數(shù),如jsonpCallback:"success_jsonpCallback"
還可以簡(jiǎn)單的寫(xiě)成:
jQuery.getJSON('http://demo.helloweba.net/phpajax/jsonp.php?callback=?",{
random: Math.random() }, function(data){
console.log(data); });
php后端服務(wù)代碼可以這樣寫(xiě)(注意輸出返回的格式):
$data = array(
'rand' => $_GET['random'],
'msg' => 'Success'
); echo $_GET['callback'].'('.json_encode($data).')';
Ajax跨域請(qǐng)求:CORS
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Origin: http://www.helloweba.com");
$.ajax({
type: "get",
data: "random="+Math.random(),
url: "http://demo.helloweba.net/phpajax/ajax.php",
dataType: "json",
success: function(data) {
console.log(data);
$("#result_3").html(data.msg+':'+data.rand);
},
error: function() {
$("#result_3").html('Request Error.');
} });
header("Access-Control-Allow-Origin: http://www.helloweba.com");
$data = array(
'rand' => $_GET['random'],
'msg' => 'Success'
);
echo json_encode($data);