分布式数据库前端学习条记-Ajax篇 - Powered by Discuz! Archiver

海哥发表于 6 天前

前端学习条记-Ajax篇

第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 不友爱
https://i-blog.csdnimg.cn/direct/e4fe5577b43e470ca2f3751095c0f347.png
https://i-blog.csdnimg.cn/direct/f1273760500f4cf7bb3bb8f2b5da0c91.png
//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 端口监听中......");
}); https://i-blog.csdnimg.cn/direct/310859cf1b1f42edba6a5f28baef3c60.png
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');
   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');
   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.onclick = function(){
         x = new XMLHttpRequest();
         x.open("GET",'http://127.0.0.1:8000/delay');
         x.send();
   }
   //取消请求abort
   btns.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.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.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, , , )    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');
   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> https://i-blog.csdnimg.cn/direct/b7189fc2e6bf49a09e577f161c441f65.png

2.2 post 请求

$.post(url, , , )    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 端口监听中......");
}); https://i-blog.csdnimg.cn/direct/43dd26fb74944ffe9d1d40d3641db449.png
https://i-blog.csdnimg.cn/direct/55225465815e44c3855a55d88632d431.png
https://i-blog.csdnimg.cn/direct/b7f337d8d9ee4524a3b7ff7dcba9d78e.png
//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> https://i-blog.csdnimg.cn/direct/1dfb17de214a4127ab2be353d64ca894.png
第 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
3.1.7
to restart at any time, enter `rs`
watching path(s): *.*
watching extensions: js,mjs,cjs,json
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 (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
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
3.1.7
to restart at any time, enter `rs`
watching path(s): *.*
watching extensions: js,mjs,cjs,json
starting `node server.js`
服务已经启动，8000 端口监听中......

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

前端学习条记-Ajax篇