一篇文章让你弄懂Ajax-CSDN博客

本文链接：https://blog.csdn.net/qq_41412599/article/details/104672094

传统网站中存在的问题

网速慢的情况下，页面加载时间长，用户只能等待
表单提交后，如果一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

Ajax概述

它是浏览器提供的一套方法，可以实现页面的无刷新更新数据，提高用户浏览网站应用的体验

Ajax的应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表
。。。

Ajax的运行环境

Ajax技术需要运行在网站环境中才能生效，你可以使用Node创建的服务器作为网站服务器

//引入express
const express = require('express');
//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));
//监听端口
app.listen(3000);
//控制台提示
console.log('服务器启动成功');

Ajax运行原理

Ajax相当于浏览器发送请求与接收响应的代理人，以实现不影响用户浏览页面的情况下，局部刷新页面数据，从而提高用户体验。
传统技术与Ajax技术请求的对比

Ajax的实现步骤

创建Ajax对象

var xhr = new XMLHttpRequest();

告诉Ajax请求地址以及请求方式

xhr.open('get',URL,false);

发送请求

xhr.send();

获取服务器端给客户端的响应数据

xhr.onload = function(){
	console.log(xhr.responseText);
}

服务器端响应的数据格式

在真实的项目中，服务器大多数情况下会以JSON对象作为响应的数据格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。

在Http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

Json.parse();//将json字符串转换为json对象

请求参数传递

传统网站表单提交

<form method='get' action="URL">
	<input type="text" name="userName"/>
	<input type="password" name="pwd"/>
	<input type='submit' value="提交">
</form>
//URL?userName=userName.value&pwd=pwd.value

Ajax请求

Get请求方式

<form method='get' action="URL">
	<input type="text" name="userName"/ id="userName">
	<input type="password" name="pwd"/ id="pwd">
	<input type='button' value='提交' id="btn">
</form>
<script type="text/javascript">
	var userName = document.getElementById("userName");
	var pwd = document.getElementById("pwd");
	var btn = document.getElementById("btn");
	//为按钮添加事件
	btn.onclick = function(){
		//创建Ajax对象
		var xhr = new XMLHttpRequest();
		//获取输入框的值
		var userValue = userName.value;;
		var pwdValue = pwd.value;
		//拼接请求参数
		var params = 'userName='+userValue+'&pwd='+pwdValue;
		//配置Ajax请求
		xhr.open('get',"URL?params",false);
		//发送请求
		xhr.send();
		//获取请求数据
		xhr.onload=function(){
			console.log(Json.parse(xhr.responseText));
		}
	}
</script>

Post请求方式

<form method='get' action="URL">
	<input type="text" name="userName"/ id="userName">
	<input type="password" name="pwd"/ id="pwd">
	<input type='button' value='提交' id="btn">
</form>
<script type="text/javascript">
	var userName = document.getElementById("userName");
	var pwd = document.getElementById("pwd");
	var btn = document.getElementById("btn");
	//为按钮添加事件
	btn.onclick = function(){
		//创建Ajax对象
		var xhr = new XMLHttpRequest();
		//获取输入框的值
		var userValue = userName.value;;
		var pwdValue = pwd.value;
		//拼接请求参数
		var params = 'userName='+userValue+'&pwd='+pwdValue;
		//配置Ajax请求
		//xhr.open('get',"URL?params",false);
		xhr.open('post','URL',false);
		//设置请求数据格式
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		//发送请求
		xhr.send(parmas);
		//获取请求数据
		xhr.onload=function(){
			console.log(Json.parse(xhr.responseText));
		}
	}
</script>

在Ajax进行post请求时需要设置请求数据的格式，传递参数需要放在xhr.send(params)请求体中。

请求报文

在Http请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式

在这里插入图片描述

请求参数的格式

application/x-www-form-urlencoded

name=zhangsan&age=20&sex='男'

application/json

{name:'zhangsan',age:'20',sex:'男'}

在请求头中指定Content-type属性的值是application/json,告诉服务器端当前请求参数的格式是json。

Json.stringify()//将json对象转换为json字符串进行请求

