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

尚硅谷Ajax笔记

news 2026/5/20 3:26:56

一天拿下

  • 介绍
    • 二级目录
      • 三级目录

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框架 切换到项目文件夹&#xff0c;执行下面两条命令 有报错,退出用管理员身份打开 或者再命令提示符用管理员身份打开 npm init --yes npm i express请求 <script>//引…...

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

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

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

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

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

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

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

滑块识别验证

滑块识别 1. 获取图片 测试网站&#xff1a;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、以及不写&#xff08;默认&#xff09;时的区别&#xff1f; Java 中&#xff0c;可以使⽤访问控制符来保护对类、变量、⽅法和构造⽅法的访问。Java ⽀持 4 种不同的访问权限。 default (即默认&#xff0c;什么也不写&…...

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

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

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

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

17、ELK

17、ELK helm 安装 elkfk&#xff08;kafka 集群外可访问&#xff09; ES/Kibana <— Logstash <— Kafka <— Filebeat 部署顺序&#xff1a; 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、先上效果 树型控件&#xff0c;选中项形成一棵新的树&#xff0c;若父选中&#xff0c;子自动选中&#xff0c;子取消&#xff0c;父不取消&#xff0c;子选中&#xff0c;所有的父节点自动取消。同时支持模糊检索&#xff0c;会检索出所有包含该内容的关联节点。 2、环境准…...

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

鸿蒙 WiFi 扫描流程（2）

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

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

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

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

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

WebSocket+Http实现功能加成

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

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

go语言实现LRU缓存

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

编程日记 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&#xff08;set user ID&#xff09;和 setgid&#xff08;set group ID&#xff09;权限通常是出于安全考虑。这两个权限位允许进程在执行时以文件所有者或文件所属组的身份运行&#xff0c;而不是以调用进程的用户身份运行。 删除 setuid 和 setgid…...

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

Flink 动态表 (Dynamic Table) 解读

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

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

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

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

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

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

axios工具类封装&#xff1a; // 引入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题 减少非法野生动物贸易】【解题思路】

一、题目 &#xff08;一&#xff09; 赛题原文 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步进电机系列教程】

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

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

利欧股份持续推进“制造业+科技投资”战略 主业与投资协同效应显现

全球商业航天企业SpaceX&#xff08;太空探索技术公司&#xff09;计划于6月12日在纳斯达克上市&#xff0c;股票代码为SPCX。此次IPO预计融资规模约为800亿美元&#xff0c;市场估值在1.75万亿至2万亿美元之间&#xff0c;引发资本市场广泛关注。据悉&#xff0c;利欧股份&…...

编程新知 2026/5/20 1:32:46

告别打包失败！Matlab开发者必看：Runtime版本精准匹配与离线部署全攻略

MATLAB Runtime精准匹配与离线部署实战指南 当MATLAB开发者遭遇Runtime版本陷阱 深夜的办公室里&#xff0c;王工程师盯着屏幕上第7次打包失败的红色错误提示&#xff0c;揉了揉酸胀的眼睛。这个场景对许多MATLAB开发者来说并不陌生——明明在自己的R2022b Update 3环境中完美运…...

编程新知 2026/5/20 0:44:36

BiliBiliToolPro：解放双手的B站自动化神器，让你的账号管理从未如此轻松

BiliBiliToolPro&#xff1a;解放双手的B站自动化神器&#xff0c;让你的账号管理从未如此轻松 【免费下载链接】BiliBiliToolPro B 站&#xff08;bilibili&#xff09;自动任务工具&#xff0c;支持docker、青龙、k8s等多种部署方式。全面拥抱AI。敏感肌也能用。 项目地址:…...

编程新知 2026/5/20 0:12:25

别让严谨变成AI味！实测5大主流降AI工具，这款能完美保留原格式

最近看了一些行业报告&#xff0c;AI工具在写作方面的普及率真的已经超乎想象了。 很多大学生在写论文时也都习惯用AI来辅助寻找灵感、提高效率。 与此同时&#xff0c;相关部门针对人工智能写作出台了一系列规定&#xff0c;各大学术检测平台也都在不断升级AIGC检测算法。 现…...

编程新知 2026/5/19 23:59:04

EPLAN端子图表修改避坑指南：从占位符到动态区域，手把手教你定制专属端子连接图

EPLAN端子图表深度定制指南&#xff1a;从占位符优化到动态布局实战 在电气工程设计领域&#xff0c;EPLAN作为行业标杆软件&#xff0c;其端子图表功能直接影响项目交付的专业度和效率。许多工程师在项目后期常遇到这样的困境&#xff1a;标准端子图表无法满足客户特殊规范要求…...

编程新知 2026/5/19 23:35:20

别再只把JTAG当烧录器了！一文搞懂它的边界扫描（Boundary-Scan）到底怎么玩

解锁JTAG边界扫描的隐藏技能&#xff1a;从烧录到硬件诊断的全能玩法 在嵌入式开发领域&#xff0c;JTAG接口常被简化为"烧录工具"的代名词——这种认知偏差让我们错失了它最强大的能力。想象一下&#xff1a;当PCB上某个关键信号无法测量时&#xff0c;当BGA封装的芯…...

编程新知 2026/5/19 23:22:46

前端开发从入门到精通：Vue3+TypeScript实战教程

一、为什么软件测试从业者要学Vue3TypeScript在软件测试领域&#xff0c;尤其是自动化测试和性能测试方向&#xff0c;懂前端开发技术早已不是加分项&#xff0c;而是必备技能。作为测试从业者&#xff0c;掌握Vue3TypeScript能为你的职业发展带来多重优势&#xff1a;&#xf…...

编程新知 2026/5/19 23:02:00

NoFences：如何用免费开源方案革命性管理你的Windows桌面分区

NoFences&#xff1a;如何用免费开源方案革命性管理你的Windows桌面分区 【免费下载链接】NoFences &#x1f6a7; Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 你是否厌倦了在杂乱无章的Windows桌面上寻找文件&…...

编程新知 2026/5/19 22:28:34

鸿蒙ArkUI视频播放器开发实战：从AVPlayer到自定义控制与性能优化

1. 项目概述&#xff1a;为什么要在鸿蒙上做视频播放器&#xff1f;最近在捣鼓鸿蒙应用开发&#xff0c;发现社区里关于多媒体处理&#xff0c;特别是视频播放的深度分享还不多。很多开发者拿到Video组件&#xff0c;照着官方Demo跑起来一个播放界面就觉得完事了。但真要把一个…...

编程新知 2026/5/19 21:51:48

wpa_ctrl接口简介和使用总结

参考&#xff1a; wpa_supplicant简介与基础使用总结-CSDN博客 wpa_cli核心操作总结-CSDN博客 认识wpa_ctrl接口 在嵌入式Linux的C语言开发中&#xff0c;与 wpa_supplicant 交互的标准方法就是使用它官方提供的 wpa_ctrl 接口。这个接口以一组简单的C函数形式提供&#xff0c;…...

编程新知 2026/5/19 21:42:51