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

24.11.23 Ajax

news 2025/12/25 16:19:01

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;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/12/25 5:24:14

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/12/25 5:22:42

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/12/25 11:17:39

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/12/25 9:29:48

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/12/14 7:26:20

图解JavaScript原型：原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

编程新知 2025/12/25 5:07:46

基于单片机的宠物屋智能系统设计与实现（论文+源码）

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...

编程新知 2025/12/25 12:36:29