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

AJAX复习记录

news 2026/2/9 7:59:36

一、什么是AJAX

AJAX（ Asynchronous JavaScript And XML）就是异步的 JS 和 XML

通过 AJAX 可以在浏览器中向服务器发送异步请求

最大的优势：无刷新获取数据，就是可以在不刷新网页的情况下向服务器发送请求，用于实现懒加载（按需加载）

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

二、AJAX的优缺点

优点

  1. 可以无需刷新页面与服务器端进行通信
  2.  允许你根据用户行为来更新部分页面内容

缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题（同源）
  3. 对SEO 不友好

三、请求流程

如果只是测试的话，可以让浏览器临时禁用 CORS：

WIN+R输入以下启用 关闭浏览器安全策略的Chrome

chrome.exe --disable-web-security --user-data-dir=C:\Temp

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>AJAX GET 请求</title><style>.GETBox {width: 200px;height: 100px;border: 1px solid black;}</style></head><body><button class="GETBtn">点击发送GET请求</button><div class="GETBox"></div><script>// 获取button元素const GETBtn = document.getElementsByClassName("GETBtn")[0];const GETBox = document.getElementsByClassName("GETBox")[0];// 绑定点击事件GETBtn.onclick = function () {// 创建对象const xhr = new XMLHttpRequest();// 设置响应体类型xhr.responseType = "json";// 请求超时回调xhr.timeout = function(){alert("请求超时");}// 请求异常回调xhr.onerror = function(){alert("网络异常");}// 初始化请求：设置请求方法和URL(在这里接query参数)xhr.open("GET", "http://shanhe.kim/api/za/chouq.php");// 设置请求头// xhr.setRequestHeader("Content-Type", "application/json");// 发送请求(send里放请求体参数)xhr.send();// 取消请求// xhr.abort();// 事件绑定：处理服务端返回的结果xhr.onreadystatechange = function () {// 判断 xhr对象中的状态属性-readyState// 0 UNSENT 未初始化: XHR对象已创建，但尚未调用open()方法初始化请求// 1 OPENED 启动: 已调用open()方法建立与服务器的连接，但尚未调用send()发送请求// 2 HEADERS_RECEIVED 发送完成: 已调用send()方法并发送请求至服务器，且服务器已返回响应头（HTTP状态码和响应头信息可用）// 3 LOADING 接收中: 正在接收服务器返回的响应体数据，部分数据可能已可用// 4 DONE 完成: 请求已完成，所有响应数据（包括状态码、响应头和响应体）均已接收并解析完毕if (xhr.readyState == 4) {// 判断响应状态码 200 401 403 404 500// 2xx 成功            3xx 重定向// 4xx 客户端错误       5xx 服务器错误if (xhr.status >= 200 && xhr.status < 300) {// 响应头console.log(xhr.getAllResponseHeaders());// 响应体console.log(xhr.response);// 将响应信息解析并放到页面中（这是没设置响应体类型时的写法）// GETBox.textContent = JSON.parse(xhr.response).content;// 设置了响应体类型之后可以直接用GETBox.textContent = xhr.response.data.draw;}}};};</script></body>
</html>

四、AJAX的IE缓存问题

在IE浏览器下，当访问同一个api时，IE浏览器可能会用上一次访问时缓存的数据，并不会更新到新的数据

解决方法：在请求路径中带一个不会重复的query参数，例如：

xhr.open("GET", "http://shanhe.kim/api/za/chouq.php?t="+Date.now());

相关文章：

AJAX复习记录

一、什么是AJAX AJAX&#xff08; Asynchronous JavaScript And XML&#xff09;就是异步的 JS 和 XML 通过 AJAX 可以在浏览器中向服务器发送异步请求 最大的优势&#xff1a;无刷新获取数据&#xff0c;就是可以在不刷新网页的情况下向服务器发送请求&#xff0c;用于实现…...

编程日记 2025/3/4 8:56:59

内网穿透的应用-企业级远程办公方案：NAS部署网页版Linux，HTTPS加密访问全配置

文章目录 前言1. 下载Docker-Webtop镜像2. 运行Docker-Webtop镜像3. 本地访问网页版Linux系统4. 群晖NAS安装Cpolar工具5. 配置异地访问Linux系统6. 异地远程访问Linux系统7. 固定异地访问的公网地址 前言 今天要给大家分享一个超炫酷的技能——如何在你的群晖NAS设备上部署Do…...

