第1章:原生AJAX
1.1Ajax简介
AAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。
通过 AAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。
AAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
1.2 XML 简介
XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 HTML 类似,不同的是 HTML中都是预定义标签,而XML中没有预定义标签全都是自定义标签,用来表示一些数据。
比如说有一个学生数据:
name="孙悟空";age=18;gender="男";
用 XML 表示:
<student>
<name>孙悟空</name>
<age>18</age>
<gender>男</gender>
</student>
现在以及被json取代了,使用json表示{"name":"孙悟空","age":18,"gender":"男"}
1.3AJAX的特点
1.3.1 AJAX 的优点
- 可以无需刷新页面而与服务器端进行通信。
- 允许你根据用户事件【鼠标事件、键盘事件、表单事件等】来更新部分页面内容。
1.3.2 AJAX 的缺点
- 没有浏览历史,不能回退
- 存在跨域问题(同源)
- SEO 不友好
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
// request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(request,response)=>{
//设置响应
response.send('hello!express');
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中......");
});
1.4 AJAX 的使用
1.4.1 核心对象
XMLHttpRequest
,
AJAX
的所有操作都是通过该对象进行的。
1.4.2 使用步骤
1) 创建 XMLHttpRequest
对象
var xhr = new XMLHttpRequest();
2) 设置请求信息
xhr.open(method, url);
//
可以设置请求头,一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3) 发送请求
xhr.send(body) //get
请求不传
body
参数,只有
post
请求使用
4) 接收响应
//xhr.responseXML
接收
xml
格式的响应数据
//xhr.responseText
接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}
关于JSON请求的相关设置
//server.js文件修改
//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.send('HELLO AJAX');
});
//可以接受任意类型的请求
app.all('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
response.send('HELLO AJAX POST');
});
//可以接受任意类型的请求
app.all('/json-server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*');
//响应一个数据
const data = {
name:'hjj'
};
//对对象进行字符串转换
const str = JSON.stringify(data);
//设置响应体
response.send(str);
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中......");
});
//JSON.html
<!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>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素对象
const result = document.getElementById("result");
//绑定键盘按下事件
window.onkeydown = function(){
//1.发送请求
const xhr = new XMLHttpRequest();
//设置相应体的数据类型
xhr.responseType = 'json';
//2.初始化
xhr.open('GET','http://127.0.0.1:8000/json-server');
//3.发送
xhr.send();
//4.事件绑定 处理服务器返回的结果
xhr.onreadystatechange = function(){
//判断(服务器返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 2xx就是成功的状态
if(xhr.status >= 200 &&xhr.status < 300){
//处理结果 行 头 空行 体
//响应行
//result.innerHTML = xhr.response;
//1.手动对数据转换
//let data = JSON.parse(xhr.response);
//result.innerHTML = data.name;
//console.log(xhr.response);
//2.自动对数据转换
console.log(xhr.response);
result.innerHTML=xhr.response.name;
}
}
}
}
</script>
</body>
</html>
1.4.3 解决 IE 缓存问题
问题:
在一些浏览器中
(IE),
由于缓存机制的存在,
ajax
只会发送的第一次请求,剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式:
浏览器的缓存是根据
url
地址来记录的,所以我们只需要修改
url
地址即可避免缓存问题
xhr.open("get","/testAJAX?t="+Date.now());
//server.js文件内容
//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.send('HELLO AJAX');
});
//可以接受任意类型的请求
app.all('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
response.send('HELLO AJAX POST');
});
//可以接受任意类型的请求
app.all('/json-server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*');
//响应一个数据
const data = {
name:'hjj'
};
//对对象进行字符串转换
const str = JSON.stringify(data);
//设置响应体
response.send(str);
});
//针对IE缓存
app.get('/ie',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO IE');
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中......");
});
//4-IE缓存.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #258;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取元素
const btn = document.getElementsByTagName('button')[0];
const result = document.querySelector('#result');
//绑定事件
btn.addEventListener('click',function(){
//1.发送请求
const xhr = new XMLHttpRequest();
//2.初始化
xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());
//3.发送
xhr.send();
//4.事件绑定 处理服务器返回的结果
xhr.onreadystatechange = function(){
//判断(服务器返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 2xx就是成功的状态
if(xhr.status >= 200 &&xhr.status < 300){
//处理结果 行 头 空行 体
//响应行
result.innerHTML=xhr.response;
}
}
}
})
</script>
</body>
</html>
1.4.4 AJAX 请求状态
xhr.readyState
可以用来查看请求当前的状态
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
0:
表示
XMLHttpRequest
实例已经生成,但是
open()
方法还没有被调用。
1:
表示
send()
方法还没有被调用,仍然可以使用
setRequestHeader()
,设定
HTTP
请求的头信息。
2:
表示
send()
方法已经执行,并且头信息和状态码已经收到。
3:
表示正在接收服务器传来的
body
部分的数据。
4:
表示服务器数据已经完全接收,或者本次接收已经失败了
//网络请求超时与网络异常.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>
#result{
width: 200px;
height: 100px;
border: solid 1px #258;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取元素
const btn = document.getElementsByTagName('button')[0];
const result = document.querySelector('#result');
//绑定事件
btn.addEventListener('click',function(){
//1.发送请求
const xhr = new XMLHttpRequest();
//超时设置 2s 设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
alert("网络异常,请稍后重试哦bb~")
}
//网络异常回调
xhr.onerror = function(){
alert("你的网络似乎出了一些问题哦bb~")
}
//2.初始化
xhr.open("GET",'http://127.0.0.1:8000/delay');
//3.发送
xhr.send();
//4.事件绑定 处理服务器返回的结果
xhr.onreadystatechange = function(){
//判断(服务器返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 2xx就是成功的状态
if(xhr.status >= 200 &&xhr.status < 300){
//处理结果 行 头 空行 体
//响应行
result.innerHTML=xhr.response;
}
}
}
})
</script>
</body>
</html>
//6-取消请求.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>取消请求</title>
</head>
<body>
<button>点击发送请求</button>
<button>点击取消请求</button>
<script>
//获取元素对象
const btns = document.querySelectorAll('button');
let x=null;
btns[0].onclick = function(){
x = new XMLHttpRequest();
x.open("GET",'http://127.0.0.1:8000/delay');
x.send();
}
//取消请求abort
btns[1].onclick = function(){
x.abort();
}
</script>
</body>
</html>
//7-重复请求的问题.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>取消请求</title>
</head>
<body>
<button>点击发送请求</button>
<script>
//获取元素对象
const btns = document.querySelectorAll('button');
let x=null;
//标识变量
let isSending = false;//是否正在发送AJAX请求
btns[0].onclick = function(){
//判断标示变量
if(isSending) x.abort();//如果正在发送 则取消该请求 创建一个新的请求
x = new XMLHttpRequest();
//修改 表示变量的值
isSending=true;
x.open("GET",'http://127.0.0.1:8000/delay');
x.send();
x.onreadystatechange = function(){
if(x.readyState ===4){
//修改标识变量
isSending = false;
}
}
}
//取消请求abort
btns[1].onclick = function(){
x.abort();
}
</script>
</body>
</html>
//上面几段代码涉及到的js文件server.js
//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.send('HELLO AJAX');
});
//可以接受任意类型的请求
app.all('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
response.send('HELLO AJAX POST');
});
//可以接受任意类型的请求
app.all('/json-server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*');
//响应一个数据
const data = {
name:'hjj'
};
//对对象进行字符串转换
const str = JSON.stringify(data);
//设置响应体
response.send(str);
});
//针对IE缓存
app.get('/ie',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO IE');
});
//延时响应
app.get('/delay',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
setTimeout(()=>{
//设置响应体
response.send('延时响应');
},3000)
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中......");
});
第 2 章:jQuery 中的 AJAX
2.1 get 请求
$.get(url, [data], [callback], [type])
url:
请求的
URL
地址。
data:
请求携带的参数。
callback:
载入成功时回调函数。
type:
设置返回内容格式,
xml, html, script, json, text, _default
。
//server.js文件
//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.send('HELLO AJAX');
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中......");
});
//GET.html文件
<!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>
#result{
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3.发送
xhr.send();
//4.事件绑定 处理服务器返回的结果
//on when 当。。。的时候
//readystate 是 xhr对象中的属性,表示状态0 1 2 3 4
//change 改变
xhr.onreadystatechange = function(){
//判断(服务器返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 2xx就是成功的状态
if(xhr.status >= 200 &&xhr.status < 300){
//处理结果 行 头 空行 体
//1.响应行
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
result.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>
2.2 post 请求
$.post(url, [data], [callback], [type])
url:
请求的
URL
地址。
data:
请求携带的参数。
callback:
载入成功时回调函数。
type:
设置返回内容格式,
xml, html, script, json, text, _default
。
//server.js文件
//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.send('HELLO AJAX');
});
app.post('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX POST');
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中......");
});
//POST.html文件
<!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>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素对象
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover",function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('POST','http://127.0.0.1:8000/server');
//3.发送
xhr.send('a=100&b=200&c=300');
//4.事件绑定 处理服务器返回的结果
xhr.onreadystatechange = function(){
//判断(服务器返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 2xx就是成功的状态
if(xhr.status >= 200 &&xhr.status < 300){
//处理结果 行 头 空行 体
//1.响应行
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
</html>
2.3 设置请求头信息
【open后,send前】
//server.js文件
//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.send('HELLO AJAX');
});
//可以接受任意类型的请求
app.all('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
response.send('HELLO AJAX POST');
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中......");
});
//POST.html文件修改部分
<body>
<div id="result"></div>
<script>
//获取元素对象
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover",function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','hjj');
//3.发送
xhr.send('a=100&b=200&c=300');
//4.事件绑定 处理服务器返回的结果
xhr.onreadystatechange = function(){
//判断(服务器返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 2xx就是成功的状态
if(xhr.status >= 200 &&xhr.status < 300){
//处理结果 行 头 空行 体
//1.响应行
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
第 3 章:跨域
3.1 同源策略
同源策略
(Same-Origin Policy)
最早由
Netscape
公司提出,是浏览器的一种安全策略。
同源: 协议、域名、端口号 必须完全相同。违背同源策略就是跨域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同域请求</title>
</head>
<body>
<h1>hjj</h1>
<button>点击获取用户数据</button>
<script>
const btn = document.querySelector('button')
btn.onclick = function(){
const x = new XMLHttpRequest();
//因为这里是同域问题,所以url可以简写
x.open("GET",'/data');
//发送
x.send();
//检查状态
x.onreadystatechange = function(){
if(x.readyState === 4){
if(x.status >= 200 && x.status < 300){
console.log(x.response);
}
}
}
}
</script>
</body>
</html>
//server.js
const express = require('express');
const app = express();
app.get('/home',(request,response)=>{
//响应一个页面
response.sendFile(__dirname+'/index.html');
});
app.get('/data',(request,response)=>{
response.send('用户数据');
});
app.listen(9000,()=>{
console.log("服务已经启动...");
});
3.2 如何解决跨域
3.2.1 JSONP
1.JSONP 是什么
JSONP(JSON with Padding)
,是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来,只支持 get
请求。
2.JSONP 怎么工作的?
在网页有一些标签天生具有跨域能力,比如:
img link iframe script
。
JSONP
就是利用
script
标签的跨域能力来发送请求的。
3. JSONP 的使用
27.尚硅谷_AJAX-jsonp的实现原理_哔哩哔哩_bilibili
1.
动态的创建一个
script
标签
var script = document.createElement("script");
2.
设置
script
的
src
,设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
3.
将
script
添加到
body
中
document.body.appendChild(script);
4.
服务器中路由的处理
router.get("/testAJAX" , function (req , res) {
console.log("收到请求
");
var callback = req.query.callback;
var obj = {
name:"孙悟空",
age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});
4.jQuery 中的 JSONP
<!DOCTYPE
html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>Title</
title
>
</
head
>
<
body
>
<
button
id=
"btn"
>
按钮
</
button
>
<
ul
id=
"list"
></
ul
>
<
script
type=
"text/javascript"
src=
"./jquery-1.12.3.js"
></
script
>
<
script
type=
"text/javascript"
>
window
.onload =
function
() {
var
btn
=
document
.
getElementById
(
'btn'
)
btn
.onclick =
function
() {
$
.
getJSON
(
"http://api.douban.com/v2/movie/in_theaters?callback=?"
,
function
(data) {
console
.
log
(data);
//
获取所有的电影的条目
var
subjects
= data.subjects;
//
遍历电影条目
for
(
var
i
=
0
;
i
<
subjects
.
length
;
i
++){
$
(
"#list"
).
append
(
"<li>"
+
subjects
[
i
].title+
"<br />"
+
"<img src=
\"
"
+
subjects
[
i
].images.large+
"
\"
>"
+
"</li>"
);
}
});
}
}
</
script
>
</
body
>
</
html
>
3.2.2 CORS
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
30.尚硅谷_AJAX-设置CORS响应头实现跨域_哔哩哔哩_bilibili
1.CORS 是什么?
CORS
(
Cross-Origin Resource Sharing
),跨域资源共享。
CORS
是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get 和 post
请求。
跨域资源共享标准新增了一组
HTTP
首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
2.CORS 怎么工作的?
CORS
是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。
3.CORS 的使用
主要是服务器端的设置:
router.get("/testAJAX" , function (req , res) {
//通过 res
来设置响应头,来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
res.set("Access-Control-Allow-Origin","*");
res.send("testAJAX 返回的响应");
});
4.安装nodemon报错记录
PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> Get-ExecutionPolicy
Restricted
PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> Set-ExecutionPolicy RemoteSigned
PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> nodemon server.js
[nodemon] 3.1.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node server.js`
node:internal/modules/cjs/loader:1137
throw err;
^
Error: Cannot find module 'express'
Require stack:
- C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX\server.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)
at Module._load (node:internal/modules/cjs/loader:975:27)
at Module.require (node:internal/modules/cjs/loader:1225:19)
at require (node:internal/modules/helpers:177:18)
at Object.<anonymous> (C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX\server.js:2:17)
at Module._compile (node:internal/modules/cjs/loader:1356:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ 'C:\\Users\\jinju\\Desktop\\前端学习\\练习版本\\AJAX\\原生AJAX\\server.js' ]
}
Node.js v18.19.0
[nodemon] app crashed - waiting for file changes before starting...
npm install express
PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> npm install express
added 65 packages, and audited 66 packages in 7s
13 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> nodemon server.js
[nodemon] 3.1.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node server.js`
服务已经启动,8000 端口监听中......