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

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

一 原生ajax经典四步

(一) 原生ajax经典四步

  1. 第一步:创建网络请求的AJAX对象(使用XMLHttpRequest)

JavaScript
let xhr = new XMLHttpRequest()

  1. 第二步:监听对象状态的变化
  1. 监听XMLHttpRequest对象状态的变化

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

  1. 或者监听onload事件(请求完成时触发)

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

  1. 第三步:配置网络请求(通过open方法)

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

  1. 第四步:发送send网络请求

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

就是给后端传递数据

JavaScript
xhr.send()

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

1.package.json用到的依赖

JSON
{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "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"
  },
  "author": "",
  "license": "ISC"
}

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

HTML
<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.后端代码:监听到后接收请求并响应

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());

// 写了一个接口  请求方式是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请求

HTML
<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格式数据

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());

router.get("/json", async (ctx) => {
    ctx.status = 200
    ctx.type = "json"
    ctx.body = {
        name: "哈哈"
        //无论是json格式还是对象格式都会被浏览器自动转为json格式传输,所以都可
        //"name": "哈哈"
    }
})

app.use(router.routes())

router.allowedMethods()

app.listen(3001, () => {
    //启动服务器并监听特定端口的方法
    console.log("服务器跑起来了");
})

(二) 后端响应xml的数据

  • 前端设置:xhr.responseType = 'json' 将得到的json串转成对象
  • 后端设置:ctx.type = "xml"

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

JavaScript
<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格式数据

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());

router.get("/xml", async (ctx) => {
    ctx.status = 200
    ctx.type = "xml"
    ctx.body = `
    <content>
    <name>哈哈</name>
    </content>`
})

app.use(router.routes())
router.allowedMethods()

app.listen(3001, () => {
    console.log("服务器跑起来了");
})

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

(一) 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.代码示例

  1. 前端代码

HTML
<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:http://127.0.0.1:3000/get?name=zhangsan&age=18&address=zz

    // 在network里面,有一个payload,表示传递给服务器的参数
    // payload -- Query String Parameters 查询字符串
    // view source: 查看参数的源码
    // view parsed: 解析参数   name=zhangsan&age=18&address=zz

    // 注意:前端给后端传递的数据非常重要 如果你调用接口失败了,你要考虑是否是你的参数传递问题
    // ----------------------------------------------------
    // get传参的第二种方式: 通过params传参
    // 看network面板:通过params传参 并没有payload选项
    // xhr.open("get", "http://127.0.0.1:3002/getData/zhangsan/18")

    xhr.send()
</script>

  1. 后端代码

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());

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

app.use(router.routes())
router.allowedMethods();
app.listen(3002, () => {
    console.log("running in http://127.0.0.1:3002");
})

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

默认情况下,看network面板中,请求头request Header里面 有一个

Content-Type:text/plain;charset=UTF-8  -- 表示给服务器默认传递的是纯文本的参数类型

再看payload,里面显示的是 Request Payload

name=zhangsan&age=18&address=zz

但是在开发中,需要传递json格式

1)x-www-form-urlencode

2)json

3)formdata

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

代码示例:

  1. 前端代码

HTML
<script>
    let xhr = new XMLHttpRequest()
    xhr.onload = () => {
        console.log(xhr.response);
    }
    xhr.responseType = "json"
    xhr.open("post", "http://127.0.0.1:3002/postData")
    // post传参 需要把参数放在请求体中
    // send('请求体')
    xhr.send("name=zhangsan&age=18&address=zz")
</script>

  1. 后端代码

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());

router.post("/postData", (ctx) => {
    ctx.status = 200
    // 接受post传递过来的数据
    ctx.body = ctx.request.body
    console.log(ctx.request.body.name);
})

app.use(router.routes())
router.allowedMethods()

app.listen(3002, () => {
    console.log("running in http://127.0.0.1:3002");
})

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/x-www-form-urlencoded')

        或者xhr.setRequestHeader('Content-Type', 'application/json')

后端获取:ctx.request.body

代码示例:

  1. 前端代码

HTML
<script>
    let xhr = new XMLHttpRequest()
    xhr.onload = () => {
        console.log(xhr.response);
    }
    xhr.responseType="json"
    xhr.open("post", "http://127.0.0.1:3001/postData")
    // 设置请求头
    // 类型1: application / json  表示以json形式传递
    // xhr.setRequestHeader('Content-Type', 'application/json')
    // 类型2: application / x-www-form-urlencoded 表示以form-urlencoded形式传递给了后端
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    
    // xhr.send(JSON.stringify({ name: "zhangsan", age: 18 }))
    xhr.send(JSON.stringify({ name: "zhangsan", age: 18 }))
