AJAX复习记录
一、什么是AJAX
AJAX（ Asynchronous JavaScript And XML）就是异步的 JS 和 XML
通过 AJAX 可以在浏览器中向服务器发送异步请求
最大的优势：无刷新获取数据，就是可以在不刷新网页的情况下向服务器发送请求，用于实现懒加载（按需加载）
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
二、AJAX的优缺点
优点
- 可以无需刷新页面与服务器端进行通信
- 允许你根据用户行为来更新部分页面内容
缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- 对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（ Asynchronous JavaScript And XML）就是异步的 JS 和 XML 通过 AJAX 可以在浏览器中向服务器发送异步请求 最大的优势：无刷新获取数据，就是可以在不刷新网页的情况下向服务器发送请求，用于实现…...
内网穿透的应用-企业级远程办公方案：NAS部署网页版Linux，HTTPS加密访问全配置
文章目录 前言1. 下载Docker-Webtop镜像2. 运行Docker-Webtop镜像3. 本地访问网页版Linux系统4. 群晖NAS安装Cpolar工具5. 配置异地访问Linux系统6. 异地远程访问Linux系统7. 固定异地访问的公网地址 前言 今天要给大家分享一个超炫酷的技能——如何在你的群晖NAS设备上部署Do…...
《白帽子讲 Web 安全》之移动 Web 安全
目录 摘要 一、WebView 简介 二、WebView 对外暴露 WebView 对外暴露的接口风险 三、通用型 XSS - Universal XSS 介绍 四、WebView 跨域访问 五、与本地代码交互 js 5.1接口暴露风险： 5.2漏洞利用： 5.3JavaScript 与 Native 代码通信 六、Chr…...
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 交集选择器 作用：…...
测试工程师Ai应用实战指南简例prompt
以下是一个真实具体的案例，展示测试工程师如何在不同阶段结合DeepSeek提升效率。案例基于电商平台"订单超时自动关闭"功能测试： 案例背景 项目名称：电商平台订单系统V2.3 测试目标：验证"用户下单后30分钟未支付，订单自动关闭并释放库存"功能 技术栈：…...
贪心人生，贪心算法
引言 贪心算法（Greedy Algorithm）是一种在每一步选择中都采取当前状态下最优（或最有利）的选择，从而希望导致全局最优解的算法。贪心算法的核心思想是局部最优解能够导致全局最优解。 贪心算法通常用于解决最优化问题…...
【论文阅读笔记】用于恶劣天气条件下的目标检测的IA-YOLO(Image-Adaptive YOLO) | 适合雾天和低光照场景
目录 摘要 1 方法 ■ DIP模块 ▲像素级滤波器 ▲锐化滤波器 ▲去雾滤波器 ■ CNN-PP Module ■ 检测网络模块 ■ 混合数据训练 2 实验 ■ 实现细节 ■ 有雾图像上的实验 ■ 低照度图像上的实验 ■ 消融研究 ■ 有效分析 结论 论文题目：Image-Adapti…...
【Elasticsearch】Set up a data stream 创建data stream
在 Elasticsearch 中，数据流（Data Stream）是一种用于管理时间序列数据的高级功能，它通过自动管理索引的生命周期和版本控制，简化了大规模时间序列数据的存储和查询。以下是结合上述翻译内容，对 Elasticsear…...
redhat无网利用iso搭建本地yum源
redhat8 挂载iso镜像到本地目录 第一种方法： 上传rhel8的iso文件到服务器。 mkdir /mnt/cdrom mount -t iso9660 -o loop rhel-8.10-x86_64-dvd.iso /mnt/cdrom 第二种方法： 如果是vmware等自己安装的虚拟机，可以直接挂载iso镜像到cd/dvd…...
我的ChatGPT怎么登不上？
近期，不少用户反馈在使用ChatGPT时遇到登录困难、连接超时等问题。本文将从技术角度分析常见原因，并提供合规、安全的解决方案，同时结合开发者实际需求推荐实用工具，助您高效应对登录障碍。 ChatGPT登录失败的常见原因 网络环境限…...
飞机大战lua迷你世界脚本
-- 迷你世界飞机大战 v1.2 -- 星空露珠工作室制作 -- 最后更新：2024年1月 ----------------------------- -- 迷你世界API适配配置 ----------------------------- local UI { BASE_ID 7477478487091949474-22856, -- UI界面ID ELEMENTS { BG 1, -- 背景 BTN_LE…...
链表常用技巧和操作总结
链表是我们数据结构很重要的一点,也是常考的点 接下来我会先进行技巧总结,然后再通过具体的题来进行详解 总结 1.常用技巧 画图: 用笔是肯定比只用脑子强的,画图会更加清晰 引入虚拟头节点: 便于处理边界: 如果没有头节点,也就是第一个节点就有有效数据,就需要考虑边界问题…...
CSS的列表属性
列表相关属性,可以用在ul,ol,li元素上. CSS属性名功能属性值 list-style-type 设置列表符号 常用值如下: none:不显示前面的标识(很常用!) square:实心方块 disc:圆形 decimal:数字 lower-roma:小写罗马字 upper-roman:大写罗马字 lower-alph:小写字母 upper-alpha:大写字母 …...
Django 5实用指南（十三）安全性与防护
随着Web应用的普及，安全性问题越来越成为开发者关注的重点。Django5为Web开发者提供了强大的安全防护功能，可以帮助开发者防范常见的Web攻击，如SQL注入、跨站脚本攻击（XSS）、跨站请求伪造（CSRF）…...
cesium+vue3自定义HTML实体弹窗、加高德路网、防实体漂浮、让用户画圆、鹰眼
一、基础使用：Cesium.js基础使用（vue）-CSDN博客 1、基础路径 为 Cesium 库设置一个全局变量 CESIUM_BASE_URL，用于指定 Cesium 的资源文件（如 WebGL shaders、纹理、字体等）的 示例场景：假设你…...
Go红队开发—编解码工具
文章目录 开启一个项目编解码工具开发Dongle包Base64编解码摩斯密码URL加解密AES加解密 MD5碰撞工具开发 开启一个项目 这作为补充内容，可忽略直接看下面的编解码： 一开始用就按照下面的步骤即可 1.创建一个文件夹，你自己定义名字(建议只用…...
计算机毕业设计SpringBoot+Vue.js常规应急物资管理系统(源码+文档+PPT+讲解)
温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...
thinkphp5对接阿里云ocr试卷切题
thinkphp5对接阿里云ocr试卷切题 提示：切题使用的是api:RecognizeEduPaperCut 以下是基于 ThinkPHP5.14 框架调用阿里云 RecognizeEduPaperCut 接口的详细实现步骤和代码示例。 文章目录 thinkphp5对接阿里云ocr试卷切题前言1、前置准备2、 配置文件3、控制器直接引…...
AI数据分析：用DeepSeek做数据清洗
在当今数据驱动的时代，数据分析已成为企业和个人决策的重要工具。随着人工智能技术的快速发展，AI 驱动的数据分析工具正在改变我们处理和分析数据的方式。本文将着重介绍如何使用 DeepSeek 进行数据清洗。 数据清洗是数据分析的基础，其目的是…...
免费轻巧多功能 PDF 处理工具：转换、压缩、提取一应俱全
软件技术 今天要给大家分享一款超实用的 PDF 处理工具，它免费又轻巧，如同随时待命的得力小帮手，功能之强大超乎想象，真的值得大家收藏。 这款工具是绿色版软件，解压后开启，满满的 PDF 处理功能便映入眼帘…...
OpenLayers 可视化之热力图
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
R语言AI模型部署方案：精准离线运行详解
R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...
WPF八大法则：告别模态窗口卡顿
⚙️ 核心问题：阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题：…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
论文阅读：Matting by Generation
今天介绍一篇关于 matting 抠图的文章，抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法，已经有很多的工作和这个任务相关。这两年 diffusion 模型很火，大家又开始用 diffusion 模型做各种 CV 任务了&am…...
)
ArcPy扩展模块的使用(3)
管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如，可以更新、修复或替换图层数据源，修改图层的符号系统，甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...