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

24.11.23 Ajax

news 2026/5/25 9:40:00

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

编程日记 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&#xff0c;添加 MO…...

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

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

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

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

学习electron

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

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

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

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

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

MySQL：事务

什么是事务 事务就是把SQL语句打包成一个整体&#xff0c;在这组SQL执行的时候&#xff0c;要么同时成功&#xff0c;要么同时失败。 事务的ACID特性 事务的ACID特性指的是 Atomicity (原⼦性)&#xff0c; Consistency (⼀致性)&#xff0c; 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-排序算法汇总

排序算法&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09; 选择排序&#xff08;Selection Sort&#xff09; 插入排序&#xff08;Insertion Sort&#xff09; 快速排序&#xff08;Quick Sort&#xff09; 归并排序&#xff08;Merge Sort&#xff09; 堆排序&…...

编程日记 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&#xff08;Visual Studio Code&#xff09;是由微软开发的一款免费、开…...

编程日记 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在很多关联容器&#xff08;如std::map、std::multimap、std::set、std&#xff1a;multiset等&#xff09;中被广泛应用。以std::map为例&#xff0c;std::map是一个键值对的容器&#xff0c;其中每个元素都是一个std::pair&#xff0c;键用于唯一标识元…...

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

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

表格样式修改 文章目录 表格样式修改一、表格背景颜色修改1、方法一2、方法二 二、多级表头颜色修改 一、表格背景颜色修改 1、方法一 表格外套一个 div &#xff0c;修改div的背景色&#xff0c;并将表格背景色设置为透明 参考代码&#xff1a; <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的文件&#xff1a;发送一个单独的文件并导出URL地址 小于8KB的文件&#xff1a;导出一…...

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

01.Django快速入门

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

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

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

spark的代码分为两种 本地代码在driver端直接解析执行没有后续 集群代码&#xff0c;会在driver端进行解析&#xff0c;然后让多个机器进行集群形式的执行计算 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关键字用于指定函数不会抛出异常&#xff0c;有助于提高程序的异常安全性&#xff0c;还能够使编译器生成更加高效的代码。 noexcept 是函数接口的一部分 函数是否声明为 noexcept 是接口设计的一部分&#xff0c;客户端代码可能会依赖这一点。如果一个函数被声明…...

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

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

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

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

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

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

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

从红宝石到光纤：固体激光器家族里，谁才是工业加工界的‘六边形战士’？

从红宝石到光纤&#xff1a;固体激光器家族里&#xff0c;谁才是工业加工界的‘六边形战士’&#xff1f; 在金属切割车间里&#xff0c;激光束正以毫米级精度划过不锈钢板&#xff1b;精密电子产线上&#xff0c;纳米级激光打标机为电路板刻印追溯码&#xff1b;汽车焊接工段…...

编程新知 2026/5/25 9:25:12

机器学习可持续性实践指南：从模型优化到绿色AI的工程落地

1. 项目概述&#xff1a;当机器学习遇见可持续性 在过去的十年里&#xff0c;我亲眼见证了机器学习从实验室的“黑科技”演变为驱动各行各业的核心引擎。从推荐系统到自动驾驶&#xff0c;模型的复杂度和规模呈指数级增长&#xff0c;随之而来的是一个我们无法回避的现实&#…...

编程新知 2026/5/25 8:01:29

手把手教你无损转换：把老电脑的Legacy启动盘改成UEFI+GPT（附DiskGenius操作截图）

老电脑焕新指南&#xff1a;从Legacy到UEFIGPT的无损迁移实战当你的老电脑开机速度越来越慢&#xff0c;或者被Windows 11的安装要求拒之门外时&#xff0c;很可能是因为它还在使用传统的Legacy启动方式和MBR分区表。本文将带你深入了解这两种启动方式的区别&#xff0c;并手把…...

编程新知 2026/5/25 7:53:25

从CentOS迁移到openEuler？手把手教你在vSphere ESXi 7.0上搭建测试环境

从CentOS迁移到openEuler&#xff1a;vSphere ESXi 7.0测试环境全指南当企业技术栈面临升级换代时&#xff0c;系统管理员往往需要在不影响生产环境的前提下进行充分验证。对于长期依赖CentOS/RHEL生态的用户而言&#xff0c;openEuler作为国产开源操作系统的代表&#xff0c;正…...

编程新知 2026/5/25 7:51:21

BepInEx 6.0技术揭秘：如何构建跨平台Unity插件框架的5大核心机制

BepInEx 6.0技术揭秘&#xff1a;如何构建跨平台Unity插件框架的5大核心机制 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx 在Unity游戏开发领域&#xff0c;插件框架的技术实现一…...

编程新知 2026/5/25 7:41:30

虚拟化PCIe直通故障排查：BIOS设置、IOMMU组与QEMU参数全链路解析

1. 这不是驱动问题&#xff0c;是PCIe拓扑在“装睡” “虚拟化服务器PCI报错”——这六个字&#xff0c;我去年在三个不同客户的机房里反复听到过&#xff0c;每次都是凌晨两点被电话叫醒。运维同事第一反应永远是重装驱动、更新固件、换网卡&#xff0c;折腾两天后发现报错照旧…...

编程新知 2026/5/25 7:10:41

WSL2开发环境部署

系统要求 安装前需要确保设备满足以下条件: 操作系统: Windows 10版本2004(内部版本19041)或Windows 11(按Win R输入winver查看版本)。硬件: 64 位处理器(需要在BIOS中启用虚拟化,Intel VT-x/AMD-V) 至少4GB内存(推荐8GB)。 20GB以上存储空间(建议SSD)。 启用必要功能 …...

编程新知 2026/5/25 6:23:40

一次业务接口性能评估的总结

一次业务接口性能评估的总结 本篇文章是我在项目中对一个业务接口做性能评估时&#xff0c;对一些问题的思考和相关知识点系统性回顾拾遗的一个总结。 业务背景 我们项目中的一个文件上传接口&#xff0c;主要业务功能是接收第三方渠道端上传的base64编码影像文件和相关业务数据…...

编程新知 2026/5/25 6:21:26

Unity WebGL项目内存爆了别慌！用Profiler揪出2048大贴图，5分钟搞定优化

Unity WebGL内存优化实战&#xff1a;用Profiler精准定位2048大贴图当Unity WebGL项目在浏览器中运行时突然弹出"Out Of Memory"错误&#xff0c;不少开发者会感到手足无措。这种内存溢出问题往往源于未被注意到的资源"巨无霸"——比如一张20482048的高清贴…...

编程新知 2026/5/25 6:03:41

3个关键维度重新定义工作价值：科学量化你的职业选择

3个关键维度重新定义工作价值&#xff1a;科学量化你的职业选择 【免费下载链接】worth-calculator Calculating the actual value of your job beyond just salary 项目地址: https://gitcode.com/gh_mirrors/wo/worth-calculator 你是否曾在深夜加班时思考&#xff0c…...

编程新知 2026/5/25 3:45:16