注意:get请求是不能提交json对象数据格式的，传统网站的表单提交也是不支持json对象数据格式的。

获取服务器端的响应

Ajax状态码

在创建Ajax对象，配置ajax对象，发送请求，以及接受完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。

0：请求未初始化(还没有调用open())
1：请求已经建立，但是还没有发送还没有调用send())
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了

xhr.readyState //获取Ajax状态码

onreadystatechange事件

当Ajax状态码发生变化时将自动触发该事件。

var xhr = new XMLHttpRequest();
//0 已经创建了Ajax对象。但是还没有对ajax对象进行配置
console.log(xhr.readyState);//0
xhr.open("get",URL,false);;
//1.已经对ajax对象进行配置，但是还没有发送请求
console.log(xhr.readyState);
xhr.onreadystatechange = function(){
	//2.请求已经发送了
	//3.已经接受到了服务器端的部分数据了
	//4.服务器端的响应数据已经接收完成
	console.log(xhr.readyState);
	//对Ajax状态码以及HTTP状态码进行判断
	//通过xhr.status获取HTTP状态码
	//如果Ajax的状态码为4并且HTTP的状态码为200就可以获取响应数据了
	if(xhr.readyState == 4 && xhr.status == 200){
		console.log(xhr.responseText);
	}
}
xhr.send();
//当ajax状态码发生变化的时候发出

两种获取服务器端响应方式的区别

区别描述	onload事件	onreadystatechange事件
是否兼容IE低版本	不兼容	兼容
是否需要判断Ajax状态码	不需要	需要
被调用次数	一次	多次

Ajax错误处理

网络通畅，服务器端能接收到请求，但服务器端返回的结果不是预期结果
可以判断服务器端返回的状态码，分别进行处理。xhr.status获取http状态码
网络畅通，服务器端没有接收到请求，返回404状态码。
检查请求地址是否错误
网络畅通，服务器端能接收到请求，服务器端返回500状态码
服务器端错误，找后端程序员进行沟通
网络中断，请求无法发送到服务器端
会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理

低版本IE浏览器的缓存问题

问题：在低版本的IE浏览器中，Ajax请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值都不相同，可以采用随机值。

xhr.open("get",'URL?t='+Math.random());

Ajax封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复
解决方案：将请求飞马封装到函数中，发送请求时调用函数即可。

ajax({
	//请求方式
	type:'get',
	//type:'post',
	//header:{
	//	'Content-Type':'application/json'
	//},
	//请求地址
	url:URL,
	//请求参数
	data:{
		name:'zhangsan',
		age:20
	},
	//数据处理函数
	success:function(data){
		console.log(data);
	},
	error:function(data){
		console.log('请求失败'+data);
	}
})

函数实现

在函数封装的过程中需要注意的事项

请求参数
1. 请求参数的位置问题
  将请求参数传递到ajax函数内部，在函数内部根据请求范式的不同将请求参数放置在不同位置
  get：放在请求地址的后面
  post：放在send方法中
2. 请求参数格式的问题
  application/x-www-form-urlencoded
  参数名称 = 参数值&参数名称 = 参数值
  application/json
  {
  参数名称:参数值,
  参数名称:参数值
  }
  传递对象数据类型对于函数的调用者更加友好
  在函数内部对象数据类型转换为字符串数据类型更加方便

