一、首先要了解什麼是域?javascript
什麼是域,簡單來講就是協議+域名或地址+端口,3者只要有任何一個不一樣就表示不在同一個域。跨域,就是在一個域中訪問另外一個域的數據。php
若是隻是加載另外一個域的內容,而不須要訪問其中的數據的話,跨域是很簡單的,好比使用iframe。但若是須要從另外一個域加載並使用這些數據的話,就會比較麻煩。爲了安全性,瀏覽器對這種狀況有着嚴格的限制,須要在客戶端和服務端同時作一些設置才能實現跨域請求。前端
例如:客戶端的域名是one.domain.com,而請求的域名是dataapi.domain.com。java
若是直接使用ajax訪問,會有如下錯誤:ajax
XMLHttpRequest cannot load http://dataapi.domain.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://one.domain.com' is therefore not allowed access.
指定某域名(http://one.domain.com)跨域訪問,則只需在http:/dataapi.domain.com/server.php文件頭部添加以下代碼:sql
header('Access-Control-Allow-Origin:http://one.domain.com');
指定多個域名(http://one.domain.com、http://two.domain.com等)跨域訪問,則只需在http:/dataapi.domain.com/server.php文件頭部添加以下代碼:json
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; $allow_origin = array( 'http://one.domain.com', 'http://two.domain.com' ); if(in_array($origin, $allow_origin)){ header('Access-Control-Allow-Origin:'.$origin); }
容許全部域名訪問則只需在http:/dataapi.domain.com/server.php文件頭部添加以下代碼:後端
header('Access-Control-Allow-Origin:*');
1. jsonp不支持POST請求,只支持GET請求,除非其餘辦法api
2. Ajax和Jsonp不是一碼事,具體的就不在多說了跨域
JSONP簡介
JSONP(JSON with Padding)是一種經常使用的跨域手段,但只支持js腳本和JSON格式的數據。顧名思義,JSONP是利用JSON做爲墊片,從而實現跨域請求的一種技術手段。其基本原理是利用HTML的<script>標籤天生能夠跨域這一特色,用其加載另外一個域的JSON數據,加載完成後會自動運行一個回調函數通知調用者。此過程須要另外一個域的服務端支持,因此這種方式實現的跨域並非任意的。
咱們經過jQuery的JSONP方式能夠實現跨域ajax請求,服務端php也須要作出相應的處理,也就是說php這邊必須和前端頁面按照必定的格式請求和返回數據。
示例:前端頁面發起JSONP請求:
$.ajax({ type: "get", //設置請求類型 url: "http://dataapi.domain.com/data/userInformation.php", //請求路徑 dataType: 'jsonp', jsonp: "callback", crossDomain: true, //必須加上crossDomain: true,不然報錯 data: submitUserInformation+ajaxData, //請求參數 success: function(data){ //成功回調函數 console.log(data); }, error:function () { console.log('Request Error.'); } });
php後端服務代碼(注意輸出返回的格式)
if($result){ //INSERT語句執行成功 $arr[0]['msg'] = 'succ'; }else{ //INSERT語句執行失敗 $arr[0]['msg'] = 'err'; //$arr['reason'] = "SQL statement execution failed:$sql"; } $output[] = $arr; echo $_GET['callback'].'('.json_encode($output).')'; $conn->close();
注意:後臺傳回來的數據必須是 回調函數名(json格式數據) 切記"回調函數名(正確的json格式數據)" 返回這種格式數據必定是錯誤的,不能有雙引號