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

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

文章目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56126.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RAID5数据恢复—raid5阵列如何重组?raid5阵列重组方法详解

RAID5数据恢复环境&#xff1a; 一台存储上有一组由12块SCSI硬盘&#xff08;11块数据盘1块热备盘&#xff09;组建的RAID5磁盘阵列&#xff0c;FreeBSD操作系统zfs文件系统。 RAID5故障&#xff1a; 其中一块盘出现故障&#xff0c;需要重组该raid5磁盘阵列。 RAID5数据恢复…

MySQL数据库操作——(4)

目录 8 视图 8.1 常见的数据库对象 8.2 视图概述 8.2.1 为什么使用视图&#xff1f; 8.2.2 视图的理解 8.3 创建视图 8.3.1 创建单表视图 8.3.2 创建多表联合视图 8.3.3 基于视图创建视图 8.4 查看视图 8.5 更新视图的数据 8.5.1 一般情况 8.6 修改、删除视图 8.…

冲锋衣市场洞察:全方位数据分析与趋势展望

冲锋衣整体数据分析 一. 概述 本报告基于从淘宝商品搜索接口和淘宝精确月销量接口中提取的数据&#xff0c;分析了前百个品牌在销售额上的占比情况。分析涵盖了销售额和占比的数据&#xff0c;为决策提供了依据。&#xff08;数据获取时间&#xff1a;2024.10.08&#xff09;…

(c++)函数的引用语法、使用、函数调用作左值

//引用的用途&#xff1a;可以利用引用用形参修饰实参&#xff0c;引用的语法比指针操作地址更加简单易懂。 //1.不要返回局部的引用 2.如果函数返回的是引用&#xff0c;则这个函数调用可以作为左值 #include<iostream> using namespace std; //引用的用途&#xff1a;…

leetcode动态规划(十)-0-1背包理论基础(一维数组)

一维dp数组&#xff08;滚动数组&#xff09; leetcode中无纯0-1背包问题&#xff0c;可从卡码网上查看题目46.0-1背包问题 一维数组来源于二维数组&#xff0c;其本质是对一维数组进行压缩了&#xff0c;压缩后需要注意在进行背包容量循环的时候采用后序遍历&#xff0c;而不…

less 命令无法正确显示中文字符问题

less的配置文件通常是~/.lessfilter或~/.lessrc。你可以检查这些文件中是否有关于字符编码的设置。如果没有&#xff0c;可以添加以下内容到配置文件中&#xff1a; export LESSCHARSETutf-8&#xff08;设置字符编码为 UTF-8&#xff09;。 如果没有~/.lessfilter或~/.lessr…

世界500强,计算机校招月薪 1k ?

大家好&#xff0c;我是鸭鸭&#xff01; 周末闲来无事&#xff0c;鸭鸭又来互联网冲浪了&#xff0c;没想到刷到这么一张图&#xff1a; 现在校招给计算机应届生开出的薪资只有 1&#xff5e;1k 了吗&#xff1f;鸭鸭很难不怀疑这是打错字了。 根据图里信息&#xff0c;这应…

【数据库设计】逻辑结构设计

E-R实体集的转换 概念结构设计之后就是对E-R图进行逻辑结构设计&#xff1a;即将E-R图转化成关系的过程。逻辑结构设计主要用于数据库管理系统上&#xff0c;为了让数据在计算机系统中更好地表示。 此设计过程用到的数据模型有&#xff1a;除了前面讲过的关系模型还有层次模型…

双十一该买什么比较好?双十一推荐好物清单分享

​是不是很多朋友跟我一样&#xff0c;已经为双11做好了准备&#xff0c;打算开启买买买的节奏&#xff01;作为一名家居兼数码博主&#xff0c;每年双11的时候都会疯狂囤很多物品&#xff0c;所以今天就跟大家来分享一下&#xff0c;我的双11购物清单&#xff0c;也给大家参考…

数据结构部分混淆

1.随机存储和顺序存储&#xff1a; 随机存取&#xff1a;数组&#xff0c;当存储器中的数据被读取或写入时&#xff0c;所需要的时间与该数据所在的物理地址无关 顺序存取&#xff1a;链表&#xff0c;当存储器中的数据被读取或写入时&#xff0c;所需要的时间与该数据所在的物…

