JSONP
- JSONP是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求
- 工作方式：在网页有一些标签天生具有跨域能力：img、link、iframe、script；JSONP就是利用script标签的跨域能力来发送请求的
8.3.1. 原理
.html
- response.end()返回的结果是函数调用，函数的参数是想给客户端返回结果的数据，函数必须在前端页面提前声明，（前端页面的函数对返回过去的数据进行处理）
- script标签中引用url
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原理演示</title>
<style>
#result {
width: 300px;
height: 120px;
border: 1px solid #409EFF;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//处理数据
function handle(data) {
//获取result元素
const result = document.getElementById("result");
result.innerHTML = data.name;
}
</script>
<!-- <script src="http://127.0.0.1:8848/HBuilderProjects/ajax/%E8%B7%A8%E5%9F%9F/JSONP/js/app.js"></script> -->
<script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>
server.js
//原理：返回的结果是函数调用，函数的参数是想给客户端返回结果的数据
//函数要在前端页面提前声明（前端函数对返回过去的数据进行处理）
app.all('/jsonp-server', (request, response) => {
const data = {
name: 'phy'
};
//将数据转化成字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
})
8.3.2. JSONP实践
.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
</head>
<body>
用户名：<input type="text" id="username" />
<p></p>
<script>
//获取元素
const input = document.getElementById("username");
const p = document.querySelector('p');
//声明handle函数
function handle(data) {
input.style.border = "solid 1px #f00";
p.innerHTML = data.msg;
}
//失去焦点事件
input.onblur = function () {
let username = this.value;
//向服务端发送请求，检测用户名是否存在
//1、创建script标签
const script = document.createElement('script');
//2、设置标签的src属性
script.src = 'http://127.0.0.1:8000/check-username';
//3、将script插入到文档中
document.body.appendChild(script);
}
</script>
</body>
</html>
server.js
//检测用户名是否存在
app.all('/check-username', (request, response) => {
const data = {
exist: 1,
msg: '用户名已经存在'
};
//将数据转化成字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
})
8.3.3. jQuery-jsonp
.html
url后需加?callback=?固定写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery-jsonp</title>
<style>
#result {
width: 300px;
height: 100px;
border: solid 1px #089;
}
</style>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!-- 210323 -->
<button>点击发送jsonp请求</button>
<div id="result">
</div>
<script>
$('button').eq(0).click(function () {
//url后需加?callback=?固定写法
$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function (data) {
$('#result').html(`
名称：${data.name},<br>
校区：${data.city}
`)
})
})
</script>
</body>
</html>
server.js
//jQuery-jsonp
app.all('/jquery-jsonp-server', (request, response) => {
const data = {
name: 'jscksmk',
city: ['北京', '上海', '杭州']
};
//将数据转化成字符串
let str = JSON.stringify(data);
//接收callback参数
let cb = request.query.callback;
//返回结果
response.end(`${cb}(${str})`);
})
