【菜狗学前端】原生Ajax笔记（包含原生ajax的get/post传参方式、返回数据等）

这回图片少，给手动替换了~祝看得愉快，学的顺畅！哈哈

一原生ajax经典四步

(一) 原生ajax经典四步

第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）

|-------------------------------------------|
| JavaScript let xhr = new XMLHttpRequest() |

第二步：监听对象状态的变化

监听XMLHttpRequest对象状态的变化

|-------------------------------------------------------------------------------------------------------------|
| JavaScript xhr.onreadystatechange = function () { if (xhr.readyState == 4) { console.log(xhr.response); } } |

或者监听onload事件（请求完成时触发）

|---------------------------------------------------------------------------|
| JavaScript // 等价于下面这么写 xhr.onload = () => { console.log(xhr.response); } |

第三步：配置网络请求（通过open方法）

|-------------------------------------------------------------|
| JavaScript xhr.open("get", "http://127.0.0.1:3001/getData") |

第四步：发送send网络请求

send()参数写的是请求体只有post请求方式才有请求体

就是给后端传递数据

|-----------------------|
| JavaScript xhr.send() |

(二) 原生ajax请求前后端代码示例

1.package.json用到的依赖

2.前端代码：发送ajax请求

3.后端代码：监听到后接收请求并响应

二处理后端响应的数据

(一) 后端相应json数据

前端设置：xhr.responseType = 'json' 将得到的json串转成对象

后端设置：ctx.type = "json"

1.前端代码：发送ajax请求

2.后端代码：监听到后接收请求并响应json格式数据

(二) 后端响应xml的数据

前端设置：xhr.responseType = 'json' 将得到的json串转成对象

后端设置：ctx.type = "xml"

1.前端代码：发送ajax请求

2.后端代码：监听到后接收请求并响应xml格式数据

三前端发送请求传递参数/数据

(一) get传参

1.方式一: query

前端传参：xhr.open('get', 'http://127.0.0.1:3002/getData**?** name = zhangsan & address=zz')

后端获取：ctx.query

2.方式二: params

看network面板：通过params传参并没有payload选项

前端传参：xhr.open("get", "http://127.0.0.1:3002/getData**/** zhangsan**/**18")

后端获取：ctx.params

3.代码示例

前端代码

后端代码

(二) post传参(通过send(请求体))

1.传递"name=zhangsan&age=18"类型数据(setRequestHeader)

前端传参：

xhr.open("post", "http://127.0.0.1:3002/postData")

xhr.send("name=zhangsan&age=18&address=zz")

设置请求头：xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

后端获取：ctx.request.body

代码示例：

前端代码

后端代码

2.传递json数据(setRequestHeader)

前端传参：

xhr.open("post", "http://127.0.0.1:3002/postData")

xhr.send(JSON.stringify({ name: "zhangsan", age: 18 }))

设置请求头：xhr.setRequestHeader('Content-Type', 'application/json')

后端获取：ctx.request.body

代码示例：

前端代码

后端代码：同上

2.传递formData数据(FormData)

前端传参：

xhr.open("post", "http://127.0.0.1:3002/postData")

let formData = new FormData(formEle) 容器 -- formEle元素的数据

xhr.send(formData)

PS:payload的view source跟其他不同

后端获取：ctx.request.body

代码示例：

前端代码

后端代码：同上

四案例：检测用户是否存在

|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
| | |

(一) 前端代码

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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> </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> |

(二) 后端代码

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| JavaScript 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("服务器启动"); }) |

【菜狗学前端】原生Ajax笔记（包含原生ajax的get/post传参方式、返回数据等）

一 原生ajax经典四步

二 处理后端响应的数据

三 前端发送请求传递参数/数据

四 案例：检测用户是否存在

一原生ajax经典四步

二处理后端响应的数据

三前端发送请求传递参数/数据

四案例：检测用户是否存在