一文搞懂Ajax和Axios
站长
· 阅读数 29
一、Ajax技术概述与发展历程
Ajax技术是现代Web开发中的一项关键技术，它通过异步通信机制，极大地改善了用户的在线体验。
起源与基本概念
- Ajax（Asynchronous JavaScript and XML-异步JavaScript和XML）诞生于2005年，旨在解决Web应用中页面全刷新导致的用户体验问题。
- 核心特性是异步通信，允许在不刷新页面的情况下与服务器交换数据（又称无刷新更新页面）。
- 初始实现依赖于JavaScript发起HTTP请求，以XML作为数据格式，后发展为支持多种数据格式，如JSON。
举个栗子🌰：
- 搜索引擎的实时提示：我们在百度输入关键词时不需要重新加载就可以实时反馈提示，这就使用了Ajax技术。
发展历程
- 异步请求的引入：改变了传统的同步交互模式，使得Web应用更加动态。
- XMLHttpRequest的普及：作为Ajax的基石，提供了在后台与服务器通信的能力。
- 数据格式的多样化：从XML扩展到JSON等格式，简化了数据处理。
- 框架和库的涌现：如jQuery，简化了Ajax的使用，提供了更友好的API。
- 现代Web开发的融合：与前端框架（React、Angular、Vue.js）结合，成为构建SPA的关键技术。
- 实时性的增强：与WebSocket等技术整合，满足更高实时性需求的应用。
Ajax技术自诞生以来，不断演进和完善，已成为现代Web开发不可或缺的一部分。它不仅优化了用户与网页的交互方式，也推动了Web开发向更灵活、动态的方向发展。随着新技术的不断涌现，Ajax将继续在Web开发的未来扮演重要角色。
AJAX 最吸引人的就是它的异步特性，也就是说它可以在不重新刷新页面的情况下与服务器通信、交换数据或更新页面
过程图如下：
为避免混淆，这里重新梳理一下 Ajax 概念：
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
- AJAX 不是编程语言，而是一种基于现有标准的新方法
- AJAX 最大的优点是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容
- XMLHttpRequest 只是实现 Ajax 的一种方式
总的来说，AJAX是浏览器与服务器进行数据通信的技术
二、Ajax应用-经典4步
1.创建对象（使用XMLHttpRequest）
let xhr = new XMLHttpRequest();
2.监听对象状态的变化
最常见的状态变化：服务器成功响应了数据。这时就会1.触发load事件，2.触发readystatechange事件，readyState变成了4
//方法1：监听XMLHttpRequest对象状态的变化
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.response);}}
//方法2：监听onload事件（请求完成时触发）
xhr.onload = () => {
console.log(xhr.responseText);//打印服务器响应过来的数据
}
以下是 XMLHttpRequest 对象的2个重要的属性：
属性 描述 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化0：请求未初始化1：服务器连接已建立，open()已被调用2：请求已接收，send()已被调用3：请求处理中，responseText已包含部分数据4：请求已完成，且响应已就绪 status 200："OK"，404：未找到页面
3.连接服务器(配置网络请求)
xhr.open('get','http://127.0.0.1:3000/getData')
-
参数说明
参数 说明 method 必填 请求方式，常见的有 get、post、put url 必填 服务端URL地址，请求的API async 是否异步，默认为 true(异步) user 可选的用户名用于认证用途；默认为 null password 可选的密码用于认证用途，默认为 null
4.发出网络请求
xhr.send()// send括号()里可以给服务器传递数据，不过只有post请求方式才需要传递
原生Ajax请求前后端代码示例
1.package.json用到的依赖
"dependencies": {
"@koa/router": "^12.0.0",
"axios": "^0.27.2",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"express": "^4.17.1",
"express-session": "^1.17.2",
"koa": "^2.13.4",
"koa-body": "^5.0.0",
"koa-bodyparser": "^4.4.0",
"koa-logger": "^3.2.1",
"koa-static": "^5.0.0",
"koa2-cors": "^2.0.6",
"moment": "^2.30.1",
"mongodb": "^4.4.0",
"nprogress": "^0.2.0",
"qs": "^6.10.2"
},
2.前端代码：发送Ajax请求
<script>
// 第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）
let xhr = new XMLHttpRequest()
// 第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）
// 方式一 onreadystatechange
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.response);
}
}
// 方式二 onload
// xhr.onload = () => {
// console.log(xhr.response);
// }
// 第三步：配置网络请求（通过open方法）
xhr.open("get", "http://127.0.0.1:3001/getData")
// 第四步：发送send网络请求
xhr.send()
</script>
3.后端代码：监听到后接收请求并响应
const Koa = require("koa");
const cors = require("koa2-cors");
const logger = require("koa-logger");
const Router = require("@koa/router"); //路由
const koaBody = require("koa-body");
const app = new Koa();
const router = new Router(); //路由
app.use(cors());
app.use(logger());
app.use(koaBody());
// 写了一个接口 请求方式是get 请求的api是/getData
// 请求返回的状态码是200 返回的结果是helloajax
router.get("/getData", async (ctx, next) => {
ctx.status = 200
ctx.body = "helloajax"
})
app.use(router.routes())
//允许任意方式发送的请求
router.allowedMethods()
//监听端口
app.listen(3001,()=>{
console.log("服务器跑起来了");
})
三、处理后端响应的数据
响应json数据
- 前端设置：xhr.responseType = 'json' 将得到的json串转成对象
- 后端设置：ctx.type = "json"
1.前端代码：发送ajax请求
<script>
// 1)创建对象
let xhr = new XMLHttpRequest()
// 2)绑定load事件
xhr.onload = function () {
// 在network面板中 找到响应头，看到响应的数据类型是：
// Content-Type:application/json; charset=utf-8
console . log (xhr. response ); //从{"name":"哈哈"}变成{name:"哈哈"}
}
// 可以通过xhr.responseType这种方式，将得到的json串转成对象
xhr. responseType = 'json'
// 3)配置网络请求
xhr.open('get', 'http://127.0.0.1:3001/json')
// 4)发送请求
xhr.send()
</script>
2.后端代码：监听到后接收请求并响应json格式数据
router.get("/json", async (ctx) => {
ctx.status = 200
ctx. type = "json"
ctx. body = {
name : "哈哈"
//无论是json格式还是对象格式都会被浏览器自动转为json格式传输，所以都可
//"name": "哈哈"
}
})
响应xml的数据
- 前端设置：xhr.responseType = 'json' 将得到的json串转成对象
- 后端设置：ctx.type = "xml"
1.前端代码：发送ajax请求
<script>
let xhr = new XMLHttpRequest()
xhr.onload = () => {
//用xhr.responseXML获取返回数据，不用xhr.response
console.log(xhr. responseXML);
}
xhr.open("get", "http://127.0.0.1:3001/xml")
xhr.send()
</script>
2.后端代码：监听到后接收请求并响应xml格式数据
router.get("/xml", async (ctx) => {
ctx.status = 200
ctx. type = "xml"
ctx. body = `
<content>
<name>哈哈</name>
</content>`
})
四、传递参数/数据
(一) get传参(通过url传参)
1.方式一: query
前端传参：xhr.open('get', 'http://127.0.0.1:3002/getData ? name**=**zhangsan & address=zz')
后端获取：router.get("/getData", (ctx) => {}
ctx.query
2.方式二: params
前端传参：xhr.open("get", "http://127.0.0.1:3002/getData /zhangsan/18")
后端获取：router.get("/getData /:name/:age", (ctx) => {}
ctx.params
3.代码示例
- 前端代码
<script>
let xhr = new XMLHttpRequest()
xhr.onload = () => {
console.log(xhr.response);
}
xhr.responseType = "json"
// ----------------------------------------------------
// get传参的第一种方式: 通过query传参
xhr.open('get', 'http://127.0.0.1:3002/getData?name=zhangsan&address=zz')
// 重点: 看network面板// 请求地址b：Request URL:
// 在network里面,有一个payload,表示传递给服务器的参数
// payload -- Query String Parameters 查询字符串
// view source: 查看参数的源码
// view parsed: 解析参数 name=zhangsan&age=18&address=zz
// 注意:传递的数据非常重要 如果你调用接口失败了，你要考虑是否是你的参数传递问题
// ----------------------------------------------------
// get传参的第二种方式: 通过params传参
xhr.open("get", "http://127.0.0.1:3002/getData/zhangsan/18")
// 看network面板：通过params传参 并没有payload选项
xhr.send()
</script>
- 后端代码
// get -- query传参
router.get("/getData", (ctx) => {
ctx.status = 200
// 前端请求服务器传递的参数 后端又响应给我们
ctx. body = ctx. query
console.log(ctx.query.name);
})
// get -- params传参 动态路由
router.get(" /getData/:name/:age", (ctx) => {
ctx.status = 200
// 前端请求服务器传递的参数 后端又响应给我们
ctx.body = ctx.params
})
(二) post传参(通过send(请求体))
post传参的几种格式
看network面板中，请求头request Header里面 有一个
Content-Type:text/plain;charset=UTF-8 ，表示传递的是纯文本的数据参数类型
post，put请求可以不仅可以通过url把数据扔给服务器，也可以通过请求体把数据扔给服务器。把数据通过请求体扔给服务器，也是有多个格式的：
-
text/plain
- 默认的请求体类型，如果不设置请求头字段 Content-type，默认就是该种类型
- 求体只要是字符串就可以，后端不会做任何处理
-
application/x-www-form-urlencoded
- 需要设置请求头 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
- 要求请求体是查询字符串，如 a=100&b=200
- 点击提交按钮提交表单（非Ajax），如果 Method 是 Post，默认请求体内容就是 x-www-form-urlencoded
-
application/json
- 设置设置请求头 xhr.setRequestHeader('Content-type', 'application/json');
- 要求请求体是 json 格式的字符串
-
multipart/form-data
1.传递"name=zhangsan&age=18"类型数据(setRequestHeader)
前端传参：
设置请求头：xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
请求头一定要在 open() 之后，send() 之前设置
xhr.send("name=zhangsan&age=18&address=zz")
后端获取：ctx.request.body
代码示例：
- 前端代码
<script>
let xhr = new XMLHttpRequest()
xhr.onload = () => {
console.log(xhr.response);
}
xhr.responseType = "json"
xhr.open("post", "http://127.0.0.1:3002/postData")
xhr. setRequestHeader ( 'Content-Type' , 'application/x-www-form-urlencoded' )
// post传参 需要把参数放在请求体中
// send('请求体')
xhr. send ( "name=zhangsan&age=18&address=zz" )
</script>
- 后端代码
router.post("/postData", (ctx) => {
ctx.status = 200
// 接受post传递过来的数据
ctx. body = ctx. request . body
console.log(ctx.request.body.name);
})
2.传递json数据(setRequestHeader)
前端传参：
设置请求头：xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(JSON.stringify({ name: "zhangsan", age: 18 }))
后端获取：ctx.request.body
代码示例：
- 前端代码
<script>
let xhr = new XMLHttpRequest()
xhr.onload = () => {
console.log(xhr.response);
}
xhr.responseType="json"
xhr.open("post", "http://127.0.0.1:3001/postData")
// 设置请求头
// application / json 表示以json形式传递
xhr. setRequestHeader ( 'Content-Type' , 'application/json' )
xhr. send ( JSON . stringify ({ name : "zhangsan" , age : 18 }))
</script>
- 后端代码：同上
2.传递formData数据(FormData)
请求体（send()的方法的参数）除了是字符串，也可以是 formData 对象。如果请求体是 FormData 对象，浏览器会自动设置请求头字段 Content-type 为 multipart/form-data。
FormData不仅可以传递普通数据，还可以上传文件。
a. 传递普通数据
前端传参：
let formData = new FormData(formEle) 容器 -- formEle元素的数据
xhr.send(formData)
PS:payload的view source跟其他不同
后端获取：ctx.request.body
代码示例：
- 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- form表单有默认的提交事件 -->
<!-- onsubmit="return false" 阻止默认事件的 -->
<form onsubmit="return false" class="info">
<input type="text" name="username">
<input type="text" name="pwd">
</form>
<button class="send">发送请求</button>
</head>
<body>
<script>
let formEle = document.querySelector(".info")
let btnEle = document.querySelector(".send")
btnEle.onclick = function () {
let xhr = new XMLHttpRequest()
xhr.responseType = "json"
xhr.onload = () => {
console.log(xhr.response);
}
xhr.open("post", "http://127.0.0.1:3001/postData")
// 容器 -- formEle元素的数据
// 创建formData容器时,传递一个formDOM元素
// 自动将form元素中的表单控制添加到formData中
let formData = new FormData (formEle)
// send中不只可以放字符串,还可以放formdata对象
xhr. send (formData)
}
</script>
</body>
</html>
- 后端代码：同上
b. 上传文件
(三) 非ajax用form表单发送请求传递参数/上传数据
五 基于Ajax封装的Axios请求方法(常用)
(一) Axios 介绍
Axios 是前端最流行的 ajax 请求库 ，没有之一，react、vue官方都推荐使用 的 Ajax 请求库。
PS：与ajax、fetch相比，请求体不需用JSON.stringify()方法从对象转为json字符串
1.Axios特点
- 基于 XMLHttpRequest + Promise 的异步的 Ajax 请求库
- 浏览器端、Node端都可以使用
- 支持请求和响应拦截器
- 支持请求取消
- 批量发送多个请求
- 支持请求与响应的数据转换（二次封装）
2.Axios引入方式
<script src="axios脚本文件地址"</script>//下载后在页面引入
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"</script>//CDN
(二) Axios的基本使用
1. async await等方式使用Axios(简单--但是需注意使用限制)
由于
async/await是ECMAScript 2017中的一部分，而且在IE和一些旧的浏览器中不支持，所以使用时务必要小心。
- axios(config): 通用/最本质的发送意类型请求的方式。
- axios(url, config): 第一个参数是地址，第二个参数是配置项。
- axios.request(config): 等同于axios(config) （了解）
- axios.get(url, config): 发get请求 (查)
- axios.delete(url, config): 发delete请求 (删)
- axios.post(url, data, config): 发post请求 (增)
- axios.put(url, data, config): 发put请求 (改)
- axios.patch(url[, data[, config]]) 发送patch请求
// 简单但有限制方式-async await方式 axios.get()
async function getUser() { try { const response = await axios. get ( '/user?ID=12345' ); console.log(response); } catch (error) { console.error(error); } }
// 稍麻烦但无限制方式-promise.then()方式 axios.get().then()
axios. get ( '/user?ID=12345' )
. then(function (response) {
// 处理成功情况
console.log(response);
})
. catch(function (error) {
// 处理错误情况
console.log(error);
})
. finally(function () {
// 总是会执行
});
// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// 总是会执行
});
2. 更多方式使用Axios(麻烦)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入axio-->
< script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" ></ script >
</head>
<body>
<button id="btn">使用axios发请求</button>
<script>
const btn = document.querySelector("#btn");
btn.onclick = async function(){
// 使用方式零 async await 方式(简单但有限制)
const res = await axios. get ( "https://tenapi.cn/v2/toutiaohot" )
// const res = await axios.get("/toutiaohot",{
// baseURL:"https://tenapi.cn/v2",
// timemout:5000
// })
console.log(res);
// 使用方式零点五 axios.get() axios.post() (稍复杂但无限制)
// axios.get("/toutiaohot",{
// baseURL:"https://tenapi.cn/v2",
// timemout:5000
// }).then(res => {
// console.log(res);
// }).catch(reason => {
// console.log('请求失败！', reason);
// });
// 使用方式一 axios函数使用一个对象作为参数
// axios({
// method:"GET",
// url:'https://tenapi.cn/v2/toutiaohot'
// }).then(res => {
// console.log(res);
// }).catch(reason => {
// console.log('请求失败！', reason);
// });
// 使用方式二 第一个参数是url，第二个参数是请求配置对象
// axios("/toutiaohot",{
// method:"GET",
// baseURL:"https://tenapi.cn/v2",
// timemout:5000
// }).then(res => {
// console.log(res);
// }).catch(reason => {
// console.log('请求失败！', reason);
// });
// 使用方式三 axios.request() 方法同 axios 本身
// axios.request("/toutiaohot",{
// method:"GET",
// baseURL:"https://tenapi.cn/v2",
// timemout:5000
// }).then(res => {
// console.log(res);
// }).catch(reason => {
// console.log('请求失败！', reason);
// });
}
</script>
</body>
</html>
(三) Axios请求配置项
1.常用的请求配置项
url、method、baseURL、headers、data、timeout、responseType
注意：
上面那些配置项全部适用于axios(config)方法
但使用 axios.post( url , data, config)等 方法时
- 作为请求体data不写在配置项config里，而在外面
- url也是
{
// `url` 是用于请求的服务器 URL
url: '/user',
// `method` 是创建请求时使用的方法
method: 'get', // default
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `headers` 是即将被发送的请求头
headers: {
'Content-type': 'appliation/json'
},
// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时，必须是以下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属：FormData, File, Blob
// - Node 专属： Stream
data: {
firstName: 'Fred'
},
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间，请求将被中断
timeout: 1000,
// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
}
- 每次发送请求时设置配置项
axios({
配置项...});
axios(url, {
配置项...});
axios.get(url, {
配置项...});
axios.post(url, data, {
配置项...});
- 设置全局配置项，将被应用到每一个请求。
axios.defaults.baseURL = "http://api.example.com";
axios.defaults.timeout = 2000;
axios.defaults.headers = {token:"abc",a:1,b:2}
2.代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="btn1">get</button>
<button id="btn2">post</button>
<button id="btn3">put</button>
<button id="btn4">delete</button>
<script>
const btn1 = document.querySelector("#btn1");
const btn2 = document.querySelector("#btn2");
const btn3 = document.querySelector("#btn3");
const btn4 = document.querySelector("#btn4");
// 做全局配置
axios.defaults.baseURL = "http://localhost:3000"
axios.defaults.timeout = 5000;
axios.defaults.headers.token = "xxxx"; // 不用管
// get
btn1.onclick = function () {
// axios.get("/users?a=1&b=2").then(res => {
axios.get("/users", {
params: { name: "malu" } // 也是配置问号传参
}).then(res => {
console.log(res.data);
}).catch(reason => {
console.log('请求失败：', reason);
})
}
// post
btn2.onclick = function () {
// Content-Type: application/json
let user = {
id: 3,
name: "xq"
};
// axios.post中第二个参数是请求体, 第三个参数是配置对象
// 传递的参数的类型是:Content-Type: application/json
// 不需要通过JSON.stringify包了
axios.post("/users", user, {}).then(res => {
console.log(res.data);
}).catch(reason => {
console.log('请求失败：', reason);
})
}
// put
btn3.onclick = function () {
let user = {
name: "malu666"
};
axios.put("/users/1", user, {}).then(res => {
console.log(res.data);
}).catch(reason => {
console.log('请求失败：', reason);
})
}
// delete
btn4.onclick = function () {
axios.delete("/users/3").then(res => {
console.log(res.data);
}).catch(reason => {
console.log('请求失败：', reason);
})
}
</script>
</body>
</html>
六 浏览器自带的Fetch请求方法(不常用)
Fetch API 被设计用来取代 XMLHttpRequest，它提供了许多与 XMLHttpRequest 相同的功能，但被设计成更具可扩展性和高效性。
Fetch API 的主要特点包括：
- Promise 风格的 API：Fetch API 提供了 Promise 风格的 API，可以更加方便地处理异步请求和响应。
- 更加灵活的请求和响应：Fetch API 可以发送任何类型的请求，包括 GET、POST、PUT、DELETE 等，也可以接收任何类型的响应，包括文本、JSON、二进制数据等。
- 更加强大的响应处理：Fetch API 提供了一系列的响应处理方法，包括 json()、text()、blob()、arrayBuffer() 等，可以更加方便地处理响应数据。
(一) 主要步骤
- 发送fetch请求
- 把返回的ReadableStream可读流处理成json数据
const data = await res.json() ;
另：fetch()、res.json()都返回promise对象
get，post，put，delete请求区别：
get默认，而其他发送其他方式请求需要设置配置项如请求方式method、请求体body
const res = await fetch("http://httpbin.org/put", {
method : "put" , // 修改数据
headers : {
'Content-type' : 'application/json' ,
},
body : JSON . stringify (user)
} )
(二) 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- fetch为浏览器自带方法，所以不需要引入组件啥的 -->
<!-- CRUD 增删改查 -->
<button id="btn1">get请求</button>
<button id="btn2">post请求</button>
<button id="btn3">put请求</button>
<button id="btn4">delete请求</button>
<script>
let btn1 = document.querySelector("#btn1");
let btn2 = document.querySelector("#btn2");
let btn3 = document.querySelector("#btn3");
let btn4 = document.querySelector("#btn4");
// get请求--(默认method: "get")
btn1.onclick = async function () {
// fetch()、res.json()都返回promise对象
const res = await fetch ( "http://httpbin.org/get?a=1" )
// 把返回的ReadableStream可读流处理成json数据
const data = await res. json ();
console.log(data);
}
// post请求
btn2.onclick = async function () {
let user = { name: "malu", age: 10, sex: "man", score: { chinese: 110, maths: 90, english: 88 } }
const res = await fetch("http://httpbin.org/post", {
method : "post" ,
headers : {
'Content-type' : 'application/json' ,
},
body : JSON . stringify (user)
})
const data = await res.json()
console.log("data:", data)
}
// put请求
btn3.onclick = async function () {
let user = { id: 1, name: "malu", age: 10, sex: "woman", score: { chinese: 66, maths: 44, english: 99 } }
const res = await fetch ( "http://httpbin.org/put" , {
method : "put" , // 修改数据
headers : {
'Content-type' : 'application/json' ,
},
body : JSON . stringify (user)
})
const data = await res.json()
console.log("data:", data)
}
// delete请求(这个是假的接口跑不通，只做写法演示)
btn4.onclick = async function () {
const res = await fetch ( "http://httpbin.org/delete/1" , {
method : "delete" ,
headers : {
'Content-type' : 'application/json' ,
}
})
const data = await res. json ()
console.log("data:", data)
}
</script>
</body>
</html>
七 案例：检测用户是否存在
(一) 原生Ajax方法解决
1.前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>用户注册</h1>
<form>
<ul>
<li>用户名：<input type="text" name="username" id="user">
<span id="msg"></span>
</li>
<li>密码：<input type="text" name="pws"></li>
<li>确认密码：<input type="text" name="pws"></li>
<li><input type="submit" value="注册"></li>
</ul>
</form>
<script>
// 获取元素
let unameEle = document.getElementById("user")
let msg = document.getElementById("msg")
// 绑定失焦事件
unameEle.onblur = function () {
// 获得用户名值
//let uname = unameEle.value.trim()
let uname = this.value.trim();
//console.log(uname);
// 发送请求
// 声明ajax对象
let xhr = new XMLHttpRequest()
// 监听onload状态
xhr.onload = () => {
// 如果返回true--用户名可用
msg.textContent = xhr.response.msg
msg.style.color = xhr.response.msgColor
}
// 后台Boolean类型传到前端变字符串类型，需设置xhr.responseType = "json"
// 从json串转为对象
xhr.responseType = "json"
// post版本
// 配置请求，传递参数
xhr.open("post", `http://127.0.0.1:3001/check`)
// 设置请求头,请求参数为x-www-form的格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 发送请求
xhr.send(`uname=${uname}`)
// get版本
// 配置请求，传递参数
// xhr.open("get", `http://127.0.0.1:3001/check?uname=${uname}`)
// 发送请求
// xhr.send()
}
</script>
</body>
</html>
2.后端代码
const Koa = require("koa");
const cors = require("koa2-cors");
const logger = require("koa-logger");
const Router = require("@koa/router");
const koaBody = require("koa-body");
const app = new Koa();
const router = new Router();
app.use(cors());
app.use(logger());
app.use(koaBody());
// 模拟从数据库中取到的用户信息
let userData = ["wc", "xq", "admin"];
// post版本
router.post("/check", (ctx) => {
ctx.status = 200
ctx.type = 'json'
// 如果在users中找到相同的则返回该用户名已经被注册
console.log(ctx.request.body.uname);
if (userData.includes(ctx.request.body.uname)) {
ctx.body = {
code: 0,
msg: "用户名已被占用",
msgColor: "red"
}
// 反之
} else {
ctx.body = {
code: 1,
msg: "用户名可用",
msgColor: "green"
}
}
})
// get版本
// 需求:如果在users中找到相同的则返回该用户名已经被注册,反之
// router.get("/check", (ctx) => {
// ctx.type = 'json'
// // console.log(ctx.query.name.trim());
// // 如果在users中找到相同的则返回该用户名已经被注册
// if (userData.includes(ctx.query.name.trim())) {
// ctx.body = {
// code: 0,
// msg: "用户名已被占用",
// msgColor: "red"
// }
// // 反之
// } else {
// ctx.body = {
// code: 1,
// msg: "用户名可用",
// msgColor: "green"
// }
// }
// })
app.use(router.routes())
router.allowedMethods()
app.listen(3001, () => {
console.log("服务器启动");
})
(二) Axios方法解决
仅修改部分前端代码（后端代码不变）
<script>
// 获取元素
let unameEle = document.getElementById("user")
let msg = document.getElementById("msg")
// 绑定失焦事件
unameEle.onblur = async function () {
// 获得用户名值
let unameValue = this.value.trim();
// 用Axios发送请求
let uname = { uname : unameValue }
const res = await axios. post (
"http://127.0.0.1:3001/check" ,
uname,
{
headers : {
'Content-type' : 'application/json'
},
// 默认
// responseType: 'json'
}
);
// 修改样式
// 只有Axios返回值套了一层data
msg.textContent = res. data . msg
msg.style.color = res. data . msgColor
}
</script>
(三) Fetch方法解决
仅修改部分前端代码（后端代码不变）
<script>
// 获取元素
let unameEle = document.getElementById("user")
let msg = document.getElementById("msg")
// 绑定失焦事件
unameEle.onblur = async function () {
// 获得用户名值
let unameValue = this.value.trim();
// 用Fetch发送请求
let uname = { uname : unameValue }
const res = await fetch ( "http://127.0.0.1:3001/check" , {
method : "post" ,
headers : {
'Content-type' : 'application/json'
},
body : JSON . stringify (uname)
})
const data = await res. json ()
// 修改样式
msg.textContent = data. msg
msg.style.color = data. msgColor
}
</script>
转载自:https://juejin.cn/post/7358336719166111796