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

Ajax：跨域、防抖和节流、HTTP协议

news 2025/7/12 21:29:26

在善意的“双向奔赴”中，每个普通人都如星辰，微小但释放着自己的光芒，交织成灿烂的星河

文章目录

          • 跨域
          • 防抖和节流
          • HTTP协议
          • HTP状态码以及代表意义
          • 错误代码的影响
          • 移动的小天使

跨域
  • 同源策略
    • 概念：协议，域名，端口都一样
      • 协议：例如 http或者https
      • 域名：例如 www.bai.com
      • 端口：http协议默认端口是80，https默认端口是443
  • 两个非同源的URL带来的影响
    • 无法读取非同源网页的cookie、LocalStorage和IndexedDB
    • 无法接触非同源网页的dom
    • 无法向非同源地址发送ajax请求 (可以去请求，浏览器会阻止接收结果)
  • 跨域
    • 概念：违反了同源策略的ajax请求
    • 实现跨域
      • JSONP
        • 步骤
          1. 随便准备一个函数，用于接收服务器返回的结果
            • 函数要有一个形参，形参就是服务器返回的结果
          2. 定义一个script标签，标签的src指向接口地址
            • 必须执行callback函数，函数的值是前面准备好的函数名
        • 原理：当请求接口之后，接口返回一段调用函数的代码，调用的函数(就是我们准备好的函数)就是向接口发送请求时携带的callback函数
      • 安装第三方包
      • CORS (跨资源共享)
      • 服务器代理
      • 用node.js中间件代理跨域 Access-Control-Allow-Origin: '*'
防抖和节流
  • 防抖
    • 概念：防抖策略是当事件被触发后，延迟n秒在执行回调，如果在n秒内事件又被触发，则重新计时
    • 实现步骤
      1. 设置 var timer = null 放抖动的timer
      2. 判断timer是否为null，如果不为null则清除定时器
      3. 设置定时器，约定一段时间后执行某些功能函数
  • 节流
    • 概念：节流策略可以减少一段时间内事件的触发频率 (减少事件内部代码的执行次数)
    • 实现步骤
      1. 设置节流阀 var timer = null
      2. 事件内部判断timer，如果timer不为null (说明有一个定时器正在执行)，则return
      3. 设置定时器，在定时器内部编写程序代码，并且打开节流阀 timer = null
  • 总结
    • 防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效，前面N多次的触发都会被忽略
    • 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性的执行一部分事件
HTTP协议
  • 概念：HTTP是超文本传输协议，协议规定了客户端与服务器交互数据时，数据的格式
  • 请求消息
    • 请求行 (请求方式、请求的url、协议的版本)
    • 请求头 (由多行键值对组成)
      • Content-Type 告诉服务器提交的数据是什么格式的
      • User-Agent 告诉服务器发送到请求的浏览器是什么浏览器
    • 请求体 (提交的数据就是请求体 GET方式没有请求体，POST方式才有请求体)
  • 响应消息
    • 响应行 (协议及版本)
    • 响应头 (Content-Type:application/json;charset=utf-8 服务器告诉浏览器返回的数据是什么格式的)
    • 响应体 (返回的主要内容就是返回的数据，可以在network->请求->response查看)
HTP状态码以及代表意义
  • 200：请求成功
  • 201：添加成功
  • 304：请求的资源没有改变 (去缓存中取数据即可)
  • 400：请求的格式不对 (最有可能得原因是请求参数写错了)
  • 404：请求的资源不存在 (url地址可能错误)
  • 500：服务器内部错误
错误代码的影响
  • 分类
    • 解析代码时的错误 (语法、词法错误)
    • 运行代码时的错误 (调用函数等等)
  • 错误对当前script代码段的影响
    • 解析代码时的错误会导致整个script代码全部瘫痪
    • 运行代码时的错误会导致错误之前的代码能够执行，错误之后的代码不能执行
      注意：两个没有关系的script代码段前一个script代码段无论发生什么都不会影响后面的script代码段
移动的小天使
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery.js"></script><style>img {position: absolute;}</style>
</head><body><img src="angel.gif" alt=""><script>// 1.设置节流阀var timer = null// 2.事件内部,判断timer,如果不为null(说明有一个定时器正在执行),return$(document).on('mousemove', function (e) {if (timer != null) {return}// 3.设置定时器,定时器内部,编写程序代码.并且打开节流阀 (timer = null)timer = setTimeout(function () {var x = e.pageX // 鼠标距离页面左边的位置var y = e.pageY // 鼠标距离页面上边的位置// 设置img的位置$('img').css({ left: x + 'px', top: y + 'px' })console.log('今天星期三')// 重置timer为null,相当于打开节流阀timer = null}, 30)})</script>
</body></html>

