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

前端开发工程师——ajax

news 2026/3/27 11:39:43

express框架

终端输入

npm init --yes
npm i express

请求报文/响应报文

// 1.引入express
const express = require('express');// 2.创建应用对象
const app = express();// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/',(request,response) => {
// 设置响应response.send('hello express');
});// 4.监听端口启动服务
app.listen(8000,() => {console.log("服务已经启动，8000端口监听中。。。");
})

Ajax-get请求

设置server.js服务端

// 1.引入express
const express = require('express');// 2.创建应用对象
const app = express();// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/server',(request,response) => {
// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 设置响应体response.send("Hello ajax");});// 4.监听端口启动服务
app.listen(8000,() => {console.log("服务已经启动，8000端口监听中。。。");
})

1_get.html客户端页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>get请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.getElementById("result")// 绑定事件btn.onclick = function(){// ajax步骤// 1.创建对象const xhr = new XMLHttpRequest();// 2.初始化，设置请求方法和urlxhr.open("GET","http://localhost:8000/server");// 3.发送xhr.send();// 4.事件绑定，处理服务端返回的结果//on 当。。。的时候// readystate是xhr对象中的属性，表示状态0，1，2，3，4// change改变xhr.onreadystatechange = function(){// 判断（服务端返回了所有的结果）if(xhr.readyState == 4){// 判断响应状态码 200 404 403 401 500// 其中2xx，表示2开头的都是表示成功if(xhr.status >= 200 && xhr.status < 300){// 处理结果，行 头 空行 体// 1.响应行console.log(xhr.status);//状态码console.log(xhr.statusText);//状态字符串console.log(xhr.getAllResponseHeaders());//所有响应头console.log(xhr.response);//响应体// 设置result文本result.innerHTML = xhr.response;}else{}}}}</script>
</body>
</html>

ajax设置请求参数-get

Ajax—post请求

设置server.js服务端，添加post请求

// 1.引入express
const express = require('express');// 2.创建应用对象
const app = express();// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/server',(request,response) => {
// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 设置响应体response.send("Hello ajax");});app.post('/server',(request,response) => {// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 设置响应体response.send("Hello ajax post");});// 4.监听端口启动服务
app.listen(8000,() => {console.log("服务已经启动，8000端口监听中。。。");
})

1_post.html页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>post请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #903;}</style>
</head>
<body><div id="result"></div><script>// 获取元素对象const result = document.getElementById('result')// 绑定事件:表示只要鼠标经过就会出现ajax响应result.addEventListener('mouseover',function(){// 1.创建对象const xhr = new XMLHttpRequest();// 2.初始化，设置类型与urlxhr.open("POST",'http://localhost:8000/server');// 3.发送xhr.send();// 4.绑定事件xhr.onreadystatechange = function(){// 判断if(xhr.readyState == 4){if(xhr.status >= 200 && xhr.status < 300){// 处理服务端返回的结果result.innerHTML = xhr.response;}}}})</script>
</body>
</html>

ajax设置请求参数-post

post请求头

 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

服务端响应JSON数据

服务端server.js