分享一份JSON数据格式商品详情数据详情示例

JSON数据格式的商品详情数据通常包含商品的多个层级信息&#xff0c;以下是一个综合多个来源信息的JSON数据格式的商品详情数据示例参考&#xff1a; {"item": {"num_iid": "836392331271","title": "高腰阔腿牛仔裤女2024年新款…

Java:IDEA生成JavaDoc文档

有些开源项目并未直接提供api&#xff0c;但是通过从github、gitee下载项目可以手动生成Java文档。 步骤如下。 使用IDEA打开项目。 选择生成Java Doc文档&#xff1a; 第一步&#xff1a;选择生成JavaDoc文档的范围&#xff0c;我只对一个源文件生成Doc&#xff0c;所以选择…

鸿蒙开发超好用的 UI 组件和工具类库 BasicLibrary

大家好&#xff0c;我是 V 哥。你在学习HarmonyOS NEXT 开发吗&#xff0c;今天 V 哥给你推荐一款超好用的三方库BasicLibrary&#xff0c;BasicLibrary 是一个基于 API 11 封装的基本库&#xff0c;旨在提升鸿蒙开发效率。它包含了一些常用的 UI 组件和实用工具类&#xff0c;…

Java基础:面向对象编程8

1 Java 注解 1.1 概念 定义&#xff1a;注解&#xff08;Annotation&#xff09;是在 Java 1.5 时引入的概念&#xff0c;同 class 和 interface 一样&#xff0c;属于一种类型。作用&#xff1a;注解提供了一系列数据用来装饰程序代码&#xff08;类、方法、字段等&#xff…

【Lammps】拉伸模拟实验

【Lammps】拉伸模拟实验 一、代码二、解析&#xff08;1&#xff09;初始化&#xff08;2&#xff09;建模&#xff08;3&#xff09;力场设置&#xff08;4&#xff09;热平衡和压力平衡设置时间单位nve系综设置npt 系综设置 &#xff08;5&#xff09;拉伸模拟操作&#xff0…

git配置以及如何删除git

你努力学习和充实自己&#xff0c;除了提升自身的价值&#xff0c;最实际的是当遇到有喜欢的人和事的时候&#xff0c;除了一片真心&#xff0c;还有拿得出手的东西 作用 记录开发的历史&#xff0c;每次记录就是一个版本&#xff0c;而且可以回到历史的某个版本可以实现多人合…

Python中怎样用AKShare获取基金最新数据?

炒股自动化&#xff1a;申请官方API接口&#xff0c;散户也可以 python炒股自动化&#xff08;0&#xff09;&#xff0c;申请券商API接口 python炒股自动化&#xff08;1&#xff09;&#xff0c;量化交易接口区别 Python炒股自动化&#xff08;2&#xff09;&#xff1a;获取…

浅谈普通学历编码学生代码编程之路--24程序员节

#1024程序员节 | 征文# 今夕已是2024年&#xff0c;楼主是一名大四学生 &#xff0c;即将进入社会&#xff0c;曾经总是拿码农来开程序员的玩笑 &#xff0c;也是也是幻想着成为一名码农啊&#xff0c;先说说个人学习Java之路 &#xff0c;从步入大学开始就是主学Java&#xff…

【MyBatis】MyBatis缓存原理详解

目录 一、简介 二、缓存类介绍 2.1 PerpetualCache 2.2 LruCache 2.3 BlockingCache 三、CacheKey 3.1 总结&#xff1a;二级缓存命中条件 四、一级缓存 五、二级缓存 5.1 二级缓存如何组装这些装饰器&#xff1f;&#xff08;解析SQL映射文件中的标签&#xff0c;初…

2025青海选调生报名指南及照片要求

第一步&#xff1a;用户信息注册&#xff0c;仔细阅读公告内容 第二步&#xff1a;人脸识别认证、上传照片 第三步&#xff1a;确认基本信息、照片确认 第四步&#xff1a;填写报考信息&#xff0c;请务必于11月5日18:00前提交 第五步&#xff1a;打印报名表&#xff0c;下载《…