相关文章：

Ajax：跨域、防抖和节流、HTTP协议

在善意的“双向奔赴”中&#xff0c;每个普通人都如星辰&#xff0c;微小但释放着自己的光芒&#xff0c;交织成灿烂的星河 文章目录 跨域防抖和节流HTTP协议HTP状态码以及代表意义错误代码的影响移动的小天使 跨域 同源策略 概念&#xff1a;协议&#xff0c;域名&#xff0c…...

编程日记 2024/10/22 7:38:50

数据结构(8.2_2)—希尔排序

希尔排序的定义&#xff1a; 第一趟&#xff1a;先将在排序表中根据增量di分别将数组元素分别插入各个子表 &#xff0c;在进行排序 代码实现&#xff1a; 算法性能分析 稳定性&#xff1a;不稳定&#xff01; 适用性&#xff1a;仅适用于顺序表&#xff0c;不适用于链表 总…...

编程日记 2024/10/22 7:37:49

Netty笔记

本笔记是看了黑马的Netty进行总结的。想要更详细的可以去看视频 学习netty之前要先打好NIO的基础&#xff0c;可以先去看我的另一篇文章 一、概述 不想看的可以直接跳过 Netty 的地位 Netty 在 Java 网络应用框架中的地位就好比&#xff1a;Spring 框架在 JavaEE 开发中的地位…...

编程日记 2024/10/22 7:36:47

管道燃气监管系统

一、建设目标 建立一个高效、智能、安全的管道燃气监管系统&#xff0c;实现对管道燃气的实时监测、风险预警、事故应急处理和数据分析&#xff0c;确保燃气供应的安全稳定&#xff0c;提高燃气管理的效率和水平。 二、系统架构 感知层 安装压力传感器、流量传感器、温度传感…...

编程日记 2024/10/22 7:31:43

Python语法结构（三）（Python Syntax Structure III）

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…...

编程日记 2024/10/22 7:27:39

08_Linux文件查找技巧：locate、find 和 grep 命令详解

系列文章导航&#xff1a;01_Linux基础操作CentOS7学习笔记-CSDN博客 文章目录 1. locate命令2. grep命令3. find命令 在Linux系统中&#xff0c;文件查找是一项常见的任务。本文将详细介绍三种强大的文件查找命令&#xff1a;locate、find 和 grep&#xff0c;以及它们的使用…...

编程日记 2024/10/22 7:26:37

JAVA 实验六

一&#xff1a; &#xff08;1&#xff09; 运行以上尟序并尣以上尟序尜尢一行尥码添加注解&#xff0c;将尟序保存尣e601.java &#xff08;2&#xff09; 以上尟序尣类变量是哪一个变量&#xff0c;类尠尞是哪一个尠尞&#xff0c;请找出类变量和类尠尞被使用尜语…...

编程日记 2024/10/22 7:25:36

电脑查不到IP地址是什么原因？怎么解决

在日常使用电脑的过程中&#xff0c;有时会遇到无法查询到电脑IP地址的情况&#xff0c;这可能会影响到网络的正常使用。本文将探讨电脑查不到IP地址的可能原因&#xff0c;并提供相应的解决方案。 一、原因分析 ‌网络连接问题‌&#xff1a;首先&#xff0c;网络连接不稳定或…...

编程日记 2024/10/22 7:24:34

Axure重要元件三——中继器修改数据

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;中继器修改数据 主要内容&#xff1a;显示编辑内容、表格赋值、修改数据 应用场景&#xff1a;更新行、表单数据行修改 案例展示&#xff1a; 正文…...

编程日记 2024/10/22 7:23:34

应用层——电子邮件、MIME、简单网络管理协议SNMP

电子邮件 电子邮件系统采用三个主要构件组成&#xff1a;用户代理、邮件服务器、电子邮件所需的协议 我们可以简单的认为邮件服务器中有很多邮箱&#xff0c;还有用来缓存再转发邮件的缓存&#xff0c;发送方使用用户代理通过邮件发送协议。例如SMTP将邮件发送给发送方。 邮件服…...

编程日记 2024/10/22 7:21:28

我与C语言二周目邂逅vlog——8.编译和链接

