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

24.11.23 Ajax

news 2025/7/8 19:46:30

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

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/7/7 5:59:03

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/6/20 18:20:46

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。一、环境准备 1、VMware 基于VMware构建Linux虚拟机是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案所以VMware虚拟机方案是必须要学习的。 （1）设置网关打开VMware虚拟机，点击编辑…...

编程新知 2025/7/8 1:12:18

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎：品融电商，一站式全案代运营领跑者在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/7/7 16:10:59

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络&#xf…...

编程新知 2025/7/7 12:15:03

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...

编程新知 2025/7/8 8:19:32

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂&#xff…...

编程新知 2025/7/7 20:02:31

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...

编程新知 2025/7/7 14:09:37

LLMs 系列实操科普（1）

写在前面： 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容，原视频时长 ~130 分钟，以实操演示主流的一些 LLMs 的使用，由于涉及到实操，实际上并不适合以文字整理，但还是决定尽量整理一份笔…...

编程新知 2025/7/7 4:04:47

Linux操作系统共享Windows操作系统的文件

目录一、共享文件二、挂载一、共享文件点击虚拟机选项-设置点击选项，设置文件夹共享为总是启用，点击添加，可添加需要共享的文件夹查询是否共享成功 ls /mnt/hgfs 如果显示Download（这是我共享的文件夹）&…...

编程新知 2025/7/7 4:55:02