get解決跨域請求問題,jsonp結合ajax
阿新 • • 發佈:2019-01-07
什麼是跨域?
跨域,指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的,是瀏覽器對javascript施加的安全限制。
所謂同源是指,域名,協議,埠均相同,不明白沒關係,舉個栗子:
請注意:localhost和127.0.0.1雖然都指向本機,但也屬於跨域。
瀏覽器執行javascript指令碼時,會檢查這個指令碼屬於哪個頁面,如果不是同源頁面,就不會被執行。
下面介紹get跨域解決方案:
使用jsonp只能解決get請求的跨域,因為script標籤中的src請求就是get請求。也就是說,通過JQ只能解決get請求的跨域。post請求的跨域,需要在伺服器進行設定
JSONP實現跨域 常用的jquery實現跨域呼叫
$.ajax({
url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",
dataType: "jsonp",
jsonp: "callback",
context: document.body,
success: function(data) {
console.log(data);
}
});
這個呼叫實際上的實現原理是
在網頁中構造一個script標籤,將src設定為對應的url,並增加上相應的callback引數,形如如下格式:
<script src="http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php?callback=jQuery211018970995225637144_1465350372062&_=1465350372063"></script>
請求的服務端程式碼如下:
$data = json_encode(array("id" => "1", "name" => "tom"));
$callback = $_GET["callback"];
echo $callback . "(" . $data . ")";
實際上最後返回的內容就是一段js程式碼:
jQuery211018970995225637144_1465350372062({"id":"1","name":"tom"})
當瀏覽器獲取到該段js程式碼後就會執行這個函式,從而實現回撥ajax請求時設定的success方法
jsonp實現的缺點