当前位置：首页 > news >正文

24.11.23 Ajax

news 文章来源：https://blog.csdn.net/2401_87910368/article/details/143988859 2025/5/7 9:22:22

1动态网页技术与静态网页技术对比:

静态网页:

如果数据库中有用户列表 html中要显示如果用户列表数据变化 html要改代码才能显示完整数据

(不能使用动态数据 )

动态网页:

servlet可以通过代码以输出流显示数据当数据库数据改变时不需要改代码

2.为了解决html不能使用动态数据的问题产生了ajax技术

ajax技术在静态技术中,使用了子线程,处理请求和响应

从而让静态技术时,不需要每次请求都刷新页面,那么就可以在一个静态页面中

通过子线程的请求,从后端取动态数据,在当前页面使用

3.ajax技术使用的是异步回调模式

浏览器中的其他子线程都使用了异步回调模式这是浏览器中主线程与子线程配合的主要模式

4.(同步请求)普通请求与 ajax请求效果对比

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head><body>
<input type="button" value="同步请求(普通请求)" onclick="sendReq()">
<input type="button" value="ajax请求" onclick="sendAjaxReq()">
</body><script>const sendReq = ()=>{location.href="/myserver"}const sendAjaxReq = ()=>{//xmlHttpRequest 缩写 (XHR)//创建异步请求线程对象let xmlHttpRequest = new XMLHttpRequest();//设置回调函数xmlHttpRequest.onreadystatechange = ()=>{if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){//做数据处理}}//设置请求地址相关参数xmlHttpRequest.open("GET","/myserver",true);//xmlHttpRequest.setRequestHeader("")//发送请求xmlHttpRequest.send();}</script></html>

同步请求效果:

ajax请求效果:

5.使用axios简化ajax请求

axios是一个http库封装了ajax请求

get请求发送
axios.get("/day11/ajaxDemo?username=abc123").then((resp)=>{console.log(resp.data)})post请求发送
axios.post("/day11/ajaxDemo","username=abc123").then((resp)=>{console.log(resp.data)})

es6之后提供了异步同步语法配合ajax请求语法更简单

    const sendAxios = async ()=>{let resp = await axios.post("/day11/ajaxDemo","username=rose123");console.log(resp)}

关键字:

async 用于修饰方法 如果方法中有异步方法 支持同步模式
await 用于修饰当前调用的异步方法 使用同步模式 当前方法必须执行完才能执行下一行

6.后端标准化为服务接口形式

后端服务对于前端来说是一个通过http远程调用的方法(接口) 返回json数据

所以现在常用的接口形式简称为 Http+json

需要做出如下几部标准化

1.通过输出流 输出数据
2.输出json格式字符串 标准json格式字符串
//标准化 方便公司统一管理
3.统一的json转换工具
4.返回数据的key 做标准化(统一)
5.操作响应码 操作响应描述(统一)

JSON转换工具 fastJson

json转换工具的作用 java对象与json字符串互相转换java对象   <--->   json字符串* Gson       google公司的  功能大而全  转的慢* Jackson                 功能大而全  转的快 API较复杂* FastJson   alibaba公司的            转的快 API简单

fastJson API简单 转换快速

普通java对象

User user = new User(1L, "杰克", "abc123", 15);
String s = JSON.toJSONString(classRoom);
System.out.println(s);

集合对象

List<User> listUser = new ArrayList<>();
listUser.add(new User(1L, "杰克", "abc123", 15));
listUser.add(new User(2L, "杰克2", "abc123", 15));
listUser.add(new User(3L, "杰3", "abc123", 15));
String s = JSON.toJSONString(listUser);
System.out.println(s);

map对象

Map<String,Object> dataMap = new HashMap<>();
dataMap.put("classInfo","922");
dataMap.put("teacher","gfs");
dataMap.put("students",listUser);
String s = JSON.toJSONString(dataMap);
System.out.println(s);

对象嵌套

        ClassRoom classRoom = new ClassRoom();classRoom.setClassInfo("922");classRoom.setTeacher("gfs");classRoom.setStudents(listUser);//可以转换任意类型对象String s = JSON.toJSONString(classRoom);System.out.println(s);

JSON字符串转java对象

String jsonStr = "{\"age\":15,\"id\":2,\"password\":\"abc123\",\"username\":\"杰克2\"}";
User user1 = JSON.parseObject(jsonStr, User.class);

返回数据的key

通过实体类规范返回数据格式

package com.javasm.entity;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
public class ReturnResult {//返回的数据 用统一的实体类封装//操作反馈码private Integer returnCode;//操作反馈信息private String returnMsg;//操作附加数据private Object returnData;}

操作响应码操作响应描述(统一)

package com.javasm.entity;import lombok.Data;
import lombok.Getter;/*** @author gfs* @version 0.1* @className ReturnCode* @descriptioin:* @date 2024/11/22 15:01* @since jdk11*/
@Getter
public enum ReturnCode {REQ_NAME_OK(20001,"用户名可用"),REQ_NAME_NO_OK(20002,"用户名重复");private Integer code;private String msg;private ReturnCode(Integer code,String msg){this.code = code;this.msg = msg;}}

接口文档

前后端沟通的重要文档标记接口的使用方法和规范

接口文档校验用户名重复接口请求地址:    /day11/regName支持的方法:  get/post参数:       username  String  用户名（必填）返回数据格式: json返回数据示例:{returnCode: 20002, returnData: 'red', returnMsg: '用户名重复'}{returnCode: 20001, returnData: 'green', returnMsg: '用户名可用'}

校验用户名接口示例:

package com.javasm.controller;import com.alibaba.fastjson.JSON;
import com.javasm.entity.ReturnCode;
import com.javasm.entity.ReturnResult;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;@WebServlet("/regName")
public class RegNameServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {/*服务端代码标准化 (服务接口  http+json的远程接口   )* 1.通过输出流 输出数据* 2.输出json格式字符串 标准json格式字符串* //标准化 方便公司统一管理3.统一的json转换工具4.返回数据的key 做标准化(统一)5.操作响应码 操作响应描述(统一)//后端写接口文档校验用户名重复接口请求地址:    /day11/regName支持的方法:  get/post参数:       username  String  用户名（必填）返回数据格式: json返回数据示例:{returnCode: 20002, returnData: 'red', returnMsg: '用户名重复'}{returnCode: 20001, returnData: 'green', returnMsg: '用户名可用'}** */String username = req.getParameter("username");System.out.println(username);//数据库查 jackString respStr = "";//返回json格式字符串//Map<String,Object> returnMap = new HashMap<>();ReturnResult returnResult = new ReturnResult();if(!"jack".equals(username)){//用户名没重复 可用//respStr = "{\"msg\":\"用户名可用\",\"textColor\":\"green\"}";
//            returnMap.put("msg","用户名可用");
//            returnMap.put("taxtColor","green");returnResult.setReturnCode(ReturnCode.REQ_NAME_OK.getCode());returnResult.setReturnMsg(ReturnCode.REQ_NAME_OK.getMsg());returnResult.setReturnData("green");}else{//用户名重复// respStr = "{\"msg\":\"用户名重复\",\"textColor\":\"red\"}";
//            returnMap.put("msg","用户名重复");
//            returnMap.put("textColor","red");returnResult.setReturnCode(ReturnCode.REQ_NAME_NO_OK.getCode());returnResult.setReturnMsg(ReturnCode.REQ_NAME_NO_OK.getMsg());returnResult.setReturnData("red");}resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();//后端只准备数据//把对象转成jsonwriter.print(JSON.toJSONString(returnResult));writer.close();}
}

24.11.23 Ajax

1动态网页技术与静态网页技术对比: 静态网页: 如果数据库中有用户列表 html中要显示如果用户列表数据变化 html要改代码才能显示完整数据 (不能使用动态数据 ) 动态网页: servlet可以通过代码以输出流显示数据当数据库数据改变时不需要改代码 2.为了解决html不能使用动…...

编程日记 2024/11/24 22:07:54

Sickos1.1 详细靶机思路实操笔记

Sickos1.1 详细靶机思路实操笔记免责声明本博客提供的所有信息仅供学习和研究目的，旨在提高读者的网络安全意识和技术能力。请在合法合规的前提下使用本文中提供的任何技术、方法或工具。如果您选择使用本博客中的任何信息进行非法活动，您将独自承担…...

编程日记 2024/11/24 22:06:53

rk3568-linux-5.10.160移植rtl8822cs wifi 模块纪要

rk3568-linux-5.10.160移植rtl8822cs wifi 模块纪要 1、将驱动添加到 kernel/drivers/net/wireless/rockchip_wlan/ 或者 kernel/drivers/net/wireless/realtek/rtlwifi/ 2、修改该目录下的makefile、kconfig 3、修改rtl8822cs/os_dep/linux/os_intfs.c，添加 MO…...

编程日记 2024/11/24 22:04:51

QT基础编码问题定时器事件绘图事件 keyPressEvent QT5.12.3环境 C++实现

一、编码问题在计算机编程中，流（Stream）是一种抽象的概念，用于表示数据的输入或输出。根据处理数据的不同方式，流可以分为字节流（Byte Stream）和字符流（Character Stream&#xff0…...

编程日记 2024/11/24 22:03:50

学习electron

一、开发环境 1、先行安装 node.js 和 npm 2、检查 Node.js 是否正确安装，请在您的终端输入以下命令：检测安装的版本 node -v npm -v 注意因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运…...

编程日记 2024/11/24 22:01:47

《C++智能合约与区块链底层交互全解析：构建坚实的去中心化应用桥梁》

在区块链技术的广阔天地里，C智能合约扮演着极为关键的角色，而其与区块链底层的交互则是实现各种去中心化应用功能的核心环节。深入理解并掌握这种交互机制，对于区块链开发者来说至关重要，它犹如一座桥梁，将智能合约的业…...

编程日记 2024/11/24 21:59:46

MySQL：事务

什么是事务事务就是把SQL语句打包成一个整体，在这组SQL执行的时候，要么同时成功，要么同时失败。事务的ACID特性事务的ACID特性指的是 Atomicity (原⼦性)， Consistency (⼀致性)， Isolation (隔离性)和 Durabi…...

编程日记 2024/11/24 21:56:43

Linux——进程间通信之管道

进程间通信之管道文章目录进程间通信之管道1. 进程间通信1.1 为什么要进行进程间的通信1.2 如何进行进程间的通信1.3 进程间通信的方式 2. 管道2.1 匿名管道2.1.1 系统调用pipe()2.1.2 使用匿名管道进行通信2.1.1 匿名管道四种情况2.1.2 匿名管道的五大特性2.1.3 进程池 2.2 …...

编程日记 2024/11/24 21:55:42

java-排序算法汇总

排序算法： 冒泡排序（Bubble Sort） 选择排序（Selection Sort） 插入排序（Insertion Sort） 快速排序（Quick Sort） 归并排序（Merge Sort） 堆排序&…...

编程日记 2024/11/24 21:54:41

Vscode进行Java开发环境搭建

Vscode进行Java开发环境搭建搭建Java开发环境(Windows)1.Jdk安装2.VsCode安装3.Java插件4.安装 Spring 插件5.安装 Mybatis 插件5.安装Maven环境6.Jrebel插件7.IntelliJ IDEA Keybindings8. 收尾 VS Code（Visual Studio Code）是由微软开发的一款免费、开…...

编程日记 2024/11/24 21:53:40

算法学习笔记（五）：二叉树一遍历、DFS

一.遍历二叉树二叉树TreeNode类 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, Tree…...

编程日记 2024/11/24 21:52:39

#Verilog HDL# Verilog中的generate用法集锦

生成块允许复制模块实例或有条件地实例化任何模块。它提供了基于Verilog参数构建设计的能力。当相同的操作或模块实例需要重复多次，或者当某些代码需要根据给定的Verilog参数有条件地包含时，这些语句特别方便。生成块不能包含端口、参数、specparam声明或指定块。但是，允许…...

编程日记 2024/11/24 21:49:36

简述C++map容器

pair键值对 std::pair在很多关联容器（如std::map、std::multimap、std::set、std：multiset等）中被广泛应用。以std::map为例，std::map是一个键值对的容器，其中每个元素都是一个std::pair，键用于唯一标识元…...

编程日记 2024/11/24 21:48:35

Vue 学习随笔系列十七 -- 表格样式修改

表格样式修改文章目录表格样式修改一、表格背景颜色修改1、方法一2、方法二二、多级表头颜色修改一、表格背景颜色修改 1、方法一表格外套一个 div ，修改div的背景色，并将表格背景色设置为透明参考代码： <template><div cl…...

编程日记 2024/11/24 21:47:34

08 —— Webpack打包图片

【资源模块 | webpack 中文文档 | webpack中文文档 | webpack中文网】https://www.webpackjs.com/guides/asset-modules/?sid_for_share99125_3 Webpack打包图片以8KB为临界值判断大于8KB的文件：发送一个单独的文件并导出URL地址小于8KB的文件：导出一…...

编程日记 2024/11/24 21:45:32

01.Django快速入门

一、Django 快速入门使用最新版本 Django4.2LTS 版本,3 年内不需要更换版本由浅入深讲解，浅显易懂课程大纲全面包含 Django 框架知识点，内容丰富全面细致知识点结合项目实战实现全栈项目应用 Django 官网(文档): https://docs.djangoproject.com/zh-h…...

编程日记 2024/11/24 21:43:29

【大数据学习 | Spark-Core】spark-shell开发

spark的代码分为两种本地代码在driver端直接解析执行没有后续集群代码，会在driver端进行解析，然后让多个机器进行集群形式的执行计算 spark-shell --master spark://nn1:7077 --executor-cores 2 --executor-memory 2G sc.textFile("/home/ha…...

编程日记 2024/11/24 21:41:27

Modern Effective C++ Item 14 如果函数不抛出异常请使用noexcept

C11 noexcept关键字用于指定函数不会抛出异常，有助于提高程序的异常安全性，还能够使编译器生成更加高效的代码。 noexcept 是函数接口的一部分函数是否声明为 noexcept 是接口设计的一部分，客户端代码可能会依赖这一点。如果一个函数被声明…...

编程日记 2024/11/24 21:40:26

cudatoolkit安装（nvcc -V错误版本解决）

CudaToolKit安装（nvcc） cudatoolkit 是 CUDA 开发工具包（CUDA Toolkit） 的核心部分，包含了一系列用于开发和运行 CUDA 应用程序的软件组件。nvcc 是 NVIDIA CUDA 编译器驱动，用于将 CUDA C/C 代码编译成可…...

编程日记 2024/11/24 21:39:25

DTO和VO的区别及使用场景详解

随着互联网的发展，前后端分离的开发模式越来越流行。在前后端数据交互过程中，为了保证数据的安全性和效率，通常会采用 DTO 和 VO 来封装数据。本篇博客将详细介绍 DTO 和 VO 的区别以及使用场景。大家可能会有个疑问，既然DTO是展…...

编程日记 2024/11/24 21:38:23

百度在下一盘大棋

这两天世界互联网大会在乌镇又召开了。我看到一条新闻，今年世界互联网大会乌镇峰会发布“2024 年度中国互联网企业创新发展十大典型案例”，百度文心智能体平台入选。这个智能体平台我最近也有所关注，接下来我就来讲讲它。百度在下一盘大棋…...

编程日记 2024/11/24 21:34:19

第十六届蓝桥杯模拟赛第二期题解—Java

第十六届蓝桥杯模拟赛/校赛第二期个人题解，有错误的地方欢迎各位大佬指正问题一(填空题) 【问题描述】如果一个数 p 是个质数，同时又是整数 a 的约数，则 p 称为 a 的一个质因数。请问， 2024 的最大的质因数是多少？ …...

编程日记 2024/11/24 21:30:15

驱动开发笔记：关于3588GPIO

1.概要 2.内容 1.3588GPIO 关于RK3588的GPIO（General-Purpose Input/Output，通用输入输出引脚），以下是一些关键信息和操作指南： 一、GPIO基本概念定义：GPIO是嵌入式系统中常见的通信接口，…...

编程日记 2024/11/24 21:26:06

【RK3588 Linux 5.x 内核编程】-内核线程与Mutex

内核线程与Mutex 文章目录内核线程与Mutex1、Mutex介绍1.1 竞争条件1.2 Mutex特性2、Linux内核中的Mutex2.1 初始化Mutex2.1.1 静态方式初始化2.1.2 动态方式初始化2.2 互斥锁获取2.3 互斥锁释放3、Mutex使用示例4、驱动验证在前面的文章中，介绍了如何Linux内核中的线程，但是…...

编程日记 2024/11/24 21:25:04

【0342】分配并初始化 Proc Signal 共享内存（1）

1. Proc Signal （procsignal）共享内存 Postgres内核在启动postmaster守护进程时候，会通过函数 ProcSignalShmemInit() 去为 Proc Signal 分配并初始化指定大小的共享内存空间。整个调用链路如下。 (gdb) bt #0 ProcSignalShmemInit () at procsignal.c:118 #1 0x000000000…...

编程日记 2024/11/24 21:24:04

管家婆财贸ERP BR035.回款利润明细表

最低适用版本：财贸系列 23.5 插件简要功能说明：报表统计销售单/销售退货单/销售发票回款情况更多细节描述见下方详细文档插件操作视频：进销存类定制插件--回款利润明细表插件详细功能文档： 1. 应用中心增加报表【回款利润明细表】 a. b. 查询条件： ⅰ. 日期区间：…...

编程日记 2024/11/24 21:22:01

数据库MYSQL——表的设计

文章目录前言三大范式：几种实体间的关系：一对一关系：一对多关系：多对多关系： 前言之前的博客中我们讲解的是关于数据库的增删改查与约束的基本操作， 是在已经创建数据库，表之上的操作。在实…...

编程日记 2024/11/24 21:21:00

netstat -tuln | grep 27017（显示所有监听状态的 TCP 和 UDP 端口，并且以数字形式显示地址和端口号）

文章目录 1. 确定占用端口的进程使用 lsof 命令使用 fuser 命令 2. 结束占用端口的进程3. 修改 MongoDB 配置文件4. 检查 MongoDB 日志文件5. 重新启动 MongoDB 服务6. 检查 MongoDB 服务状态总结 [rootlocalhost etc]# netstat -tuln | grep 27017 tcp 0 0 127.0.…...

编程日记 2024/11/24 21:18:58

非线性控制器设计原理

非线性控制器设计原理非线性控制器设计旨在解决非线性系统的控制问题，克服传统线性控制器在处理非线性现象（如饱和、死区、耦合、时变性等）时的不足。其核心在于利用非线性数学工具和设计方法，使控制系统在非线性条件下具备良好…...

编程日记 2024/11/24 21:15:55

MySQL数据库6——SQL优化

一.SQL优化 1.插入优化优化1：批量插入 insert into 表名 values(记录1),(记录2),……;优化2：手动提交事务 start transaction; insert into 表名 values(记录1),(记录2); insert into 表名 values(记录1),(记录2); …… commit;优化3：主键顺…...

编程日记 2024/11/24 21:13:53