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

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

news 2026/2/9 12:56:47

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

文章目录

          • 跨域
          • 防抖和节流
          • 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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/2/7 17:33:19

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2026/1/23 4:56:05

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/11/30 16:55:32

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/29 17:54:05

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25