C语言中的编译和链接过程详细总结 1. 概述 C 语言是一种经典的系统级编程语言&#xff0c;其开发过程包括多个阶段&#xff0c;其中最关键的就是编译和链接过程。编译和链接的理解对于掌握 C 语言程序的构建至关重要。在本篇文章中&#xff0c;我们将深入讲解 C 语言的编译和…...

编程日记 2024/10/22 7:17:23

Views Page 视图页面

下图中显示的 Views 页面允许自定义网格级别及其相应的 View。 Views &#xff08;视图&#xff09; 页面包含两个主要部分&#xff1a; 关卡设计师;请注意&#xff0c;其他设计器页面为在关卡设计器中选择的 View 提供设置;Properties &#xff08;属性&#xff09; 窗口&…...

编程日记 2024/10/22 7:16:22

Win10 IDEA远程连接HBase

Win10 IDEA远程连接HBase Win10 IDEA连接虚拟机中的Hadoop&#xff08;HDFS&#xff09; 关闭Hadoop和Hbase 如果已经关闭不需要走这一步 cd /usr/local/hbase bin/stop-hbase.sh cd /usr/local/hadoop ./sbin/stop-dfs.sh获取虚拟机的ip 虚拟机终端输入 ip a关闭虚拟机…...

编程日记 2024/10/22 7:14:15

1.centos 镜像

centos 它有官网的下载地址&#xff1a;https://vault.centos.org/ 选择想要的版本&#xff0c;我选择 centos7.8 进入到镜像目录 isos 选择 x86_64 选择想要的版本&#xff0c;我选择 CentOS-7-x86_64-DVD-2003.iso 安装就正常安装就行。我选择虚拟机安装。这个参考&…...

编程日记 2024/10/22 7:12:12

electron 操作 cookie

前言&#xff1a;在 Electron 中操作 Cookie 可以使用electron模块提供的session对象来实现。 一、获取 Cookie 通过defaultSession获取默认会话对象&#xff0c;然后调用cookies.get方法并传入要获取 Cookie 的 URL 地址&#xff0c;以获取该 URL 对应的 Cookie。 const el…...

编程日记 2024/10/22 7:11:10

黑马软件测试第一篇_Linux

Linux 操作系统 说明: 所有硬件设备组装完成后的第⼀一层软件, 能够使⽤用户使⽤用硬件设备的软件 即为操作系统 常见分类 桌⾯面操作系统: Windows/macOS/Linux移动端操作系统: Android(安卓)/iOS(苹果)服务器器操作系统: Linux/Windows Server嵌⼊入式操作系统: Android(底…...

编程日记 2024/10/22 7:10:09

npm run dev 启动前端项目的原理

在一个使用 Vite 构建工具的 Vue 项目中&#xff0c;当你运行 npm run dev 时&#xff0c;实际执行的命令是 vite。为了理解这一过程&#xff0c;我们需要了解几个关键点&#xff1a; package.json 文件中的 scripts 字段: "scripts": {"dev": "vite&…...

编程日记 2024/10/22 7:09:04

【2024年SCI一区新算法：黑翅鸢优化算法 】分布式电网故障定位

1 场景介绍 使用10节点网络 2 故障设置 分为单重故障和两重故障 %% 2 故障设置 %% 1&#xff09;单重故障 I[1,-1,0,0,-1,-1,0,0,-1,-1]; % 区段1故障 节点状态实际编码&#xff08;是否流过故障电流&#xff09; % I[1,1,0,0,-1,-1,0,0,-1,-1]; % 区段2故障 % I[…...

编程日记 2024/10/22 7:07:02

PyTorch 中 12 种张量操作详解

创作不易&#xff0c;还请各位同学三连点赞&#xff01;&#xff01;收藏&#xff01;&#xff01;转发&#xff01;&#xff01;&#xff01; 对于刚入门学习Python还找不到方向的小伙伴可以试试我的这份学习方法和籽料&#xff0c;免费自取&#xff01;&#xff01; PyTorc…...

编程日记 2024/10/22 7:03:59

雷池WAF自动化实现安全运营实操案例终极篇

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…...

编程日记 2024/10/22 7:00:51

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/6/17 3:47:36

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/7/11 12:13:37

pam_env.so模块配置解析

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

编程新知 2025/7/7 3:31:35

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/7/12 5:17:29

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/7/12 9:15:28

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/7/7 0:39:27

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/7/12 2:28:11

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/7/10 21:57:53

提升移动端网页调试效率：WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

编程新知 2025/6/10 21:08:23

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

编程新知 2025/7/11 0:40:42