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

尚硅谷Ajax笔记

news 2026/1/24 15:27:26

一天拿下

介绍
- 二级目录
- - 三级目录

b站链接

介绍

ajax优缺点
在这里插入图片描述
http

node.js下载配置好环境

express框架
切换到项目文件夹，执行下面两条命令
有报错,退出用管理员身份打开
或者再命令提示符用管理员身份打开

npm init --yes
npm i  express

请求

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

ajax请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</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];btn.onclick=function(){// console.log('test');//创建对象const xhr = new XMLHttpRequest();const result = document.getElementById("result");//初始化 设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/server');//发送xhr.send();xhr.onreadystatechange = function(){//判断（服务端返回了所有的结果）if(xhr.readyState === 4){if(xhr.status >=200 && xhr.status<300){//响应行/* console.log(xhr.status);//状态码console.log(xhr.statusTest);//状态字符串console.log(xhr.getAllResponseHeaders());//所有响应头console.log(xhr.response); */result.innerHTML = xhr.response;}else{}}}}</script>
</body>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#result{width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById("result");//绑定事件result.addEventListener("mouseover",function(){//创建对象const xhr = new XMLHttpRequest();//初始化 设置类型与URLxhr.open('POST','http://127.0.0.1:8000/server');//发送xhr.send('1234567');//事件绑定xhr.onreadystatechange = function(){//判断if(xhr.readyState === 4){if(xhr.status>=200 && xhr.status<300){//处理服务端返回结果result.innerHTML=xhr.response;}}}})</script>
</body>
</html>

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

设置请求头

//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.setRequestHeader('name','atguigu');//发送xhr.send('a=100 & b=200 &c=300');

在这里插入图片描述

app.all('/server',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Hearders','*')//设置响应体response.send('HELLO AJAX POST');
});

json数据响应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#result{width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById("result");//绑定事件window.onkeydown = function(){//创建对象const xhr = new XMLHttpRequest();//设置响应体数据类型xhr.responseType = 'json';//初始化 设置类型与URLxhr.open('GET','http://127.0.0.1:8000/json-server');//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.setRequestHeader('name','atguigu');//发送xhr.send();//事件绑定xhr.onreadystatechange = function(){//判断if(xhr.readyState === 4){if(xhr.status>=200 && xhr.status<300){console.log(xhe.response);//处理服务端返回结果result.innerHTML=xhr.response.name;}}}}</script>
</body>
</html>

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

nodemon
有报错，退出软件用管理员身份打开

npm install -g nodemon

nodemon server.js

ie缓存

<script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click',function(){// console.log('test');const xhr = new XMLHttpRequest();xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >=200 && xhr.status<300){result.innerHTML = xhr.response;}}}})</script>

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

超时与网络异常

 <script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click',function(){// console.log('test');const xhr = new XMLHttpRequest();//超时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){result.innerHTML = xhr.response;}}}})</script>