// 1.引入express
const express = require('express');// 2.创建应用对象
const app = express();// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/server',(request,response) => {
// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 设置响应体response.send("Hello ajax");});
app.get('/json-server',(request,response) => {// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 响应一个数据const data = {'name':'ivy'};// 对对象进行字符串转换let str = JSON.stringify(data);// 设置响应体response.send(str)});app.post('/server',(request,response) => {// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 设置响应体response.send("Hello ajax post");});// 4.监听端口启动服务
app.listen(8000,() => {console.log("服务已经启动，8000端口监听中。。。");
})

1_json.html客户端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>json</title><style>#result {width: 300px;height: 100px;border: solid 1px #90e}</style>
</head>
<body><div id="result"></div><script>// 获取元素const result = document.getElementById('result')// 绑定键盘按下事件window.onkeydown = function(){// 发送请求const xhr = new XMLHttpRequest();// 初始化xhr.open("GET","http://127.0.0.1:8000/json-server")// 发送xhr.send()// 绑定事件xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status >= 200 && xhr.status < 300){// console.log(xhr.response);// result.innerHTML = xhr.response;// 手动对数据转化let data = JSON.parse(xhr.response)console.log(data)result.innerHTML = data.name;}}}}</script>
</body>
</html>

解决ie浏览器缓存问题

网络超时与异常问题

server.js

// 1.引入express
const express = require('express');// 2.创建应用对象
const app = express();// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/server',(request,response) => {
// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 设置响应体response.send("Hello ajax");});
app.get('/json-server', (request, response) => {// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 响应一个数据const data = {'name': 'ivy'};// 对对象进行字符串转换let str = JSON.stringify(data);// 设置响应体response.send(str)});
app.get('/delay', (request, response) => {// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 延时响应setTimeout(() => {// 设置响应体response.send("延时响应");},3000)});app.post('/server', (request, response) => {// 设置响应头，设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send("Hello ajax post");});// 4.监听端口启动服务
app.listen(8000, () => {console.log("服务已经启动，8000端口监听中。。。");
})

network.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网络超时与异常</title><style>#result {width: 300px;height: 100px;border: solid 1px #90e}</style>
</head>
<body><div id="result"></div><script>// 获取元素const result = document.getElementById('result')// 绑定键盘按下事件window.onkeydown = function(){// 发送请求const xhr = new XMLHttpRequest();// 超时设置2s设置xhr.timeout = 2000;// 超时回调xhr.ontimeout = function(){alert("网络异常，请稍后重试");}// 网络异常回调xhr.onerror = function(){alert("你的网络似乎出现一些问题")}// 初始化xhr.open("GET","http://127.0.0.1:8000/delay")// 发送xhr.send()// 绑定事件xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status >= 200 && xhr.status < 300){// console.log(xhr.response);// result.innerHTML = xhr.response;// 手动对数据转化let data = JSON.parse(xhr.response)console.log(data)result.innerHTML = data.name;}}}}</script>
</body>
</html>

取消请求问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击发送</button><button>点击取消</button><script>// 获取元素const btns = document.querySelectorAll("button")let x = nullbtns[0].onclick = function(){x = new XMLHttpRequest();x.open("GET","http://127.0.0.1:8000/delay");x.send();}// 取消事件btns[1].onclick = function(){x.abort()}</script>
</body>
</html>

前端开发工程师——ajax

express框架终端输入 npm init --yes npm i express 请求报文/响应报文 // 1.引入express const express require(express);// 2.创建应用对象 const app express();// 3.创建路由规则 // request:是对请求报文的封装 // response：是对响应报文的封装 app.get(…...

编程日记 2024/5/24 2:54:20

uni-app项目在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json

uni-app项目在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json 出现这个问题是因为打开的文件地址不对，解决这个问题首先我们要查看是否有unpackage文件夹，如果有，项目直接指向unpackage\dist\dev\…...

编程日记 2024/5/24 2:53:19

最大连续1的个数（滑动窗口）

算法原理： 这道题大眼一看是关于翻转多少个0的问题，但是，如果你按照这种思维去做题，肯定不容易。所以我们要换一种思维去做，这种思维不是一下就能想到的，所以想不到也情有可原。题目是：给定一…...

编程日记 2024/5/24 2:52:18

Spring Cloud 框架的应用详解

Spring Cloud 框架的应用详解 Spring Cloud 是一个基于 Spring Boot 的微服务架构开发工具，它提供了一系列工具用于快速构建分布式系统中的常见模式，如配置管理、服务发现、断路器、智能路由、微代理、控制总线、全局锁、选举、分布式会话和集群状态管理…...

编程日记 2024/5/24 2:51:16

C语言数组——向函数传递数组

目录把数组传给函数（Passing Arrays to Functions） 向函数传递一维数组向函数传递二维数组数组在学生成绩管理中的应用例：计算每个学生的平均分把数组传给函数（Passing Arrays to Functions） 向函数传递一维…...

编程日记 2024/5/24 2:50:15

数据链路层简单介绍

mac地址（物理地址） mac地址和ip地址，目的都是为了区分网络上的不同设备的，在最开始的时候，mac地址和ip地址是两伙人，独立各自提出的，ip地址是4个字节（早都不够用了）&…...

编程日记 2024/5/24 2:49:13

【软考】设计模式之装饰器模式

目录 1. 说明2. 应用场景3. 结构图4. 构成5. 适用性6. 优点7. 缺点8. java示例 1. 说明 1.动态地给一个对象添加一些额外的职责。2.Decorator Pattern。3.就增加功能而言，装饰器模式比生成子类更加灵活。4.一种在不改变现有对象结构的情况下，动态地给对…...

编程日记 2024/5/24 2:48:12

网络编程day6

IO多路复用的原理 IO多路复用是一种通过同时监视多个文件描述符（通常是套接字）来处理多个I/O操作的机制。它的原理可以简单概括为： 单线程处理多个I/O操作：传统的I/O模型中，每个I/O操作都需要一个线程或进程来处理。而…...

编程日记 2024/5/24 2:47:11

5.23总结

新增功能点讨论学生和老师均可发布话题，话题发布后，在该课程的用户可以在发布话题的课程中点击讨论参与课程的讨论，并可以进行评论，回复评论，点赞操作。每个话题发布时可添加多个图片文件，参加讨论的话…...

编程日记 2024/5/24 2:46:10

SQL Server基础学习笔记

一. 什么是SQL Server？ SQL Server是由微软公司开发的关系型数据库管理系统（RDBMS），它提供了存储、检索、处理和分析数据的功能。作为一种强大的数据库解决方案，SQL Server被广泛应用于企业级应用程序、Web应用程序、…...

编程日记 2024/5/24 2:45:09

用Vuex存储可配置下载的ip地址（用XML进行ajax请求配置文件）

1.在public文件夹下创建一个名为Configuration的文件在创建一个Configuration.txt里面就放IP地址（这里的名字可以随便命名一定性的被人解读文件含义） 例如： http://172.171.208.1:80032.在store文件夹中创建一个名为 ajaxModule.js 的 Vuex …...

编程日记 2024/5/24 2:43:07

Spring: OncePerRequestFilter

文章目录一、介绍二、使用一、介绍 OncePerRequestFilter是Spring Boot中的一个过滤器抽象类，它在Spring Security中也得到了广泛的应用。这个过滤器抽象类的主要目的是确保在每次外部请求时只执行一次过滤操作，对于服务器内部之间的forward等请求&am…...

编程日记 2024/5/24 2:42:05

《Python编程从入门到实践》day37

# 昨日知识点回顾制定规范、创建虚拟环境并激活，正在虚拟环境创建项目、数据库和应用程序 # 今日知识点学习 18.2.4 定义模型Entry # models.py from django.db import models# Create your models here. class Topic(models.Model):"""用户学习的…...

编程日记 2024/5/24 2:41:04

文章目录一、GBDT (Gradient Boosting Decision Tree) 梯度提升决策树1.1 回归树1.2 梯度提升树1.3 Shrinkage1.4 调参1.5 GBDT的适用范围1.6 优缺点二、XGBoost (eXtreme Gradient Boosting)2.1 损失函数2.2 正则项2.3 打分函数计算2.4 分裂节点2.5 算法过程2.6 参数详解2.7…...

编程日记 2024/5/24 2:40:03

【考研数学】李林《880》是什么难度水平强化够用吗

880是公认的质量高，但要是刷的方法不对，心态直接炸裂！🙉 我24年二战就是用的 880660 的黄金搭档，143分逆袭上岸211！（为什么说逆袭呢，因为我23年一战数学83，妥妥的菜鸡&am…...

编程日记 2024/5/24 2:38:01

Flutter 中的 AnimatedAlign 小部件：全面指南

Flutter 中的 AnimatedAlign 小部件：全面指南在 Flutter 中，动画是增强用户界面和提升用户体验的强大工具。AnimatedAlign 是 Flutter 提供的一个动画组件，它允许你动画化子组件的对齐方式。这在实现动态布局变化、响应式设计或交互式动画时…...

编程日记 2024/5/24 2:37:00

(Qt) 默认QtWidget应用包含什么？

文章目录 ⭐前言⭐创建🛠️选择一个模板🛠️Location🛠️构建系统🛠️Details🛠️Translation🛠️构建套件(Kit)🛠️汇总 ⭐项目⚒️概要⚒️构建步骤⚒️清除步骤 ⭐Code🔦untitled…...

编程日记 2024/5/24 2:34:58

测试环境KDE组件漏洞修复

yarn白名单方案解决漏洞：方案：此方式主要使用iptables的功能，对yarn的resourceManager服务的8088端口进行访问ip限制，目的限制8088端口只允许集群内ip访问。 #分别在两台resourceManager节点执行以下步骤ssh kde-offline1 #安装iptables服务，并启动设置为开机自启 yum …...

编程日记 2024/5/24 2:33:56

微服务下认证授权框架的探讨

前言市面上关于认证授权的框架已经比较丰富了,大都是关于单体应用的认证授权,在分布式架构下,使用比较多的方案是--<应用网关>,网关里集中认证,将认证通过的请求再转发给代理的服务,这种中心化的方式并不适用于微服务,这里讨论另一种方案--<认证中心>,利用jwt去中…...

编程日记 2024/5/24 2:32:55

使用 ASM 修改字段类型，解决闪退问题

问题我的问题是什么？ 在桥接类 UnityBridgeActivity 中处理不同 unity 版本调用 mUnityPlayer.destroy(); 闪退问题。闪退日志如： 闪退日志说在 UnityBridgeActivity中找不到类型为 UnityPlayer 的属性 mUnityPlayer。我们知道，Android…...

编程日记 2024/5/24 2:30:53

【紧急预警】CPython 3.12升级后，3款主流内存工具失效！2024最稳选型组合（含兼容性补丁与迁移路径）

第一章：Python 内存检测工具选型的底层逻辑与演进脉络Python 内存管理机制以引用计数为核心，辅以循环垃圾回收器（GC）和内存池（pymalloc），这决定了内存问题往往隐匿于对象生命周期、引用链异常或…...

编程新知 2026/3/27 11:38:05

解锁学术新姿势：书匠策AI——毕业论文的“全能工匠”

在学术探索的征途中，毕业论文如同一座巍峨的山峰，既是对过往学习成果的全面检验，也是通往未来学术或职业道路的关键一步。然而，面对这座“大山”，许多学子常常感到力不从心，从选题迷茫到内容匮乏&#xff0…...

编程新知 2026/3/27 11:21:58

CTFHub | 解密MySQL、Redis、MongoDB流量中的隐藏Flag

1. 数据库流量分析入门：为什么需要Wireshark？ 当你参加CTF比赛时，经常会遇到需要从数据库流量中寻找Flag的题目。这类题目通常会给你一个抓包文件（pcap格式），里面记录了MySQL、Redis或MongoDB等数据库的网络…...

编程新知 2026/3/27 10:47:50

保姆级教程：用命令行实时监控瑞芯微RK3588的CPU/GPU/NPU负载与温度

嵌入式开发实战：构建RK3588芯片全维度性能监控系统在边缘计算和AI推理场景中，RK3588作为一款高性能SoC，其复杂的多核架构（包括6核CPU、Mali-G610 GPU和6TOPS NPU）对系统监控提出了更高要求。本文将手把手教你搭建一个…...

编程新知 2026/3/27 10:25:43

气象数据可视化必看：ERA5降水资料从m转mm的3种场景解决方案

气象数据可视化实战：ERA5降水资料单位换算与场景化应用指南当你在深夜的实验室里盯着屏幕上那一串以"m"为单位的降水数据时，是否曾困惑过如何将它们转化为更符合学术惯例的"mm"？作为处理过数百个气象数据集的老手&#…...

编程新知 2026/3/27 9:59:22

[特殊字符] Meixiong Niannian画图引擎应用场景：独立音乐人专辑封面AI生成流程

Meixiong Niannian画图引擎应用场景：独立音乐人专辑封面AI生成流程 1. 项目简介 Meixiong Niannian画图引擎是一款专为个人GPU设计的轻量化文本生成图像系统，基于Z-Image-Turbo底座和meixiong Niannian Turbo LoRA技术构建。这个引擎针对通用画图场景进…...

编程新知 2026/3/27 9:45:08