function ajax(param){
	//存储默认值
	var options = {
		type:'get',
		url:'',
		data:{},
		header:{
			'Content-Type':'application/json'
		},
		success:function(){},
		error:function(){}
	};
	//覆盖默认值
	Object.assign(options,param);
	//创建ajax对象
	var xhr = new XMLHttpRequest();
	//拼接请求参数
	var parmas = '';
	//遍历请求参数对象
	for(var attr in options.data){
		params += attr+'='+options.data[attr]+'&';
	}
	//截取params字符串,去除params变量值最后的&
	params = params.substr(0,params.length-1);
	//判断请求方式
	//get请求
	if(options.type=='get'){
		options.url = options.url+'?'+parmas;
	}
	//配置ajax对象
	xhr.open(options.type,options.url);
	//post请求
	if(options.type=='post'){
		//用户传递的请求参数类型
		var contentType = options.header['Content-Type'];
		//设置请求参数格式的类型
		xhr.setRequestHeader('Content-Type',contentType);
		//判断请求参数格式的类型
		//如果是application/json
		if(contentType == 'application/json'){
			//向服务器端发送json类型的数据格式
			xhr.send(Json.stringify(options.data));
		}else{
			//向服务器端发送x-www-form-urlencoded格式的数据
			xhr.send(params);
		}
	}else{
		//发送请求
		xhr.send();		
	}
	//监听xhr对象下面的onload事件
	//当xhr对象接收完成响应数据后触发
	xhr.onload = function(){
		//获取响应头的数据格式类型
		var responseHeader = xhr.getResponseHeader('Content-Type');
		//获取服务器端响应的数据
		var responseText = xhr.responseText;
		//如果响应头的数据格式类型包含application/json
		if(responseHeader.includes('application/json')){
			//将json字符串转换为json对象
			responseText = Json.parse(responseText);
		}
		//判断请求返回的HTTP状态码
		//当HTTP状态码等于200的时候
		if(xhr.status == 200){
			//请求成功 调用处理成功情况的函数
			options.success(responseText,xhr);
		}else{
			//请求失败 调用处理失败情况的函数
			options.error(responseText,xhr);
		}	
	}
}

Ajax应用案例

注意：案例代码为部分逻辑代码，并非可执行代码

验证邮箱地址的唯一性
1. 获取文本框并为其添加离开焦点事件
2. 离开焦时，检测用户输入的邮箱地址是否符合规则
3. 如果不符合规则，阻止程序向下执行并给出提示信息
4. 向服务器端发送请求，检测邮箱地址是否被别人注册
5. 根据服务器端返回值决定客户端显示何种信息

<input id="email" type="email"/>
<p id="info"></p>
<script type="text/javascript">
	//获取页面中的元素
	var emailEle = document.getElementById("email");
	var infoEle = document.getElementById("info");
	//当文本框离开焦点以后
	emailEle.onblur = function(){
		//获取用户输入的邮箱地址
		var emailValue = this.value;
		//验证邮箱地址的正则表达式
		var emailReg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/；
		//如果用户输入的邮箱地址不符合规则
		if(!emailReg.test(emailValue)){
			//提示用户输入不合法
			infoEle.innerHTML = '请输入符合规则的邮箱地址';
			//阻止程序向下执行
			return;
		}
		//向服务器发送请求
		ajax({
			type:'get',
			url:URL,
			success:function(data){
				infoEle.innerHTML = data;
			},
			error:function(data){
				infoEle.innerHTML = data;
			}
		})
	}
</script>

搜索框内容自动提示
1. 获取搜索框并为其添加用户输入事件
2. 获取用户输入的关键字
3. 向服务器端发送请求并携带关键字作为请求参数
4. 将响应数据显示在搜索框底部

<input type="text" id="search">
<ul id="list-box">
	<li>提示文字显示的地方</li>
</ul>
<script type="text/javascript">
	//获取搜索框
	var searchEle = document.getElementById('search');
	//获取提示文字的存放容器
	var listBox = document.getElementById("list-box");
	//存储定时器的变量
	var timer = null;
	//当用户在文本框中输入的时候触发
	searchEle.oninput = function(){
		//清除上一次开启的定时器
		clearTimeout(timer);
		//获取用户输入的内容
		var key = this.value;
		//判断用户是否输入了内容
		if(key.trim().length == 0){
			//将提示下拉框隐藏
			listBox.style.display = 'none';
			//阻止程序向下执行
			return;
		}
		//开启定时器，让请求延迟发送
		timer = setTimeout(function(){
			//向服务器端发送请求
			//向服务器端索取和用户输入关键字向关的内容
			ajax({
				type:'get',
				url:URL,
				data:{
					key:key
				},
				success;function(result){
					console.log(result);
				}
			})
		},800);
	}
</script>

