利用<script>标签可以跨域，让服务器端返回可执行的Javascript函数，参数为要回发的数据。
小案例：表单失去焦点时，向服务端发送请求，检测用户是否存在
// 引入express
const express = require('express');
// 创建应用对象
const app = express()
//jsonp服务
app.all('/jsonp', (request, response) => {
// response.send('console.log("jsonp")')
const data = {
exist: 1,
msg: "用户名已存在"
}
let str = JSON.stringify(data)
response.end(`handle(${str})`)
})
// 监听端口启动服务
app.listen(8000, () => {
console.log('服务器已启动。。。。。');
})<body>
用户名： <input type="text" placeholder="请输入用户名" id="user">
<p id="text"></p>
<script>
let user = document.getElementById('user')
let text = document.getElementById('text')
// 声明handle函数
function handle(data) {
user.style.border = "solid 1px #f00"
// 修改p标签提示文本
text.innerHTML = data.msg
}
// 表单失去焦点
user.onblur = function () {
// 获取用户输入值
let username = this.value
//向服务端发送请求，检测用户是否存在
// 创建script标签
let script = document.createElement('script')
// 设置script标签src属性
script.src = 'http://192.168.1.6:8000/jsonp'
// 将script插入到文档中
document.body.appendChild(script)
}
// 借助script标签向服务端发送了一个请求，此时服务端的的返回结果是一个handle函数的调用，解析器一看可以执行，把数据做了处理
</script>
</body> JSONP 的缺点：只能使用 GET 请求；动态插入的 script 脚本可能被注入恶意代码
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
