前端开发工程师——ajax
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(…...
uni-app项目在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
uni-app项目在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json 出现这个问题是因为打开的文件地址不对，解决这个问题首先我们要查看是否有unpackage文件夹，如果有，项目直接指向unpackage\dist\dev\…...
最大连续1的个数（滑动窗口）
算法原理： 这道题大眼一看是关于翻转多少个0的问题，但是，如果你按照这种思维去做题，肯定不容易。所以我们要换一种思维去做，这种思维不是一下就能想到的，所以想不到也情有可原。 题目是：给定一…...
Spring Cloud 框架的应用详解
Spring Cloud 框架的应用详解 Spring Cloud 是一个基于 Spring Boot 的微服务架构开发工具，它提供了一系列工具用于快速构建分布式系统中的常见模式，如配置管理、服务发现、断路器、智能路由、微代理、控制总线、全局锁、选举、分布式会话和集群状态管理…...
C语言 数组——向函数传递数组
目录 把数组传给函数（Passing Arrays to Functions） 向函数传递一维数组 向函数传递二维数组 数组在学生成绩管理中的应用 例：计算每个学生的平均分 把数组传给函数（Passing Arrays to Functions） 向函数传递一维…...
数据链路层简单介绍
mac地址（物理地址） mac地址和ip地址，目的都是为了区分网络上的不同设备的，在最开始的时候，mac地址和ip地址是两伙人，独立各自提出的，ip地址是4个字节（早都不够用了）&…...
【软考】设计模式之装饰器模式
目录 1. 说明2. 应用场景3. 结构图4. 构成5. 适用性6. 优点7. 缺点8. java示例 1. 说明 1.动态地给一个对象添加一些额外的职责。2.Decorator Pattern。3.就增加功能而言，装饰器模式比生成子类更加灵活。4.一种在不改变现有对象结构的情况下，动态地给对…...
网络编程day6
IO多路复用的原理 IO多路复用是一种通过同时监视多个文件描述符（通常是套接字）来处理多个I/O操作的机制。它的原理可以简单概括为： 单线程处理多个I/O操作：传统的I/O模型中，每个I/O操作都需要一个线程或进程来处理。而…...
5.23总结
新增功能点 讨论 学生和老师均可发布话题，话题发布后，在该课程的用户可以在发布话题的课程中点击讨论参与课程的讨论，并可以进行评论，回复评论，点赞操作。每个话题发布时可添加多个图片文件，参加讨论的话…...
SQL Server基础学习笔记
一. 什么是SQL Server？ SQL Server是由微软公司开发的关系型数据库管理系统（RDBMS），它提供了存储、检索、处理和分析数据的功能。作为一种强大的数据库解决方案，SQL Server被广泛应用于企业级应用程序、Web应用程序、…...
用Vuex存储可配置下载的ip地址（用XML进行ajax请求配置文件）
1.在public文件夹下创建一个名为Configuration的文件在创建一个Configuration.txt里面就放IP地址（这里的名字可以随便命名一定性的被人解读文件含义） 例如： http://172.171.208.1:80032.在store文件夹中创建一个名为 ajaxModule.js 的 Vuex …...
Spring: OncePerRequestFilter
文章目录 一、介绍二、使用 一、介绍 OncePerRequestFilter是Spring Boot中的一个过滤器抽象类，它在Spring Security中也得到了广泛的应用。这个过滤器抽象类的主要目的是确保在每次外部请求时只执行一次过滤操作，对于服务器内部之间的forward等请求&am…...
《Python编程从入门到实践》day37
# 昨日知识点回顾 制定规范、创建虚拟环境并激活，正在虚拟环境创建项目、数据库和应用程序 # 今日知识点学习 18.2.4 定义模型Entry # models.py from django.db import models# Create your models here. class Topic(models.Model):"""用户学习的…...
GBDT、XGBoost、LightGBM算法详解
文章目录 一、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…...
【考研数学】李林《880》是什么难度水平强化够用吗
880是公认的质量高，但要是刷的方法不对，心态直接炸裂！🙉 我24年二战就是用的 880660 的黄金搭档，143分逆袭上岸211！（为什么说逆袭呢，因为我23年一战数学83，妥妥的菜鸡&am…...
Flutter 中的 AnimatedAlign 小部件：全面指南
Flutter 中的 AnimatedAlign 小部件：全面指南 在 Flutter 中，动画是增强用户界面和提升用户体验的强大工具。AnimatedAlign 是 Flutter 提供的一个动画组件，它允许你动画化子组件的对齐方式。这在实现动态布局变化、响应式设计或交互式动画时…...
(Qt) 默认QtWidget应用包含什么？
文章目录 ⭐前言⭐创建🛠️选择一个模板🛠️Location🛠️构建系统🛠️Details🛠️Translation🛠️构建套件(Kit)🛠️汇总 ⭐项目⚒️概要⚒️构建步骤⚒️清除步骤 ⭐Code🔦untitled…...
测试环境KDE组件漏洞修复
yarn白名单方案 解决漏洞： 方案： 此方式主要使用iptables的功能，对yarn的resourceManager服务的8088端口进行访问ip限制，目的限制8088端口只允许集群内ip访问。 #分别在两台resourceManager节点执行以下步骤ssh kde-offline1 #安装iptables服务，并启动设置为开机自启 yum …...
微服务下认证授权框架的探讨
前言 市面上关于认证授权的框架已经比较丰富了,大都是关于单体应用的认证授权,在分布式架构下,使用比较多的方案是--<应用网关>,网关里集中认证,将认证通过的请求再转发给代理的服务,这种中心化的方式并不适用于微服务,这里讨论另一种方案--<认证中心>,利用jwt去中…...
使用 ASM 修改字段类型，解决闪退问题
问题 我的问题是什么？ 在桥接类 UnityBridgeActivity 中处理不同 unity 版本调用 mUnityPlayer.destroy(); 闪退问题。 闪退日志如： 闪退日志说在 UnityBridgeActivity中找不到类型为 UnityPlayer 的属性 mUnityPlayer。 我们知道，Android…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角，以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。 坐标体系-像素 …...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。 请求方法 ： GET ：用于获取资源，…...