省市区三级联动
1. 通过接口获取省份信息
2. 使用javascript获取到省份市区下拉框元素
3. 将服务器端返回的省份信息显示在下拉框中
4. 为下拉元素添加表单值改变事件(onchange)
5. 当用户选择省份时，根据省份ID获取城市信息
6. 当用户选择城市时，根据城市Id获取县城信息

<select id="province">
	<option>请选择省份</option>
</select>
<select id="city">
	<option>请选择城市</option>
</select>
<select id="area">
	<option>请选择区域</option>
</select>
<script type="text/javascript">
	//获取省市区下拉框元素
	var provinceEle = document.getElementById("province");
	var cityEle = document.getElementById("city");
	var areaEle = document.getElementById("area");
	//获取省份信息
	ajax({
		type:'get',
		url:URL,
		success:function(data){
			//将请求返回的数据显示到省份下拉框中
		}
	})；
	//为省份下拉框添加值改变事件
	provinceEle.onchange = function(){
		//获取省份的唯一标识ID
		var pid = this.value;
		//根据省份的唯一标识ID获取城市信息
		ajax({
			type:'get',
			url:URL,
			data:{
				id:pid
			},
			success:function(data){
				//将请求的城市数据显示到城市的下拉框中
			}
		})
	}
	//为区域下拉框添加事件
	cityEle.onchange = function(){
		//获取城市的唯一标识ID
		var cid = this.value;
		//根据城市的唯一标识Id获取区域信息
		ajax({
			type:'get',
			url:URL,
			data:{
				id:cid
			},
			success:function(data){
				//处理数据逻辑
			}
		})
	}
</script>

Ajax的Form表单提交

FormData对象的作用

模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
异步上传二进制文件

FormData对象的使用

准备HTML表单
将HTML表单转化为FormData对象
提交表单对象

<form id="form">
	<input type="text" name="username"/>
	<input type="password" name="password">
	<input type="button" id="btn">
</form>
<script type="text/javascript">
	//获取按钮
	var btn = document.getElementById("btn");
	//获取表单
	var form = document.getElementById("form");
	//为按钮添加事件
	btn.onclick = function(){
		//将普通的HTML表单转换为表单对象
		var formData = new FormData(form);
		//创建Ajax对象
		var xhr = new XMLHttpRequest();
		//对ajax对象进行配置
		xhr.open("post",URL);
		//发送请求
		xhr.send(formData);
		//监听事件
		xhr.onload = function(){
			//判断HTTP状态码
			if(xhr.status == 200){
				//响应数据处理逻辑
			}
		}
	}
	
</script>

FormData对象的实例方法

获取表单对象中属性的值

fromData.get('key');
//key:指的是表单控件name属性的值

设置表单对象中属性的值

formData.set("key","value");
//key:指表单控件name属性的值
//value:指表单控件value属性的值

删除表单对象中属性的值

formData.delete("key");

向表单控件中追加属性的值

formData.append("key","value");

FormData二进制文件上传

主要针对图片，音频，视频等文件

<input type="file" id="file"/>
<script>
	var file = document.getElementById("file");
	//当用户选择文件时
	file.onchange = function(){
		//创建空表单对象，用于存储选择文件
		var formData = new FormData();
		//将用户选择的二进制文件追加到表单对象中
		formData.append('key'，this.files[0]);
		//key:是数据的属性名称，有服务器端开发人员定义，通过接口文档告知
		//value:具体要添加的数据,也就是this.files[0]
		//创建ajax对象
		var xhr = new XMLHttpRequest();
		//配置ajax
		xhr.open('post',URL);
		//发起ajax请求
		xhr.send(formData);
	}
</script>

FormData文件上传进度展示

<div id="bar"></div>//进度条
//当用户选择文件的时候
file.onchange = function(){
	//文件上传过程中持续触发onprogress事件
	xhr.upload.onprogress = function(ev){
		//当前上传文件大小、文件总大小再将结果转换为百分数
		//将结果赋值给进度条的宽度属性
		bra.style.width = (ev.loaded/ev.total)*100+'%';
	}
}

FromData文件上传图片即时预览

