如何解決PHP處理Ajax請求與Ajax跨域問題

這篇文章運用簡單易懂的例子給大家介紹如何解決PHP處理Ajax請求與Ajax跨域問題，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

PHP判斷是否為Ajax請求

我們知道，在發送ajax請求的時候，可以通過XMLHttpRequest這個對象，創建自定義的header頭信息， 在jquery框架中，對于通過它的$.ajax, $.get, 或者$.post方法請求網頁內容時，它會向服務器傳遞一個HTTP_X_REQUESTED_WITH的參數，php中就是在header一層判斷是否是ajax請求，對應的根據$_SERVER['HTTP_X_REQUESTED_WITH']判斷。一般情況下$_SERVER['HTTP_X_REQUESTED_WITH']默認是XMLHttpRequest，$_SERVER['HTTP_X_REQUESTED_WITH']也可以自定義創建的，使用XMLHttpRequest.setRequestHeader(name,value)。

示例：前端頁面發送普通的ajax請求給后端test.php。

$.ajax({
  type: "GET",
  url: 'test.php',
  success: function(data) {
    console.log(data);
  }
});

服務端test.php可以判斷該請求是不是Ajax異步請求，然后根據業務需求做出響應的回應。

以下是服務端test.php的簡單驗證是否為ajax請求的代碼：

function isAjax() {
  return @$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ? true : false;
}
if (isAjax()) {
  echo 'Ajax Request Success.';
} else {
  echo 'No.';
}

Ajax發起JSONP跨域請求

我們通過jQuery的JSONP方式可以實現跨域ajax請求，服務端php也需要做出相應的處理，也就是說php這邊必須和前端頁面按照一定的格式請求和返回數據。

示例：前端頁面發起JSONP請求：

$.ajax({
  type: "get",
  data: "random="+Math.random(),
  url: "http://demo.jb51.net/phpajax/jsonp.php",
  dataType: "jsonp",
  jsonp: "callback",
  success: function(data) {
   console.log(data);
  },
  error: function() {
   console.log('Request Error.');
  }
});

我們會發現，ajax請求參數中有 dataType: "jsonp" 和 jsonp: "callback" ，這個就表明了我要請求的是jsonp，并且會有回調callback返回。當然，我們也可以自定義回調函數，如 jsonpCallback:"success_jsonpCallback"

還可以簡單的寫成：

jQuery.getJSON('http://demo.jb51.net/phpajax/jsonp.php?callback=?",{
 random: Math.random()
}, function(data){
 console.log(data);
});

php后端服務代碼可以這樣寫（注意輸出返回的格式）：

$data = array(
  'rand' => $_GET['random'],
  'msg' => 'Success'
);
echo $_GET['callback'].'('.json_encode($data).')';

Ajax跨域請求：CORS

CORS，又稱跨域資源共享，英文全稱Cross-Origin Resource Sharing。假設我們想使用Ajax從a.com的頁面上向b.com的頁面上要點數據，通常情況由于同源策略，這種請求是不允許的，瀏覽器也會返回“源不匹配”的錯誤，所以就有了“跨域”這個說法。但是我們也有解決辦法，我們可以再b.com的頁面header信息中增加一行代碼：

header("Access-Control-Allow-Origin: *");

當我們設置的header為以上信息時，任意一個請求過來之后服務端我們都可以進行處理和響應，那么在調試工具中可以看到其頭信息設置，其中見紅框中有一項信息是“*Access-Control-Allow-Origin：* ”，表示我們已經啟用CORS，如果要限制只允許某個域名的請求，可以這樣：

header("Access-Control-Allow-Origin: https://www.jb51.net");

示例：通過CORS跨域請求數據

$.ajax({
  type: "get",
  data: "random="+Math.random(),
  url: "http://demo.jb51.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.');
  }
});

我們在另一個網站域名下的ajax.php加上這樣的代碼：

header("Access-Control-Allow-Origin: https://www.jb51.net");
$data = array(
  'rand' => $_GET['random'],
  'msg' => 'Success'
);
echo json_encode($data);

這就實現了從www.jb51.net頁面發起跨域異步請求到域名路徑demo.jb51.net/phpajax/ajax.php，并得到響應。

關于如何解決PHP處理Ajax請求與Ajax跨域問題就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。