jsonp原理
通過html中的script标簽的跨域能力實作與伺服器端的資料互動，解決ajax不能跨域的缺點。後端使用php程式設計，前端傳輸一個回調函數的名字，php中通過echo這個函數，可以實作在前端執行這個回調函數。
前端jsonp請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.callback_jsonp = function (flag) {
clearTimeout(window.jsonp_timer);
console.log('請求成功');
};
// 3s逾時處理,避免伺服器端出錯
window.jsonp_timer = setTimeout(function () {
window.callback_jsonp = function () {
console.log('jsonp請求逾時後傳回資料');
};
console.log('jsonp請求逾時');
}, );
var new_script = document.createElement('script');
new_script.src = "//localhost/index.php?callback=window.callback_jsonp";
document.body.appendChild(new_script);
console.log('jsonp請求');
</script>
</body>
</html>
伺服器端實作
<?php
$data = true;
$callback = $_GET['callback'];
sleep();
echo $callback.'('.json_encode($data).')';
?>
結果
- 首先輸出“jsonp請求”，說明請求是異步的，不會阻塞線程
- 然後輸出“jsonp請求逾時”，說明逾時處理有效
- 最後輸出“jsonp請求逾時後傳回資料”，說明可以通過重置回調函數避免逾時處理後，伺服器成功傳回資料，依然有回調函數中的代碼執行
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)