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

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

news 2026/5/18 23:27:49

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

文章目录

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

Linux内核驱动开发：从传统proc接口到现代seq_file与proc_ops的迁移指南

1. 项目概述&#xff1a;为什么我们需要关注/proc的新接口&#xff1f;如果你在Linux内核驱动开发领域摸爬滚打过几年&#xff0c;一定对/proc文件系统这个“老伙计”又爱又恨。爱它&#xff0c;是因为在调试和状态监控时&#xff0c;它提供了一个极其简单、直观的窗口&#xf…...

编程新知 2026/5/18 22:43:43

NotebookLM大纲自动生成正在淘汰传统笔记法（内部白皮书泄露：Google Labs 2024 Q2 A/B测试结果首次公开）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM大纲自动生成正在淘汰传统笔记法&#xff08;内部白皮书泄露&#xff1a;Google Labs 2024 Q2 A/B测试结果首次公开&#xff09; Google Labs 2024年第二季度A/B测试数据显示&#xff0c;启用…...

编程新知 2026/5/18 22:11:07

林调报告生成慢？文献综述耗时长？NotebookLM林业科研加速器已上线，72小时实测效率提升3.8倍

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;NotebookLM林业科学研究 NotebookLM 是 Google 推出的基于 AI 的研究协作者工具&#xff0c;专为深度阅读与知识整合设计。在林业科学研究中&#xff0c;它可高效处理林学文献、野外调查报告、遥感数据说明书、…...

编程新知 2026/5/18 22:02:56

顶伯知识竞赛系统 · 核心功能列表

&#x1f680; 顶伯知识竞赛系统 核心功能列表专业 高效 让知识竞赛组织更简单&#x1f3af; 核心优势速览⏱️ 高效&#xff1a;传统方式2-3天的准备工作&#xff0c;2-3小时完成&#x1f3af; 精准&#xff1a;系统自动计分、自动判定抢答&#xff0c;零误差&#x1f3a8;…...

编程新知 2026/5/18 21:01:40

AI写教材新突破！低查重工具，快速生成完整教材框架与内容！

教材编写困境与 AI 工具的破局之道 很多教材编写者常常感到困扰&#xff1a;尽管他们在正文内容上付出了大量心血&#xff0c;但由于缺乏配套资源&#xff0c;最终的教学效果难以理想化。设计课后练习时&#xff0c;缺乏新颖的题型构思&#xff1b;想制作直观的教学课件&#…...

编程新知 2026/5/18 20:59:22

面试题详解：检索链路设计全攻略——RAG 检索架构、查询理解、多路召回、混合检索、Rerank、上下文构造与评估闭环

1. 为什么说检索链路设计&#xff0c;是 RAG 项目的“生命线”&#xff1f;1.1 大模型回答质量&#xff0c;很多时候不是模型决定的&#xff0c;而是证据决定的在 RAG 系统里&#xff0c;大模型像一个会组织语言的“回答器”&#xff0c;但它能不能答准&#xff0c;取决于它面前…...

编程新知 2026/5/18 20:19:42

【SRC漏洞挖掘系列】第02期：XSS与CSRF——Web世界的“偷家”艺术

上期回顾&#xff1a;我们扒光了目标的资产&#xff08;情报收集&#xff09;。本期开始&#xff0c;我们要对这些目标进行“物理超度”——哦不&#xff0c;是合法的安全测试。今天的主角是 Web 漏洞界的“哼哈二将”&#xff1a;XSS​ 和 CSRF。一、为什么这俩货这么重要&…...

编程新知 2026/5/18 19:54:55

基于Git与Zenn的内容管理方案：打造高效技术写作工作流

1. 项目概述&#xff1a;一个内容创作者的知识管理中枢 最近在技术社区里&#xff0c;看到不少朋友在讨论如何高效地管理自己的技术笔记、博客草稿和项目文档。我自己也在这个问题上摸索了很久&#xff0c;直到我遇到了一个名为 seiryuu1215/zenn-content 的GitHub仓库。这不…...

编程新知 2026/5/18 17:58:51

如何快速下载Fansly内容：完整Fansly Downloader使用指南

如何快速下载Fansly内容&#xff1a;完整Fansly Downloader使用指南 【免费下载链接】fansly-downloader Easy to use fansly.com content downloading tool. Written in python, but ships as a standalone Executable App for Windows too. Enjoy your Fansly content offlin…...

编程新知 2026/5/18 17:39:56

图片换背景在线制作怎么操作？一文解析2026年最好用的免费工具

你是不是也遇到过这样的困境&#xff1a;拍了张不错的证件照&#xff0c;但背景不够专业&#xff1b;电商要上新产品图&#xff0c;需要统一的白色背景&#xff1b;或者就是想给朋友圈的照片换个背景图&#xff0c;结果却卡在了怎么处理上&#xff1f;其实&#xff0c;图片换背…...

编程新知 2026/5/18 16:41:25