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

AJAX复习记录

news 2026/4/1 22:56:30

一、什么是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

快速部署Python3.10环境：Miniconda镜像实战教学

快速部署Python3.10环境&#xff1a;Miniconda镜像实战教学 1. 为什么选择Miniconda搭建Python环境&#xff1f; 在Python开发中&#xff0c;最让人头疼的问题之一就是环境管理。不同项目可能需要不同版本的Python和依赖库&#xff0c;直接安装会导致版本冲突。Miniconda提供…...

编程新知 2026/4/1 22:04:56

保姆级教程：用STM32的定时器输入捕获功能，手把手教你解码任意红外遥控器

STM32定时器输入捕获实战&#xff1a;从零解码未知协议红外遥控信号 红外遥控技术在家电控制领域已有数十年历史&#xff0c;但面对市面上五花八门的遥控协议&#xff0c;开发者常常陷入协议适配的泥潭。本文将带你突破协议限制&#xff0c;利用STM32的定时器输入捕获功能&…...

编程新知 2026/4/1 20:07:37

CosyVoice2-0.5B效果实测：背景噪音音频对克隆效果影响量化

CosyVoice2-0.5B效果实测&#xff1a;背景噪音音频对克隆效果影响量化 1. 测试背景与目的 声音克隆技术近年来发展迅猛&#xff0c;阿里开源的CosyVoice2-0.5B作为一款强大的零样本语音合成系统&#xff0c;能够在短短3秒内复刻任意说话人的声音。但在实际应用中&#xff0c;…...

编程新知 2026/4/1 18:23:31

2025届学术党必备的六大AI科研工具推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek AI写作软件&#xff0c;是人工智能技术于内容创作领域的具体运用&#xff0c;正一步步改变传…...

编程新知 2026/4/1 18:12:25

Janus-Pro-7B开发者案例：基于Gradio API构建私有AI内容中台

Janus-Pro-7B开发者案例&#xff1a;基于Gradio API构建私有AI内容中台 1. 项目概述 Janus-Pro-7B是DeepSeek发布的一款统一多模态理解与生成模型&#xff0c;它通过创新的架构设计解决了传统模型在理解与生成任务上的冲突问题。该模型支持图像问答、OCR识别、图表分析等理解…...

编程新知 2026/4/1 17:33:12

霜儿-汉服-造相Z-Turbo作品集：看看AI能生成多美的汉服少女图

霜儿-汉服-造相Z-Turbo作品集&#xff1a;看看AI能生成多美的汉服少女图 1. 惊艳开篇&#xff1a;AI汉服艺术的魅力 当传统汉服遇上现代AI技术&#xff0c;会碰撞出怎样的火花&#xff1f;霜儿-汉服-造相Z-Turbo给出了令人惊叹的答案。这个基于Xinference部署的文生图模型服务…...

编程新知 2026/4/1 17:29:04

MDS vs PCA：哪种降维方法更适合你的数据？

MDS与PCA深度对比&#xff1a;从算法原理到实战选型指南 当面对高维数据时&#xff0c;降维技术就像一把打开数据奥秘的钥匙。在众多降维方法中&#xff0c;多维尺度变换(MDS)和主成分分析(PCA)是最常被比较的两种经典技术。它们都能将复杂的高维数据简化为更易理解的二维或三维…...

编程新知 2026/4/1 17:26:59

2026最权威的降重复率工具解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 知网AI检测系统会去对文本的语义连贯性展开多维分析&#xff0c;会对文本的句式结构进行多维…...

编程新知 2026/4/1 16:55:18

效率倍增：用快马云端jupyter notebook打造可复现、易协作的数据分析流水线

效率倍增&#xff1a;用快马云端jupyter notebook打造可复现、易协作的数据分析流水线 最近在团队里做数据分析时&#xff0c;经常遇到这样的困扰&#xff1a;每次新同事加入项目&#xff0c;都要花半天时间配置本地jupyter环境&#xff1b;好不容易跑通的代码&#xff0c;换台…...

编程新知 2026/4/1 16:32:50

为什么90%的词库转换都会失败？输入法词库迁移的终极解决方案：全方位指南

为什么90%的词库转换都会失败&#xff1f;输入法词库迁移的终极解决方案&#xff1a;全方位指南 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 在数字化时代&#x…...

编程新知 2026/4/1 16:24:43