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

AJAX复习记录

news 2025/9/22 20:04:17

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

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

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

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/7/27 12:13:59

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/9/3 15:45:36

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2025/7/8 18:12:44

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

【安全篇】金刚不坏之身：整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

编程新知 2025/8/3 23:00:48

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

编程新知 2025/9/22 6:05:24

基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...

编程新知 2025/9/21 5:58:24

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

编程新知 2025/9/21 7:46:24