编程日记 2025/3/4 8:54:55

《白帽子讲 Web 安全》之移动 Web 安全

目录 摘要 一、WebView 简介 二、WebView 对外暴露 WebView 对外暴露的接口风险 三、通用型 XSS - Universal XSS 介绍 四、WebView 跨域访问 五、与本地代码交互 js 5.1接口暴露风险&#xff1a; 5.2漏洞利用&#xff1a; 5.3JavaScript 与 Native 代码通信 六、Chr…...

编程日记 2025/3/4 8:53:54

CSS_复合选择器

目录 7. 复合选择器 7.1 交集选择器 7.2 并集选择器 7.3 后代选择器 7.4 子代选择器 7.5 兄弟选择器 7.6 属性选择器 7.7 伪类选择器 7.7.1动态伪类 7.7.2结构伪类 7.7.3否定伪类 7.7.4 UI伪类 7.7.5 目标选择器 7. 复合选择器 7.1 交集选择器 作用&#xff1a;…...

编程日记 2025/3/4 8:52:53

测试工程师Ai应用实战指南简例prompt

以下是一个真实具体的案例，展示测试工程师如何在不同阶段结合DeepSeek提升效率。案例基于电商平台"订单超时自动关闭"功能测试： 案例背景 项目名称：电商平台订单系统V2.3 测试目标：验证"用户下单后30分钟未支付，订单自动关闭并释放库存"功能 技术栈：…...

编程日记 2025/3/4 8:51:52

贪心人生，贪心算法

引言 贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取当前状态下最优&#xff08;或最有利&#xff09;的选择&#xff0c;从而希望导致全局最优解的算法。贪心算法的核心思想是局部最优解能够导致全局最优解。 贪心算法通常用于解决最优化问题…...

编程日记 2025/3/4 8:50:50

【论文阅读笔记】用于恶劣天气条件下的目标检测的IA-YOLO(Image-Adaptive YOLO) | 适合雾天和低光照场景

目录 摘要 1 方法 ■ DIP模块 ▲像素级滤波器 ▲锐化滤波器 ▲去雾滤波器 ■ CNN-PP Module ■ 检测网络模块 ■ 混合数据训练 2 实验 ■ 实现细节 ■ 有雾图像上的实验 ■ 低照度图像上的实验 ■ 消融研究 ■ 有效分析 结论 论文题目&#xff1a;Image-Adapti…...

编程日记 2025/3/4 8:48:45

【Elasticsearch】Set up a data stream 创建data stream

在 Elasticsearch 中&#xff0c;数据流&#xff08;Data Stream&#xff09;是一种用于管理时间序列数据的高级功能&#xff0c;它通过自动管理索引的生命周期和版本控制&#xff0c;简化了大规模时间序列数据的存储和查询。以下是结合上述翻译内容&#xff0c;对 Elasticsear…...

编程日记 2025/3/4 8:46:43

redhat无网利用iso搭建本地yum源

redhat8 挂载iso镜像到本地目录 第一种方法&#xff1a; 上传rhel8的iso文件到服务器。 mkdir /mnt/cdrom mount -t iso9660 -o loop rhel-8.10-x86_64-dvd.iso /mnt/cdrom 第二种方法&#xff1a; 如果是vmware等自己安装的虚拟机&#xff0c;可以直接挂载iso镜像到cd/dvd…...

编程日记 2025/3/4 8:45:42

我的ChatGPT怎么登不上？

近期&#xff0c;不少用户反馈在使用ChatGPT时遇到登录困难、连接超时等问题。本文将从技术角度分析常见原因&#xff0c;并提供合规、安全的解决方案&#xff0c;同时结合开发者实际需求推荐实用工具&#xff0c;助您高效应对登录障碍。 ChatGPT登录失败的常见原因 网络环境限…...

编程日记 2025/3/4 8:44:39

飞机大战lua迷你世界脚本

-- 迷你世界飞机大战 v1.2 -- 星空露珠工作室制作 -- 最后更新&#xff1a;2024年1月 ----------------------------- -- 迷你世界API适配配置 ----------------------------- local UI { BASE_ID 7477478487091949474-22856, -- UI界面ID ELEMENTS { BG 1, -- 背景 BTN_LE…...