app.get('/delay',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');setImmeout(()=>{//设置响应体response.send('延时响应');},3000);});

取消请求


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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 =null;btns[0].onlick = function(){x=new XMLHttpRequest();x.open("GET",'http://127.0.0.1:8000/delay');x.send();}btns[1].onlick = function(){x.abort();}</script>
</body>
</html>

请求重复发送问题

<script>const btns = document.querySelectorAll('button');let x =null;btns[0].onlick = function(){//判断标识变量if(isSending) x.abort();//如果正在发送，则取消该请求，创建一个新请求x=new XMLHttpRequest();isSending = true;x.open("GET",'http://127.0.0.1:8000/delay');x.send();x.onreadystatechange=function(){if(x.readyState === 4){isSending = false;}}}btns[1].onlick = function(){x.abort();}</script>

怎么感觉学的迷迷糊糊的……
emo中

我还会回来的……

二级目录

三级目录

尚硅谷Ajax笔记

一天拿下介绍二级目录三级目录 b站链接介绍 ajax优缺点 http node.js下载配置好环境 express框架切换到项目文件夹，执行下面两条命令有报错,退出用管理员身份打开或者再命令提示符用管理员身份打开 npm init --yes npm i express请求 <script>//引…...

编程日记 2024/2/11 7:31:11

【MATLAB源码-第138期】基于matlab的D2D蜂窝通信仿真，对比启发式算法，最优化算法和随机算法的性能。

操作环境： MATLAB 2022a 1、算法描述 D2D蜂窝通信介绍 D2D蜂窝通信允许在同一蜂窝网络覆盖区域内的终端设备直接相互通信，而无需数据经过基站或网络核心部分转发。这种通信模式具有几个显著优点：首先，它可以显著降低通信延迟&…...

编程日记 2024/2/11 7:29:09

AcWing 第 142 场周赛 B.最有价值字符串(AcWing 5468) (Java)

AcWing 第 142 场周赛 B.最有价值字符串(AcWing 5468) (Java) 比赛链接：AcWing 第 142 场周赛 x题传送门：B.最有价值字符串题目：不展示分析： 题目不难，不过有坑😭。我们可以定义一个数组记录每个字…...

编程日记 2024/2/11 7:28:08

滑块识别 1. 获取图片测试网站：https://www.geetest.com/adaptive-captcha-demo 2. 点击滑块拼图并开始验证 # 1.打开首页 driver.get(https://www.geetest.com/adaptive-captcha-demo)# 2.点击【滑动拼图验证】 tag WebDriverWait(driver, 30, 0.5).until(la…...

编程日记 2024/2/11 7:27:07

每日五道java面试题之java基础篇（四）

第一题. 访问修饰符 public、private、protected、以及不写（默认）时的区别？ Java 中，可以使⽤访问控制符来保护对类、变量、⽅法和构造⽅法的访问。Java ⽀持 4 种不同的访问权限。 default (即默认，什么也不写&…...

编程日记 2024/2/11 7:26:06

我的docker随笔43：问答平台answer部署

本文介绍开源问答社区平台Answer的容器化部署。起因笔者一直想搭建一个类似stack overflower这样的平台，自使用了Typora，就正式全面用MarkdownTyporagit来积累自己的个人知识库，但没有做到web化，现在也还在探索更好的方法。无…...

编程日记 2024/2/11 7:24:37

17、ELK

17、ELK helm 安装 elkfk（kafka 集群外可访问） ES/Kibana <— Logstash <— Kafka <— Filebeat 部署顺序： 1、elasticsearch 2、kibana 3、kafka 4、logstash 5、filebeat kubectl create ns elkhelm3部署elkfk 1、elast…...

编程日记 2024/2/11 7:11:22

React+Antd+tree实现树多选功能（选中项受控+支持模糊检索）

1、先上效果树型控件，选中项形成一棵新的树，若父选中，子自动选中，子取消，父不取消，子选中，所有的父节点自动取消。同时支持模糊检索，会检索出所有包含该内容的关联节点。 2、环境准…...

编程日记 2024/2/11 7:05:15

鸿蒙 WiFi 扫描流程（2）

接着上篇没有记录完的，我们继续梳理，需要上一篇做基础的请看：鸿蒙 WiFi 扫描流程（1） 上一篇我们讲到 scan_service.cpp 里面的 SingleScan 方法，继续这个方法往下看： // foundation/communicat…...

编程日记 2024/2/11 7:04:14

微信小程序（四十）API的封装与调用

注释很详细，直接上代码上一篇新增内容： 1.在单独的js文件中写js接口 2.以注册为全局wx的方式调用接口源码： utils/testAPI.js const testAPI{/*** * param {*} title */simpleToast(title提示){//可传参，默认为‘提示’wx.sho…...

编程日记 2024/2/11 7:00:09

WebSocket+Http实现功能加成

WebSocketHttp实现功能加成前言首先，WebSocket和HTTP是两种不同的协议，它们在设计和用途上有一些显著的区别。以下是它们的主要特点和区别： HTTP (HyperText Transfer Protocol): 请求-响应模型： HTTP 是基于请求-响应模型的协…...

编程日记 2024/2/11 6:58:07

go语言实现LRU缓存

go语言实现LRU Cache 题目描述详细代码题目描述设计和构建一个“最近最少使用”缓存，该缓存会删除最近最少使用的项目。缓存应该从键映射到值(允许你插入和检索特定键对应的值)，并在初始化时指定最大容量。当缓存被填满时，它应该删除最近最…...

编程日记 2024/2/11 6:57:05

git的奇特知识点

展示帮助信息 git help -gThe common Git guides are:attributes Defining attributes per pathcli Git command-line interface and conventionscore-tutorial A Git core tutorial for developerscvs-migration Git for CVS usersdiff…...

编程日记 2024/2/11 6:56:05

按键扫描16Hz-单片机通用模板

按键扫描16Hz-单片机通用模板一、按键扫描的原理1、直接检测高低电平类型2、矩阵扫描类型3、ADC检测类型二、key.c的实现1、void keyScan(void) 按键扫描函数①void FHiKey(void) 按键按下功能②void FSameKey(void) 按键长按功能③void FLowKey(void) 按键释放功能三、key.h的…...

编程日记 2024/2/11 6:54:03

在容器镜像中为了安全为什么要删除 setuid 和 setgid?

在容器镜像中删除 setuid（set user ID）和 setgid（set group ID）权限通常是出于安全考虑。这两个权限位允许进程在执行时以文件所有者或文件所属组的身份运行，而不是以调用进程的用户身份运行。删除 setuid 和 setgid…...

编程日记 2024/2/11 6:51:00

Flink 动态表 (Dynamic Table) 解读

博主历时三年精心创作的《大数据平台架构与原型实现：数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行，点击《重磅推荐：建大数据平台太难了！给我发个工程原型吧！》了解图书详情，…...

编程日记 2024/2/11 6:49:59

【原创附源码】Flutter海外登录--Google登录最详细流程

最近接触了几个海外登录的平台，踩了很多坑，也总结了很多东西，决定记录下来给路过的兄弟坐个参考，也留着以后留着回顾。更新时间为2024年2月8日，后续集成方式可能会有变动，所以目前的集成流程仅供参考&#…...

编程日记 2024/2/11 6:47:57

第70讲axios后端请求工具类封装

axios工具类封装： // 引入axios import axios from axios;// 创建axios实例 const httpService axios.create({// url前缀-http:xxx.xxx// baseURL: process.env.BASE_API, // 需自定义baseURL:http://localhost:80/,// 请求超时时间timeout: 3000 // 需自定义 })…...

编程日记 2024/2/11 6:44:54

【数学建模】【2024年】【第40届】【MCM/ICM】【F题减少非法野生动物贸易】【解题思路】

一、题目 （一） 赛题原文 2024 ICM Problem F: Reducing Illegal Wildlife Trade Illegal wildlife trade negatively impacts our environment and threatens global biodiversity. It is estimated to involve up to 26.5 billion US dollars per y…...

编程日记 2024/2/11 6:43:53

第3节、电机定速转动【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】，查看本系列全部文章摘要：本节介绍用定时器定时的方式，精准控制脉冲时间，从而控制步进电机速度。一、计算过程电机每一步的角速度等于走这一步所花费的时间，走一步角度等于步距角&#xff…...

编程日记 2024/2/11 6:36:44

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2026/1/24 0:21:10

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层将题目图片经过超分、去噪、倾斜校正后，分别用…...

编程新知 2026/1/24 0:21:10

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/1/18 3:33:36

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44