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=)