【菜狗学前端】原生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…

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

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

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

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

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

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

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;读取该路径的…

【网站项目】面向企事业单位的项目申报小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

网络编程【InetAddress , TCP 、UDP 、HTTP 案例】

day38上 网络编程 InetAddress 理解&#xff1a;表示主机类 一个域名 对应 多个IP地址 public static void main(String[] args) throws UnknownHostException {//获取本机的IP地址 // InetAddress localHost InetAddress.getLocalHost(); // System.out.println(localHos…

简单认识Git(dirsearch、githack下载),git泄露(ctfhub)

目录 dirsearch下载地址: githack下载&#xff08;一次不成功可多试几次&#xff09; 一、什么是Git 1.git结构 2.git常用命令及示例 3.Git泄露原理 二、Git泄露 1.Log 2.Stash 3.Index 工具准备&#xff1a;dirsearch、githack dirsearch下载地址: GitHub - mauroso…

搭建Hive 3.x环境(CentOS 9 + Hadoop3.x)

零、资源准备 虚拟机相关&#xff1a; VMware workstation 16&#xff1a;虚拟机 > vmware_177981.zipCentOS Stream 9&#xff1a;虚拟机 > CentOS-Stream-9-latest-x86_64-dvd1.iso JDK jdk1.8&#xff1a;JDK > jdk-8u261-linux-x64.tar.gz Hadoop Hadoop 3.3.6&a…

【Java】内存可见性问题是什么?

文章目录 内存模型内存可见性解决方案volatile 内存模型 什么是JAVA 内存模型&#xff1f; Java Memory Model (JAVA 内存模型&#xff09;是描述线程之间如何通过内存(memory)来进行交互。 具体说来&#xff0c; JVM中存在一个主存区&#xff08;Main Memory或Java Heap Mem…

架构师系列-搜索引擎ElasticSearch(七)- 集群管理之分片

集群健康检查 Elasticsearch 的集群监控信息中包含了许多的统计数据&#xff0c;其中最为重要的一项就是集群健康&#xff0c;它在 status字段中展示为 green&#xff08;所有主分片和副本分片都正常&#xff09;、yellow&#xff08;所有数据可用&#xff0c;有些副本分片尚未…

Collection与数据结构 二叉树(三):二叉树精选OJ例题(下)

1.二叉树的分层遍历 OJ链接 上面这道题是分层式的层序遍历,每一层有哪些结点都很明确,我们先想一想普通的层序遍历怎么做 /*** 层序遍历* param root*/public void levelOrder1(Node root){Queue<Node> queue new LinkedList<>();queue.offer(root);while (!qu…

Spring Boot(二)— 自定义Spring Boot Starter

在Spring Boot中&#xff0c;自定义Spring Boot Starter是一个常见且强大的功能&#xff0c;它允许开发者为特定的功能或库创建自己的自动配置&#xff0c;从而简化集成过程。 1 前置知识 Spring Boot的事件为应用的启动和关闭提供了详细的上下文信息&#xff0c;使得开发者能…

基于表面势的增强型p-GaN HEMT器件模型

来源&#xff1a;电子学报 22年 摘要 为了满足功率电路及系统设计对p-GaN HEMT&#xff08;High Electron Mobility Transistor&#xff09;器件模型的需求&#xff0c;本文建立了一套基于表面势计算方法的增强型p-GaN HEMT器件SPICE&#xff08;Simulation Program with Int…