编程日记 2025/3/4 8:43:37

链表常用技巧和操作总结

链表是我们数据结构很重要的一点,也是常考的点 接下来我会先进行技巧总结,然后再通过具体的题来进行详解 总结 1.常用技巧 画图: 用笔是肯定比只用脑子强的,画图会更加清晰 引入虚拟头节点: 便于处理边界: 如果没有头节点,也就是第一个节点就有有效数据,就需要考虑边界问题…...

编程日记 2025/3/4 8:42:36

CSS的列表属性

列表相关属性,可以用在ul,ol,li元素上. CSS属性名功能属性值 list-style-type 设置列表符号 常用值如下: none:不显示前面的标识(很常用!) square:实心方块 disc:圆形 decimal:数字 lower-roma:小写罗马字 upper-roman:大写罗马字 lower-alph:小写字母 upper-alpha:大写字母 …...

编程日记 2025/3/4 8:41:35

Django 5实用指南（十三）安全性与防护

随着Web应用的普及&#xff0c;安全性问题越来越成为开发者关注的重点。Django5为Web开发者提供了强大的安全防护功能&#xff0c;可以帮助开发者防范常见的Web攻击&#xff0c;如SQL注入、跨站脚本攻击&#xff08;XSS&#xff09;、跨站请求伪造&#xff08;CSRF&#xff09;…...

编程日记 2025/3/4 8:40:33

cesium+vue3自定义HTML实体弹窗、加高德路网、防实体漂浮、让用户画圆、鹰眼

一、基础使用&#xff1a;Cesium.js基础使用&#xff08;vue&#xff09;-CSDN博客 1、基础路径 为 Cesium 库设置一个全局变量 CESIUM_BASE_URL&#xff0c;用于指定 Cesium 的资源文件&#xff08;如 WebGL shaders、纹理、字体等&#xff09;的 示例场景&#xff1a;假设你…...

编程日记 2025/3/4 8:39:32

Go红队开发—编解码工具

文章目录 开启一个项目编解码工具开发Dongle包Base64编解码摩斯密码URL加解密AES加解密 MD5碰撞工具开发 开启一个项目 这作为补充内容&#xff0c;可忽略直接看下面的编解码&#xff1a; 一开始用就按照下面的步骤即可 1.创建一个文件夹&#xff0c;你自己定义名字(建议只用…...

编程日记 2025/3/4 8:35:28

计算机毕业设计SpringBoot+Vue.js常规应急物资管理系统(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/3/4 8:32:25

thinkphp5对接阿里云ocr试卷切题

thinkphp5对接阿里云ocr试卷切题 提示&#xff1a;切题使用的是api:RecognizeEduPaperCut 以下是基于 ThinkPHP5.14 框架调用阿里云 RecognizeEduPaperCut 接口的详细实现步骤和代码示例。 文章目录 thinkphp5对接阿里云ocr试卷切题前言1、前置准备2、 配置文件3、控制器直接引…...

编程日记 2025/3/4 8:30:23

AI数据分析：用DeepSeek做数据清洗

在当今数据驱动的时代&#xff0c;数据分析已成为企业和个人决策的重要工具。随着人工智能技术的快速发展&#xff0c;AI 驱动的数据分析工具正在改变我们处理和分析数据的方式。本文将着重介绍如何使用 DeepSeek 进行数据清洗。 数据清洗是数据分析的基础&#xff0c;其目的是…...

编程日记 2025/3/4 8:29:22

免费轻巧多功能 PDF 处理工具：转换、压缩、提取一应俱全

软件技术 今天要给大家分享一款超实用的 PDF 处理工具&#xff0c;它免费又轻巧&#xff0c;如同随时待命的得力小帮手&#xff0c;功能之强大超乎想象&#xff0c;真的值得大家收藏。 这款工具是绿色版软件&#xff0c;解压后开启&#xff0c;满满的 PDF 处理功能便映入眼帘…...

编程日记 2025/3/4 8:22:12

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

spring：实例工厂方法获取bean

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

编程新知 2025/11/25 22:46:30

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2026/2/7 21:32:44

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/12/18 6:00:45

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/10/31 21:11:39

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

编程新知 2026/2/8 18:10:17