在我们将图片上传到服务器端以后，服务器端通常会将图片地址作为响应数据传递到客户端，客户端可以从响应数据中获取图片地址，然后将图片在显示在页面中。

Ajax请求限制

Ajax只能向自己的服务器发送请求。比如现在有一个A网站，有一个B网站，A网站中的HTML文件只能向A网站网服务器发送Ajax请求，B网站中的HTML文件只能向B网站中发送Ajax请求,但是A网站是不能向B网站发送Ajax请求的，同理，B网站也不能向A网站发送Ajax。

之所以出现这种情况，主要是由浏览器的同源政策

什么是同源

如果两个页面拥有相同的协议，域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
例如：
http://www.example.com:80//dir/index.html
http://www.example.com:80//dir/page/index.html(同源)
https://www.example.com:80//dir/index.html(不同源)
http://www.example.com:81//dir/index.html(不同源)
http://www.ex.com:80//dir/index.html(不同源)

同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的。
随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。

使用JSONP解决同源政策限制问题

jsonp是json with padding的缩写，它不属于Ajax请求，但它可以模拟ajax请求。主要是利用script,img,link这些标签，它们允许访问不同源的资源。

将不同源的服务器请求地址写在script标签的src属性中

<script src="url"></script>

服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数

const data = "ajax({name:'zhangsan',age:"20"})";
response.send(data);

在客户端全局作用域要先定义函数ajax,必须在该script标签之前定义

function ajax(data){
	console.log(data);//{name:'zhangsan',age:"20"}将其作为data的实参传入ajax函数中调用
}

在ajax函数内部对服务器端返回的数据进行处理

JSONP代码优化

客户端需要将函数名称传递到服务器端。
将script请求的发送变成动态请求
封装jsonp函数

<script type="text/javascript">
	function ajax(data){
		//处理服务器端响应数据的逻辑
	}
</script>
<input type="button" value="发送数据请求" id="btn">
<script type=""text/javascript>
	//获取按钮
	var btn = document.getElementById("btn");
	//为按钮添加点击事件
	btn.onclick = function(){
		jsonp({
			url:'URL',
			success:function(data){
				//逻辑处理数据
			},
			data:{
				"name":'zhangsan'
			}
		});
	}
	function jsonp(options){
		//动态创建script标签
		var script = document.createElement("script");
		//获取随机函数名
		var ajaxRandom = 'ajax'+Math.random().toString().replace(".","");
		//将success方法挂载到全局作用域
		window[ajaxRandom]= options.success;
		//获取请求参数
		var data = options.data;
		var params = "";
		//拼接请求参数
		for(key in data){
			params += "&"+key+"="+data[key];
		}
		//为script标签添加src属性
		script.src = options.url+'?callback='+ajaxRandom+params;
		//将script标签追加到页面中
		document.body.appendChild(script);
		//为script标签添加onload事件
		script.onload = function(){
			//将body中的该标签删除掉
			document.body.removeChild(script);
		}
	}
</script>

CORS跨域资源共享

CORS:全称为Cross-origin resource sharing,即跨域资源共享，它允许浏览器向跨服务器发送Ajax请求，克服了Ajax只能同源使用的限制
在这里插入图片描述

origin:协议+域名+端口号

在跨域进行访问资源时，浏览器会自动在请求头中加入origin字段，origin字段包含的是请求端的域名信息，包含协议，域名，以及端口号，服务器端会根据该域名信息决定是否同意请求，无论服务器是否同意请求，服务器端都会给予正常的请求响应信息。如果服务器端同意请求，会在响应头中加入Access-Control-Access-Origin字段，反之不会。浏览器会根据响应字段中是否含有Access-Control-Access-Origin字段来判断是否同意这次请求。

//服务器端代码
app.use("/cors",(req,res)=>{
	//设置允许客户端访问该路由名单
	res.header("Access-Control-Allow-Origin","*");
	//*表示不限制跨域访问，允许所有的客户端进行访问
	//设置允许客户端使用的请求方法
	res.header("Access-Control-Allow-Methods",'get,post');
	//允许get和post方法
	//设置响应数据
	res.send('允许跨域访问');
})

