前端学习笔记-Ajax篇

MarisolHu2024-11-12 8:12

第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 表示:

html 复制代码 
<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>

现在以及被json取代了，使用json表示{"name":"孙悟空","age":18,"gender":"男"}

1.3AJAX的特点

1.3.1 AJAX 的优点

  1. 可以无需刷新页面而与服务器端进行通信。
  2. 允许你根据用户事件【鼠标事件、键盘事件、表单事件等 **】**来更新部分页面内容。

1.3.2 AJAX 的缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题(同源)
  3. SEO 不友好
css 复制代码 
//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请求的相关设置

css 复制代码 
//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 端口监听中......");
});
css 复制代码 
//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());

css 复制代码 
//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 端口监听中......");
});
css 复制代码 
//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: 表示服务器数据已经完全接收，或者本次接收已经失败了

css 复制代码 
//网络请求超时与网络异常.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>
css 复制代码 
//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>
css 复制代码 
//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>
css 复制代码 
//上面几段代码涉及到的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 。

css 复制代码 
//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 端口监听中......");
});
css 复制代码 
//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 。

css 复制代码 
//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 端口监听中......");
});
css 复制代码 
//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前】

css 复制代码 
//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 端口监听中......");
});
css 复制代码 
//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 公司提出，是浏览器的一种安全策略。
同源： 协议、域名、端口号 必须完全相同。违背同源策略就是跨域。

css 复制代码 
<!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>
css 复制代码 
//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报错记录

css 复制代码 
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 端口监听中......
相关推荐
还是大剑师兰特28 分钟前
D3的竞品有哪些，D3的优势，D3和echarts的对比
前端·javascript·echarts
王解29 分钟前
【深度解析】CSS工程化全攻略（1）
前端·css
一只小白菜~35 分钟前
web浏览器环境下使用window.open()打开PDF文件不是预览，而是下载文件？
前端·javascript·pdf·windowopen预览pdf
方才coding40 分钟前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT44 分钟前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建（module）
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS（跨域资源共享）：原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model（详细图文注释）
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django
张张打怪兽1 小时前
css-50 Projects in 50 Days(3)
前端·css
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08文件或文件夹名称中有空格如何批量去除09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能