文章目录
1、安装NodeJS
【官网链接】安装一直点下一步就行了
验证是否安装成功:
① win + r,输入cmd
② 输入:node -v
③ 如果出现版本号,说明安装成功
2、Express框架
① 在项目目录中右键打开命令行终端,输入:npm init --yes(用于快速创建一个 Node.js 项目的 package.json 文件,并将所有选项设置为默认值。)
② 安装Express框架:npm i express
③ 编写代码:
// 1、引入Express
const express = require("express");
// 2、创建应用对象
const app = express();
// 3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
// 服务器允许浏览器发送任意的请求头信息
response.setHeader("Access-Control-Allow-Headers", "*");
// 服务器允许所有请求方法
response.setHeader("Access-Control-Allow-Method", "*");
// 设置响应体
response.send("HELLO EXPRESS!");
});
// 4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000 端口监听中....")
})
④ 运行服务,在终端输入:node 脚本名
⑤ 关闭服务:Ctrl + C
AJAX发送GET请求
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX发送GET请求</title>
<style>
.box {
width: 640px;
height: 480px;
margin: 200px auto;
border: 1px solid black;
position: relative;
text-align: center;
}
.btn {
width: 120px;
height: 40px;
background-color: blueviolet;
color: white;
font-size: 14px;
border-radius: 10px;
margin-top: 50px;
}
#result {
width: 320px;
height: 240px;
border: 3px solid slateblue;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<button class="btn">发送GET请求</button>
<div id="result"></div>
</div>
<script>
const btn = document.getElementsByClassName("btn")[0];
const result = document.getElementById("result");
btn.onclick = function () {
console.log("Click!");
// 1、创建对象
const xhr = new XMLHttpRequest();
// 2、初始化 设置请求方法和URL
// 如需设置参数,直接在url后面加?a=100&b=200&c=300
xhr.open("GET", "http://127.0.0.1:8000/server");
// 3、发送
xhr.send();
// 4、事件绑定 处理服务端返回的结果
// readystate 是 xhr 对象中的属性
// 表示状态 0(未初始化) 1(执行完open方法) 2(执行完send方法) 3(服务端返回部分结果) 4(服务端返回全部结果)
xhr.onreadystatechange = function () {
// 判断(服务端返回了所有的结果)
if (xhr.readyState === 4) {
// 判断响应状态码
// 200 OK:请求成功。服务器成功处理了请求并返回所请求的资源。
// 201 Created:已创建。请求成功,并且服务器已经创建了新的资源。
// 204 No Content:无内容。服务器成功处理了请求,但没有返回任何内容。
// 400 Bad Request:请求错误。服务器无法理解或处理请求的语法。
// 401 Unauthorized:未授权。请求要求身份验证,但用户未提供有效的身份凭据。
// 403 Forbidden:禁止访问。服务器拒绝请求访问资源,没有权限。
// 404 Not Found:未找到。服务器找不到请求的资源。
// 500 Internal Server Error:服务器内部错误。服务器在处理请求过程中发生了错误。
// 502 Bad Gateway:错误的网关。作为网关或代理服务器的服务器,从上游服务器接收到无效的响应。
// 503 Service Unavailable:服务不可用。服务器暂时过载或维护,无法处理请求。
if (xhr.status === 200) {
// 处理结果 行 头 空行 体
console.log(xhr.status); // 状态码
console.log(xhr.statusText); // 状态字符串
console.log(xhr.getAllResponseHeaders); // 所有响应头
console.log(xhr.response); // 响应体
result.innerHTML = xhr.response;
} else {
console.log("请求失败...");
}
}
}
}
</script>
</body>
</html>
服务端代码
// 1、引入Express
const express = require("express");
// 2、创建应用对象
const app = express();
// 3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
// 服务器允许浏览器发送任意的请求头信息
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Method", "*");
// 设置响应体
response.send("HELLO AJAX!");
});
// 4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000 端口监听中....")
})
AJAX发送POST请求
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX发送POST请求</title>
<style>
.box {
width: 640px;
height: 480px;
margin: 200px auto;
border: 1px solid black;
position: relative;
text-align: center;
}
.btn {
width: 120px;
height: 40px;
background-color: blueviolet;
color: white;
font-size: 14px;
border-radius: 10px;
margin-top: 50px;
}
#result {
width: 320px;
height: 240px;
border: 3px solid slateblue;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<button class="btn">发送POST请求</button>
<div id="result"></div>
</div>
<script>
const btn = document.getElementsByClassName("btn")[0];
const result = document.getElementById("result");
btn.addEventListener("click", function () {
console.log("Click!");
// 1、创建对象
const xhr = new XMLHttpRequest();
// 2、初始化 设置请求方法和URL
// 如需设置参数,直接在url后面加?a=100&b=200&c=300
xhr.open("POST", "http://127.0.0.1:8000/server");
// 3、发送
// xhr.send();
xhr.send("a=100&b=200&c=300"); // 传递参数
// 4、事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断(服务端返回了所有的结果)
if (xhr.readyState === 4) {
// 判断响应状态码
if (xhr.status >= 200 && xhr.status < 300) {
// 处理结果 行 头 空行 体
result.innerHTML = xhr.response;
} else {
console.log("请求失败...");
}
}
}
});
</script>
</body>
</html>
服务端代码
// 1、引入Express
const express = require("express");
// 2、创建应用对象
const app = express();
// 3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.post('/server', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
// 服务器允许浏览器发送任意的请求头信息
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Method", "*");
// 设置响应体
response.send("HELLO AJAX POST!");
});
// 4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000 端口监听中....")
})
设置请求头信息
// 1、创建对象
const xhr = new XMLHttpRequest();
// 2、初始化 设置请求方法和URL
// 如需设置参数,直接在url后面加?a=100&b=200&c=300
xhr.open("POST", "http://127.0.0.1:8000/server");
// 3、设置请求头
xhr.setRequestHeader('name', 'ajax'); // 自定义请求头
// 4、发送
// xhr.send();
xhr.send("a=100&b=200&c=300"); // 传递参数
// 5、事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断(服务端返回了所有的结果)
if (xhr.readyState === 4) {
// 判断响应状态码
if (xhr.status >= 200 && xhr.status < 300) {
// 处理结果 行 头 空行 体
result.innerHTML = xhr.response;
} else {
console.log("请求失败...");
}
}
}
服务端响应JSON数据
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务端响应JSON数据</title>
<style>
.box {
width: 640px;
height: 480px;
margin: 200px auto;
border: 1px solid black;
position: relative;
text-align: center;
}
.btn {
width: 120px;
height: 40px;
background-color: blueviolet;
color: white;
font-size: 14px;
border-radius: 10px;
margin-top: 50px;
}
#result {
width: 320px;
height: 240px;
border: 3px solid slateblue;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<button class="btn">发送请求</button>
<div id="result"></div>
</div>
<script>
const btn = document.getElementsByClassName("btn")[0];
const result = document.getElementById("result");
btn.addEventListener("click", function () {
console.log("Click!");
// 1、创建对象
const xhr = new XMLHttpRequest();
// 设置响应体数据类型
// xhr.responseType = 'json';
// 2、初始化 设置请求方法和URL
// 如需设置参数,直接在url后面加?a=100&b=200&c=300
xhr.open("GET", "http://127.0.0.1:8000/server");
// 3、设置请求头
// xhr.setRequestHeader('name', 'ajax'); // 自定义请求头
// 4、发送
xhr.send();
// 5、事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断(服务端返回了所有的结果)
if (xhr.readyState === 4) {
// 判断响应状态码
if (xhr.status >= 200 && xhr.status < 300) {
// 手动转换数据
let data = JSON.parse(xhr.response);
console.log(data);
result.innerHTML = "姓名:" + data.name + " 性别:" + data.sex + " 年龄:" + data.age;
// 自动转换 就设置响应体数据的类型
// result.innerHTML = "姓名:" + xhr.response.name + " 性别:" + xhr.response.sex + " 年龄:" + xhr.response.age;
} else {
console.log("请求失败...");
}
}
}
});
</script>
</body>
</html>
服务端代码
// 1、引入Express
const express = require("express");
// 2、创建应用对象
const app = express();
// 3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/server', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
// 服务器允许浏览器发送任意的请求头信息
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Method", "*");
const data = {
name: "张三",
sex: "男",
age: "18"
}
// 对对象进行字符串转换
let str = JSON.stringify(data);
// 设置响应体
response.send(str);
});
// 4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000 端口监听中....")
})
安装自动重启服务端工具
npm install -g nodemon
启动服务:nodemon 脚本名
如果出现 “因为在此系统上禁止运行脚本”,请按以下步骤解决此问题:
① 搜索Windows PowerShell,右键选择以管理员身份运行
② 输入:set-ExecutionPolicy RemoteSigned
③ 选择Y 或者 A ,就好了
解决IE缓存问题
在链接后面加上:‘http://127.0.0.1:8000?t=’ + Date.now(); 即可
请求超时与网络异常(xhr.timeout = 2000;)
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>请求超时与网络异常</title>
<style>
.box {
width: 640px;
height: 480px;
margin: 200px auto;
border: 1px solid black;
position: relative;
text-align: center;
}
.btn {
width: 120px;
height: 40px;
background-color: blueviolet;
color: white;
font-size: 14px;
border-radius: 10px;
margin-top: 50px;
}
#result {
width: 320px;
height: 240px;
border: 3px solid slateblue;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<button class="btn">发送GET请求</button>
<div id="result"></div>
</div>
<script>
const btn = document.getElementsByClassName("btn")[0];
const result = document.getElementById("result");
btn.addEventListener('click', function () {
console.log("Click!");
// 创建对象
const xhr = new XMLHttpRequest();
// 超时设置 2s
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function () {
alert("网络异常,请稍后重试!!!");
}
// 网络异常回调
xhr.onerror = function () {
alert("你的网络似乎出了一些问题!!!");
}
// 初始化 设置请求方法和URL
// 如需设置参数,直接在url后面加?a=100&b=200&c=300
xhr.open("GET", "http://127.0.0.1:8000/server");
// 发送
xhr.send();
// 事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断(服务端返回了所有的结果)
if (xhr.readyState === 4) {
// 判断响应状态码
if (xhr.status === 200) {
// 处理结果
result.innerHTML = xhr.response;
} else {
console.log("请求失败...");
}
}
}
});
</script>
</body>
</html>
服务端
// 1、引入Express
const express = require("express");
// 2、创建应用对象
const app = express();
// 3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/server', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
// 服务器允许浏览器发送任意的请求头信息
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Method", "*");
setTimeout(() => {
// 设置响应体
response.send("延迟响应...");
}, 3000);
});
// 4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000 端口监听中....")
})
取消请求(xhr.about();)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>取消请求</title>
<style>
.box {
width: 640px;
height: 480px;
margin: 200px auto;
border: 1px solid black;
position: relative;
text-align: center;
}
.btn {
width: 120px;
height: 40px;
background-color: blueviolet;
color: white;
font-size: 14px;
border-radius: 10px;
margin-top: 50px;
}
#result {
width: 320px;
height: 240px;
border: 3px solid slateblue;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<button class="btn" id="sendBtn">发送请求</button>
<button class="btn" id="cancelBtn">取消请求</button>
<div id="result"></div>
</div>
<script>
const sendBtn = document.getElementById("sendBtn");
const cancelBtn = document.getElementById("cancelBtn");
const result = document.getElementById("result");
let xhr = null;
sendBtn.addEventListener('click', function () {
console.log("SendButtonOnClick!");
// 创建对象
xhr = new XMLHttpRequest();
// 超时设置 6s
xhr.timeout = 6000;
// 超时回调
xhr.ontimeout = function () {
alert("网络异常,请稍后重试!!!");
}
// 网络异常回调
xhr.onerror = function () {
alert("你的网络似乎出了一些问题!!!");
}
// 初始化 设置请求方法和URL
// 如需设置参数,直接在url后面加?a=100&b=200&c=300
xhr.open("GET", "http://127.0.0.1:8000/server");
// 发送
xhr.send();
// 事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断(服务端返回了所有的结果)
if (xhr.readyState === 4) {
// 判断响应状态码
if (xhr.status === 200) {
// 处理结果
result.innerHTML = xhr.response;
} else {
console.log("请求失败...");
}
}
}
});
cancelBtn.addEventListener('click', function () {
xhr.abort();
alert("取消请求");
});
</script>
</body>
</html>
解决请求重复发送问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>请求重复发送问题</title>
<style>
.box {
width: 640px;
height: 480px;
margin: 200px auto;
border: 1px solid black;
position: relative;
text-align: center;
}
.btn {
width: 120px;
height: 40px;
background-color: blueviolet;
color: white;
font-size: 14px;
border-radius: 10px;
margin-top: 50px;
}
#result {
width: 320px;
height: 240px;
border: 3px solid slateblue;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<button class="btn" id="sendBtn">发送请求</button>
<button class="btn" id="cancelBtn">取消请求</button>
<div id="result"></div>
</div>
<script>
const sendBtn = document.getElementById("sendBtn");
const cancelBtn = document.getElementById("cancelBtn");
const result = document.getElementById("result");
let xhr = null;
let isSending = false; // 标识变量 是否正在发送AJAX请求
sendBtn.addEventListener('click', function () {
console.log("SendButtonOnClick!");
// 判断标识变量 如果请求正在发送 则取消该请求 创建一个新的请求
if (isSending)
xhr.abort();
// 创建对象
xhr = new XMLHttpRequest();
isSending = true;
// 超时设置 6s
xhr.timeout = 6000;
// 超时回调
xhr.ontimeout = function () {
alert("网络异常,请稍后重试!!!");
}
// 网络异常回调
xhr.onerror = function () {
alert("你的网络似乎出了一些问题!!!");
}
// 初始化 设置请求方法和URL
// 如需设置参数,直接在url后面加?a=100&b=200&c=300
xhr.open("GET", "http://127.0.0.1:8000/server");
// 发送
xhr.send();
// 事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断(服务端返回了所有的结果)
if (xhr.readyState === 4) {
isSending = false;
// 判断响应状态码
if (xhr.status === 200) {
// 处理结果
result.innerHTML = xhr.response;
} else {
console.log("请求失败...");
}
}
}
});
cancelBtn.addEventListener('click', function () {
xhr.abort();
alert("取消请求");
});
</script>
</body>
</html>
jQuery发送AJAX请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 发送 AJAX 请求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>通用型方法</button>
<script>
$('button').eq(0).click(function () {
//请求链接 请求参数 响应回调
$.get('http://127.0.0.1:8000/server', { a: 100, b: 100 }, function (data) {
console.log('GET:' + data);
});
});
$('button').eq(1).click(function () {
//请求链接 请求参数 响应回调 响应类型
// "xml": 预计服务器返回XML格式的数据。
// "html": 预计服务器返回HTML格式的数据。
// "text": 预计服务器返回纯文本数据。
// "json": 预计服务器返回JSON格式的数据。
// "jsonp": 预计服务器返回JSONP格式的数据。
// "script": 预计服务器返回JavaScript代码。
$.post('http://127.0.0.1:8000/server', { a: 100, b: 100 }, function (data) {
console.log('POST:' + data);
}, 'text');
});
$('button').eq(2).click(function () {
$.ajax({
// 请求链接
url: 'http://127.0.0.1:8000/server',
// 请求参数
data: { a: 100, b: 200 },
// 请求类型
type: 'GET',
// 响应体结果类型
dataType: 'text',
// 请求成功回调
success: function (data) {
console.log('jQurey AJAX:' + data);
},
// 超时时间
timeout: 1000,
// 失败的回调
error: function () {
console.log("出错啦!!!");
},
// 头信息
headers: {
c: 300,
d: 400
}
})
});
</script>
</body>
</html>
Axios发送AJAX请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios发送AJAX请求</title>
<!-- https://github.com/axios/axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script>
const btns = document.querySelectorAll('button');
// 配置 baseURL
axios.defaults.baseURL = "http://127.0.0.1:8000";
btns[0].onclick = function () {
axios.get('/server', {
// url 参数
params: {
a: 100,
b: 200
},
// 请求头信息
headers: {
name: 'KingXy',
age: 18
}
}).then(value => {
console.log(value);
})
}
btns[1].onclick = function () {
axios.post('/server',
// 请求体
{
username: "zhangsan",
password: "admin"
},
{
// url 参数
params: {
a: 100,
b: 200
},
// 请求头信息
headers: {
name: 'KingXy',
age: 18
}
}).then(value => {
console.log(value);
})
}
btns[2].onclick = function () {
axios({
// 请求方法
method: 'POST',
url: '/server',
// url 参数
params: {
a: 100,
b: 200
},
// 头信息
headers: {
c: 300,
d: 400
},
// 请求体参数
data: {
username: "admin",
password: 'admin'
}
})
}
</script>
</body>
</html>
使用fetch函数发送AJAX请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用fetch函数发送AJAX请求</title>
</head>
<body>
<button>AJAX请求</button>
<script>
const btn = document.querySelector('button');
btn.onclick = function () {
fetch('http://127.0.0.1:8000/server?vip=me', {
method: 'POST',
headers: {
name: "ZhangSan"
},
body: 'username=admin&password=admin'
}).then(response => {
return response.text();
// return response.json();
}).then(response => {
console.log(response);
})
}
</script>
</body>
</html>
原生JSONP
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP实践</title>
</head>
<body>
用户名:<input type="text" id="username">
<p></p>
<script>
const input = document.querySelector('input');
const p = document.querySelector('p');
function handle(data) {
input.style.border = '1px solid #f00';
p.innerHTML = data.msg;
}
// 绑定输入框失去焦点事件
input.onblur = function () {
// 获取用户的输入值
let username = this.value;
// 创建script标签
const script = document.createElement('script');
// 设置标签的src属性
script.src = 'http://127.0.0.1:8000/server';
// 将script插入到文档中
document.body.append(script);
}
</script>
</body>
</html>
服务端
// 1、引入Express
const express = require("express");
// 2、创建应用对象
const app = express();
// 3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/server', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
// 服务器允许浏览器发送任意的请求头信息
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Method", "*");
const data = {
exist: 1,
msg: '用户名已经存在'
}
let str = JSON.stringify(data);
// 设置响应体
response.send(`handle(${str})`);
});
// 4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000 端口监听中....")
})
jQuery发送JSONP请求
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 发送 jsonp请求</title>
<style>
#result {
width: 160px;
height: 120px;
border: 1px solid black;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<button>发送</button>
<div id="result">
</div>
<script>
$('button').eq(0).click(function () {
$.getJSON('http://127.0.0.1:8000/server?callback=?', function (data) {
console.log(data);
$('#result').html(`
姓名:${data.name}
<br>
爱好:${data.hobby}
`);
});
});
</script>
</body>
</html>
服务端
// 1、引入Express
const express = require("express");
// 2、创建应用对象
const app = express();
// 3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/server', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
// 服务器允许浏览器发送任意的请求头信息
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Method", "*");
const data = {
name: '张三',
hobby: '打篮球'
}
let str = JSON.stringify(data);
// 接收callback参数
let cb = request.query.callback;
// 设置响应体
response.send(`${cb}(${str})`);
});
// 4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000 端口监听中....")
})