访问非同源数据服务器端解决方案

同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制
在这里插入图片描述
因此我们可以利用同源的服务器去请求不同源的服务器，获取数据之后再通过同源服务响应该资源。

跨域请求之cookie的携带
在这里插入图片描述
HTTP是一种无状态的协议，即服务器不会保留与客户端交易的任何状态。也就是说服务器无法判断用户的身份。如果客户端向服务器发起请求，服务器需要记录该用户的身份时，就需要响应给客户端浏览器一个cookie。cookie实际上就是一个小段的文本信息。客户端浏览器会把cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该cookie一同提交给服务器。服务器检查该Cookie，从而来辨认用户状态。
在这里插入图片描述
withCredentials属性

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。

withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，true允许携带cookie信息，默认false。

Access-Control-Allow-Credentials：true允许客户端发送请求时携带cookie

用户登录状态的检测功能的实现

<div class="container">
	<form id="loginForm">
		<div>
			<label>用户名</label>
			<input type="text" placeholder="请输入用户名" name="username">
		</div>
		<div>
			<label>密码</label>
			<input type="password" placeholder="请输入用户密码" name="password">
		</div>
		<input type="button" value="登录" id="loginBtn">
		<input type="button" value="检测用户登录状态" id="checkLogin">
	</form>
</div>
<script>
	//获取登录按钮
	var loginBtn = document.getElementById('loginBtn');
	//获取检测登录状态按钮
	var checkLogin = document.getElementById('checkLogin');
	//获取登录表单
	var loginForm = document.getElementById("loginForm");
	//为登录按钮绑定点击事件
	loginBtn.onclick = function(){
		//将HTML表单转换为formData表单对象
		var formData = new FormData(loginForm)
		//创建ajax对象
		var xhr = new XMLHttpRequest();
		//对ajax对象进行配置
		xhr.open("post",Url);
		//当发送跨域请求时，携带cookie信息
		xhr.withCredentials = true;
		//发送请求
		xhr.send(formData);
		//监听服务器端给予的响应内容
		xhr.onload = function(){
			console.log(xhr.responseText);
		}
	}
	//为检测登录按钮绑定事件
	checkLogin.onclick = function(){
		//创建ajax对象
		var xhr = new XMLHttpRequest();
		//对ajax对象进行配置
		xhr.open("get",Url);
		//当发送跨域请求时，携带cookie信息
		xhr.withCredentials = true;
		//发送请求
		xhr.send();
		//监听服务器端给予的响应内容
		xhr.onload = function(){
			console.log(xhr.responseText);
		}
	}
</script>

//服务器端代码
app.use((req,res,next)=>{
	//设置允许客户端访问该路由名单
	res.header("Access-Control-Allow-Origin","*");
	//*表示不限制跨域访问，允许所有的客户端进行访问
	//设置允许客户端使用的请求方法
	res.header("Access-Control-Allow-Methods",'get,post');
	//允许get和post方法
	//允许客户端发送跨域请求时携带cookie信息
	res.header('Access-Control-Allow-Credentials',true);
	next();
})

RESTful风格的API

传统请求地址回顾

GET http://www.example.com/getUsers  //获取用户列表
GET http://www.example.com/getUser?id=1  //获取某一用户的信息
POST http://www.example.com/modifyUser   //修改用户信息
GET http://www.example.com/deleteUser?id=1 //删除用户信息

在传统的请求中，无论获取，删除，修改都是使用的GET，POST方法，这就导致了语义不够明确。

RESTful API概述

一套关于设计请求的规范，使得请求更加具有语义。

GET：用于获取数据
POST：添加数据
PUT：用于更新数据
DELETE：删除数据

RESTful API 的实现
在这里插入图片描述

//服务器端代码

//获取用户列表
app.get('/users',(req,res)=>{
	
})

//获取某一用户具体的信息
app.get('/users/:id',(req,res)=>{
	
})

//删除某一个用户
app.delete("/users/:id",(req,res)=>{
	
})

//修改某一用户信息
app.put("/users/:id",(req,res)=>{
	
})