</script>

  1. 后端代码:同上

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

代码示例:

  1. 前端代码

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>
    <form action="" 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元素的数据
            let formData = new FormData(formEle)
            xhr.send(formData)
        }
    </script>
</body>

</html>

  1. 后端代码:同上

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

(一) 前端代码

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/816341.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QQ农场-phpYeFarm添加数据教程

前置知识 plugin\qqfarm\core\data D:\study-project\testweb\upload\source\plugin\qqfarm\core\data 也就是plugin\qqfarm\core\data是一个缓存文件,如果更新农场数据后,必须要删除才可以 解决种子限制(必须要做才可以添加成功) 你不更改加入了id大于2000直接删除种子 D…

Vulnhub靶机 DC-2渗透详细过程

VulnHub靶机 DC-2 打靶 目录 VulnHub靶机 DC-2 打靶一、将靶机导入到虚拟机当中二、攻击方式主机发现端口扫描服务探针爆破目录web渗透信息收集扫描探针登录密码爆破SSH远程登录rbash提权 一、将靶机导入到虚拟机当中 靶机地址&#xff1a; https://www.vulnhub.com/entry/dc…

进制转换总结

目录 其它进制转十进制 十进制转其它进制 二八十六进制间转换 2进制(BIN): 0,1&#xff0c;满2进1.以0b或0B开头。8进制(OCT): 0-7 &#xff0c;满8进1.以数字0o或者0O开头表示。 10进制(DEC): 0-9&#xff0c;满10进1。 16进制(HEX): 0-9及A(10)-F(15)&#xff0c;满16进…

未来的前端框架技术发展趋势

​ 福利开篇推荐 老铁们,你们是否平常开发有这样的问题: 1.需要公网访问内网的一个服务? 2.需要一个开发环境直接支持https,但是弄本地证书既不合法,又很麻烦? 3.本地有强劲的服务器,需要对公网提供服务,但是拉宽带既贵,又麻烦? 4.有云主机,但同时云主机需要访问内部的服…

sample gpt 无限长上下文

参考地址 https://aistudio.baidu.com/projectdetail/7723195 import mathimport paddle import paddle.nn as nn import paddle.nn.functional as Fclass MaskMultiHeadAttention(nn.Layer):def __init__(self, hidden_size, num_heads):super(MaskMultiHeadAttention, self…

信息系统项目管理师0051:管理基础(4信息系统管理—4.1管理方法—4.1.1管理基础)

点击查看专栏目录 文章目录 第四章 信息系统管理4.1管理方法4.1.1管理基础1.层次结构2.系统管理第四章 信息系统管理 在信息技术和数据资源要素的推动下,社会各领域已经并正在加速进入数字化的全新发展时期,基于智能、网络和大数据的新经济业态正在形成,从“数字融合”向“数…

Spark开窗函数之ROW

Spark 1.5.x版本以后,在Spark SQL和DataFrame中引入了开窗函数,其中比较常用的开窗函数就是row_number 该函数的作用是根据表中字段进行分组,然后根据表中的字段排序;其实就是根据其排序顺序,给组中的每条记录添 加一个序号;且每组的序号都是从1开始,可利用它的这个特性进行分组…

【Java虚拟机】三色标记、增量更新、原始快照、记忆集与卡表

三色标记、增量更新、原始快照、记忆集与卡表 三色标记基本原来错标、漏标错标漏标 增量更新基本原理写屏障 原始快照基本原理为什么G1使用原始快照而不用增量更新。 记忆集与卡表 三色标记 基本原来 三色标记是JVM的垃圾收集器用于标记对象是否存活的一种方法。 三色是指黑…

学习java第四十三天

Spring AOP相关术语 &#xff08;1&#xff09;切面&#xff08;Aspect&#xff09;&#xff1a;切面是通知和切点的结合。通知和切点共同定义了切面的全部内容。 &#xff08;2&#xff09;连接点&#xff08;Join point&#xff09;&#xff1a;指方法&#xff0c;在Spring…

物联网智能仓储系统毕业设计报告

