PHP處理Ajax請求與Ajax跨域問題詳解

來源:互聯網
上載者:User
這篇文章主要介紹了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: http://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: http://www.jb51.net");$data = array(  'rand' => $_GET['random'],  'msg' => 'Success');echo json_encode($data);

這就實現了從www.jb51.net頁面發起跨域非同步請求到網域名稱路徑demo.jb51.net/phpajax/ajax.php,並得到響應。

以上就是本文的全部內容,希望對大家的學習有所協助。


聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.