跨域初步
- 因為ajax受到同源策略的限制，不能跨域讀取數據。
- 但有些屬性不受同源策略影響，比如script標簽的src屬性。
- 因此我們可以用script標簽的src屬性到其他非同源的網站獲取后臺數據。
- 前端代碼如下
<script src="http://www.api.com/data.php"></script>
console.log(a);
- 后臺代碼如下
header("content-type:text/html;charset=utf-8");
$arr = array(
"name" => "zs",
"age" => 18
);
echo "var a =".$arr;
此時script標簽會解析后臺傳送過來的數據，后臺傳送過來的數據為
var a = {"name":"zs","age" = 18}字符串; 這就相當于在前端聲明了一個var
變量， 所以此時打印console.log(a); 就會得到這個字符串。
第一次優化
由于第一次的代碼不受我們控制，優化1
前端代碼如下
<button>按鈕</button> <!--在面頁中添加一個按鈕-->
<script>
function func(data){
console.log(data);
}
// 給按鈕添加一個點擊事件，當我們點擊時發送跨域請求
var button = document.querySelector("button");
button.onclick = function () {
var script = document.createElement("script");
script.src = "http://www.api.com/data.php";
document.body.appendChild(script);
}
</script>
后臺代碼如下
header("content-type:text/html;charset=utf-8");
$arr = array(
"name" => "zs",
"age" => 18
);
echo "func($arr)";
當我們點擊按鈕時此時后臺返回的func( {"name":"zs","age" = 18});
就會調用我們聲明的函數；我們就拿到了后臺的數據；
封裝jsonp 再優化
前端代碼如下
<script>
var button = document.querySelect('button');
button.onclick = function(){
jsonp("http://www.api.com/data.php",function(data){
console.log(data);
})
}
function jsonp ( url , fn ){
var script = document.createElement('script');
var fnName = "fn" + new Data().valueOf();
window [ fnName ] = fn;
script.src = url + "?callback = " +fnName;
document.body.appendChild(script);
}
</script>
后臺代碼如下
header("content-type:text/html;charset=utf-8");
$arr = array(
"name" => "zs",
"age" => 18
);
$result = json_encode($arr);
$fnName = $_GET['callback'];
echo "$fnName($result);";
- jsonp和ajax沒有關系，ajax受到同源策略的影響,jsonp就是用來做跨域
- jsonp的原理是通過script標簽去獲取數據，script標簽不受同源策略的影響。
- jsonp的使用需要后臺的配合。
- jsonp只支持get請求，不支持post，因為script就是get請求。
- 缺點：
- jsonp操作比較麻煩，需要封裝，使用jquery封裝好的比較方便。
- 只支持get請求，不支持post
2017-10-26 總結  ；天氣 晴
