什麼是跨域請求
$.getJSON('www.BBB.com/index.php', funciton(data) {
// 後續操作
});
同源策略
什麼情況下,我們要繞過瀏覽器這個限制
file:///E:/BaiduYunPan/www/test.js
如何繞過瀏覽器這個限制
<html>
<script>
function test(data)
{
alert(data);
}
</script>
<script type="text/javascript" src="http://www.BBB.com/test.php"></script>
</html>
<?php
echo "test('this data is from Server B')";
當瀏覽器執行到tes.js文件的時候,會觸發test(data)這個函數,也就是說,可以請求到網站B的內容。這樣,我們就已經實現了跨域請求數據。這個原理就是 src不受同源策略限制,會獲取網站B響應的數據,而且會把這個數據當做JS文件來執行,所以,對於網站A來說,就是執行了test(data)函數。這個實現方式的重點就是網站B響應的數據是網站A中一段可執行的JS文件,這樣網站A就可以處理來自網站B的數據了。
ajax自帶jsonp屬性實現跨域請求
$.ajax({
url:"www.BBB.com/index.php",
dataType:"jsonp",
jsonpCallback:"person",
success:function(data){
alert(data.name + " is a a" + data.sex);
}
});
在網站B中有一個index.php文件:echo 'person(' . json_encode(array('name' => 'sunli', 'age' => '24')) . ')';
這樣就可以。echo $_GET['callback'] . '(' . json_encode(array('name' => 'sunli', 'age' => '24')) . ')';
(2)我在實現jsonp的時候,沒有填寫jsonpCallback, 在index.php中也沒有加入$_GET['calllback']這樣的函數名,於是就遇到一個很大的錯誤,網站A依然可以請求到網站B的數據,但是,test.js文件中,success 響應函數沒有執行到,我想了半天都沒有想到,爲什麼瀏覽器成功響應了數據,但是success卻沒有執行,最後由老大指出了問題,就是我第一點說的,沒有指定回調函數,就算數據返回過來了,也不會執行success.