物联网智能仓储系统毕业设计报告 一、设计背景 随着经济的持续发展和电子商务的蓬勃兴起&#xff0c;仓储物流行业面临着前所未有的挑战。传统的仓储管理方式已无法满足现代商业对效率和精度的要求。因此&#xff0c;设计一款物联网智能仓储系统显得尤为重要&#xff0c;它将…

Servlet实现常用功能及其他方法

getParameter 获取body或url中指定的key/value值 String classIdreq.getParameter("classId"); getQueryString 获取请求的所有查询参数key,values1 String queryStringreq.getQueryString(); from表单提交 前端通过from表单提交用户名和密码 <!DOCTYPE htm…

DataX配置案例@Source:MySQL,Sink:HDFS [SQLMode] 及空值如何存储

HFDS Writer并未提供nullFormat参数&#xff1a;也就是用户并不能自定义null值写到HFDS文件中的存储格式。默认情况下&#xff0c;HFDS Writer会将null值存储为空字符串&#xff08;&#xff09;&#xff0c;而Hive默认的null值存储格式为\N。所以后期将DataX同步的文件导入Hiv…

Windows本地搭建开源的stable-diffusion-webui用于AIGC文生图

开源的stable-diffusion-webui来自于https://github.com/AUTOMATIC1111/stable-diffusion-webui 在windows搭建似乎比较方便些,需要python3.8;比如CUDA模式下,显卡驱动比较好安装(若使用cuda需要更新显卡驱动在https://www.nvidia.com/download/index.aspx?lang=en-us )…

docker swarm 详细安装配置步骤

在 Linux 环境下安装和配置 Docker Swarm 的详细步骤。假设您已经安装了 Docker&#xff0c;并且使用的 Docker 版本 > 1.12&#xff0c;因为从这个版本开始&#xff0c;Swarm 模式已集成到 Docker 引擎中。这里以 Ubuntu 为例&#xff0c;但基本步骤适用于其他 Linux 发行版…

Zookeeper和Kafka的部署

目录 一、Zookeeper的基本概念 1. Zookeeper定义 2. Zookeeper工作机制 3. Zookeeper特点 4. Zookeeper数据结构 5. Zookeeper应用场景 5.1 统一命名服务 5.2 统一配置管理 5.3 统一集群管理 5.4 服务器动态上下线 5.5 软负载均衡 6. Zookeeper 选举机制 6.1 第一…

【opencv】示例-text_skewness_correction.cpp 校正文本图像的倾斜度

// 此教程展示了如何矫正文本的偏斜。 // 程序接受一个偏斜的源图像作为输入&#xff0c;并显示非偏斜的文本。#include <opencv2/core.hpp> // 包含OpenCV核心功能的头文件 #include <opencv2/imgcodecs.hpp> // 包含OpenCV图像编解码功能的头文件 #include <o…

每日练习——leetcode402. 移掉 K 位数字和17. 电话号码的字母组合

目录 402. 移掉 K 位数字 题目描述 解题思路 代码实现 17. 电话号码的字母组合 题目描述 解题思路 代码实现 402. 移掉 K 位数字 题目描述 给你一个以字符串表示的非负整数 num 和一个整数 k &#xff0c;移除这个数中的 k 位数字&#xff0c;使得剩下的数字最小。请…

Python杂记--使用asyncio构建HTTP代理服务器

Python杂记--使用asyncio构建HTTP代理服务器 引言基础知识代码实现 引言 本文将介绍 HTTP 代理的基本原理&#xff0c;并带领读者构建一个自己的 HTTP 代理服务器。代码中不会涉及到任何第三方库&#xff0c;全部由 asyncio 实现&#xff0c;性能优秀&#xff0c;安全可靠。 基…

Linux-文件系统理解(磁盘的物理与逻辑结构、什么是inode、OS如何管理磁盘)

一、磁盘 磁盘的物理结构 磁盘的本质是一个机械设备&#xff0c;可以存储大量的二进制信息&#xff0c;是实现数据存储的基础硬件设施&#xff0c;磁盘的盘片类似于光盘&#xff0c;不过盘片的两面都是可读可写可擦除的&#xff0c;每个盘面都有一个磁头&#xff0c;马达可以使…

攻防世界---Web_php_include

1.题目链接 2.补充知识&#xff1a; 3.构造&#xff1a;执行成功 /?pagedata://text/plain,<?php phpinfo()?> 4.构造下面url&#xff0c;得到目录路径 /?pagedata://text/plain,<?php echo $_SERVER[DOCUMENT_ROOT]?> 5构造下面url&#xff0c;读取该路径的…