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

Ajax复习

Ajax复习

一、简介

​ AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。

​ 一句话总结:无刷新通信

二、 特点

  • 优点

无刷新通信

允许你根据用户事件来更新部分页面内容

  • 缺点
  1. 没有浏览历史,不能回退

  2. 存在跨域问题(同源)

  3. SEO 不友好

三、核心对象

XMLHttpRequest,AJAX 的所有操作都是通过该对象进行的。

四、jQuery 中的 AJAX

  • get 请求
$.get(url, [data], [callback], [type])url:请求的 URL 地址。data:请求携带的参数。callback:载入成功时回调函数。type:设置返回内容格式,xml, html, script, json, text, _default。
  • post请求
$.post(url, [data], [callback], [type])url:请求的 URL 地址。 data:请求携带的参数。callback:载入成功时回调函数。type:设置返回内容格式,xml, html, script, json, text, _default。

五、跨域

  • 同源策略

​ 同源策略(Same-Origin Policy)最早由 Netscape 公司提出,是浏览器的一种安全策略。同源: 协议、域名、端口号 必须完全相同

违背同源策略就是跨域

六、解决跨域

  • JSONP,通过动态创建标签、从而实现跨域。
  • CORS,服务端解决跨域。

七、其他学习点

7.1、防止重复提交方案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>重复请求问题</title>
</head>
<body><button>点击发送</button><script>//获取元素对象const btns = document.querySelectorAll('button');let x = null;//标识变量let isSending = false; // 是否正在发送AJAX请求btns[0].onclick = function(){//判断标识变量if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求x = new XMLHttpRequest();//修改 标识变量的值isSending = true;x.open("GET",'http://127.0.0.1:8000/delay');x.send();x.onreadystatechange = function(){if(x.readyState === 4){//修改标识变量isSending = false;}}}// abortbtns[1].onclick = function(){x.abort();}</script>
</body>
</html>

7.1、缓存解决方案

加上时间戳,作为参数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>IE缓存问题</title><style>#result{width:200px;height:100px;border:solid 1px #258;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click', function(){const xhr = new XMLHttpRequest();xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status< 300){result.innerHTML = xhr.response;}}}})</script>
</body>
</html>

相关文章:

Ajax复习

Ajax复习 一、简介 ​ AJAX 全称为 Asynchronous JavaScript And XML&#xff0c;就是异步的 JS 和 XML。 ​ 一句话总结&#xff1a;无刷新通信。 二、 特点 优点 无刷新通信 允许你根据用户事件来更新部分页面内容 缺点 没有浏览历史&#xff0c;不能回退 存在跨域问题…...

里式替换原则(LSP)

目录 简介: 作用: 过程: 总结: 简介: 里式替换原则&#xff08;Liskov Substitution Principle&#xff0c;简称LSP&#xff09;的提出者是美国计算机科学家Barbara Liskov。Barbara Liskov是一位计算机科学家&#xff0c;麻省理工学院教授&#xff0c;也是美国第一个计算机…...

mysql------做主从复制,读写分离

1.为什么要做主从复制&#xff08;主从复制的作用&#xff09; 做数据的热备&#xff0c;作为后备数据库&#xff0c;主数据库服务器故障后&#xff0c;可切换到从数据库继续工作&#xff0c;避免数据丢失。 架构的扩展。业务量越来越大,I/O访问频率过高&#xff0c;单机无法满…...

Anaconda虚拟环境跨系统迁移

旧设备运行代码 conda activate name conda env export > environment.yml注意&#xff1a;如果当前路径已经有了 environment.yml 文件&#xff0c;conda 会重写这个文件 新设备运行代码 # 将environment.yml 拷贝到新设备中conda env create -f environment.yml...

第四章 IRIS 编程简介 - Macros

文章目录 第四章 IRIS 编程简介 - MacrosMacrosInclude Files这些代码元素如何协同工作 第四章 IRIS 编程简介 - Macros Macros ObjectScript 还支持定义替换的宏。定义可以是一个值、整行代码或&#xff08;使用 ##continue 指令&#xff09;多行。使用宏来确保一致性。例如…...

大厂考核重点:mysql索引面试题

很多同学面对Mysql索引相关的面试题都是死记硬背的&#xff0c;这肯定是不行的&#xff0c;也不容易记住&#xff0c;所以大家还是要循循渐进&#xff0c;从理解开始&#xff0c;慢慢掌握&#xff0c;当然对于想要准备面试题的同学&#xff0c;这几个问题是需要记住并理解的&am…...

MySQL使用binlog日志做数据恢复

MySQL的binlog日志是MySQL日志中非常重要的一种日志&#xff0c;记录了数据库所有的DML操作。通过binlog日志我们可以进行数据库的读写分离、数据增量备份以及服务器宕机时的数据恢复。 定期备份固然可以在服务器发生宕机的时候快速的恢复数据&#xff0c;但传统的全量备份不可…...

USB Type-C端口集成式ESD静电保护方案 安全低成本

Type-C端口是根据USB3.x和USB4协议传输数据的&#xff0c;很容易受到电气过载&#xff08;EOS&#xff09;和静电放电&#xff08;ESD&#xff09;事件的影响。由于Type-C支持随意热插拔功能&#xff0c;其内部高集成度的芯片&#xff0c;更容易受到人体静电放电的伤害和损坏。…...

Shiro学习总结

第一章 入门概述 1.概念 shiro是一个Java安全框架&#xff0c;可以完成&#xff1a;认证、授权、加密、会话管理、与web集成、缓存… 2.优势 ● 易于使用&#xff0c;构建简单 ● 功能全面 ● 灵活&#xff0c;可以在任何应用程序环境中工作&#xff0c;并且不需要依赖它们…...

AS中回退git历史版本并删除历史提交记录

当您想把某个版本后的代码删除&#xff0c;回滚到指定的版本。可以使用一下的方法。 一、打开AS中git历史提交窗口 二、选择需要回滚的版本选项&#xff0c;右键弹出菜单。选择Reset Current Branch to Here... 三、选择 Hard 选项 soft&#xff1a;将合并的更改应用到当前分支…...

线性代数的学习和整理5: 矩阵的加减乘除及其几何意义

目录 1 矩阵加法 1.1 矩阵加法的定义 1.2 加法的属性 1.2.1 只有同类型&#xff0c;相同n*m的矩阵才可以相加 1.2.1 矩阵加法的可交换律&#xff1a; 1.2.2 矩阵加法的可结合律&#xff1a; 1.3矩阵加法的几何意义 2 矩阵的减法 2.1 矩阵减法定义和原理基本同 矩阵的…...

sqlsugar 使用TNS连接oracle

在使用SqlSugar连接Oracle数据库时&#xff0c;可以通过TNS来实现连接。以下是一个示例代码&#xff0c;展示了如何使用TNS连接Oracle数据库&#xff1a; 首先&#xff0c;确保您已经安装了Oracle客户端&#xff0c;并正确配置了TNS的相关信息。 // 引入SqlSugar命名空间 usi…...

用python解压zip文件

因为某个需求&#xff0c;需要用python处理解压文件&#xff0c;这里记录下完成的代码&#xff0c;需要注意的是删除解压出来的文件夹时&#xff0c;很多博客都说直接用removedirs就行&#xff0c;实际我在py3.7上测试会提示“文件夹非空”&#xff0c;而且想想如果直接移除了根…...

代码随想录22| 216.组合总和III, 17.电话号码的字母组合

216.组合总和III 题目链接/文章讲解&#xff1a;链接地址 视频讲解&#xff1a;链接地址 代码思路&#xff1a;回溯三部曲&#xff1a; 1.确定函数参数&#xff1a;n,k,sum,startIndex; 2.结束条件&#xff0c;path k,并且如果sumn 结束递归 3.递归回溯逻辑。 class Solution…...

ITIL4—战略与指导

战略与指导 成功的服务提供&#xff0c;需要朝着商定的目标采取协调一致的行动。本节将探讨服务供应商战略的创建和管理&#xff0c;其目的是首先对战略的本质、范围&#xff0c;以及战略与指导的关系建立基本的理解&#xff0c;然后为与该战略一致的指导活动提供指导。 本节…...

【Spring】Spring循环依赖(超重要!!)

目录 什么是循环依赖问题 循环依赖具体是怎么解决的 具体的解决步骤&#xff1a; 通俗实例&#xff1a; 严谨的循环依赖解决图例 为什么使用的是三级缓存&#xff0c;二级缓存不够用吗&#xff1f; 什么是循环依赖问题 Spring的循环依赖是指在Bean之间存在相互依赖关…...

数据分析之路应该是就此开启了

咱就是说工作以后&#xff0c;就是重新学习的开始啊。 祝自己顺顺利利。 前路漫漫亦灿灿。 数据分析之路&#xff0c;开启吧。 以下是借鉴网上的学习路线。 这个学习路线图主要分为以下几个部分&#xff1a; 基础知识 &#xff1a;包括数学、统计学和编程语言。这是数据分析的…...

win10如何配置jdk环境变量

1.首先要打开系统环境变量配置的页面。具体操作是&#xff1a;打开开始菜单&#xff0c;找到“此电脑”&#xff0c;然后右键“更多”→“属性”。 2.在弹出的页面&#xff0c;选择“高级系统设置” 3.在弹出的页面&#xff0c;选择“环境变量&#xff08;N&#xff09;…”。 …...

pm4py使用指南(非机翻)

目录 1. 日志数据读取及预处理&#xff08;1&#xff09;查看case和event数量&#xff08;2&#xff09;查看起始事件和结束事件&#xff08;3&#xff09;时间戳格式的问题 2. 日志数据过滤3. 流程发现4. 模型转化5. 模型可视化 1. 日志数据读取及预处理 通过 pandas库 读取c…...

ChatGPT帮助提升工作效率和质量:完成时间下降40%,质量评分上升 18%

自ChatGPT去年11月发布以来&#xff0c;人们就开始使用它来协助工作&#xff0c;热心的用户利用它帮助撰写各种内容&#xff0c;从宣传材料到沟通话术再到调研报告。 两名MIT经济学研究生近日在《科学》杂志上发表的一项新研究表明&#xff0c;ChatGPT可能有助于减少员工之…...

第二章 搜索

本篇博文是笔者归纳汇总的AcWing基础课题集&#xff0c;方便读者后期复盘巩固~ PS&#xff1a;本篇文章只给出完整的算法实现&#xff0c;并没有讲解具体的算法思路。如果想看算法思路&#xff0c;可以阅读笔者往期写过的文章&#xff08;或许会有&#xff09;&#xff0c;也可…...

transform_train.json文件解析

transform_train.json 文件内容解析transform_matrix 文件内容解析 {"camera_angle_x": 0.6911112070083618,"frames": [{"file_path": "./train/r_0","rotation": 0.012566370614359171,"transform_matrix": [[…...

Wlan——锐捷零漫游网络解决方案以及相关配置

目录 零漫游介绍 一代零漫游 二代单频率零漫游 二代双频率零漫游 锐捷零漫游方案总结 锐捷零漫游方案的配置 配置无线信号的信道 开启关闭5G零漫游 查看配置 零漫游介绍 普通的漫游和零漫游的区别 普通漫游 漫游是由一个AP到另一个AP或者一个射频卡到另一个射频卡的漫…...

分布式锁系列之zookeeper分布式锁和mysql分布式锁

目录 介绍 下载安装 基本指令​编辑 java集成zookeeper 官方提供版 永久节点 临时节点​编辑 永久序列化节点 判断当前节点是否存在 获取当前节点中的数据内容 获取当前节点的子节点 更新节点内容 删除节点 zookeeper实现分布式锁 Mysql实现分布式锁 总结 介绍 ZooK…...

Ubuntu部署PHP7.4

系统版本&#xff1a;Ubuntu22.04 PHP版本: 7.4 Mysql版本&#xff1a;8.0 Nginx版本: 最新 1. 更新系统 首先&#xff0c;确保系统包是最新的&#xff1a; sudo apt update && sudo apt upgrade -y2. 安装 Nginx Nginx 在默认的 Ubuntu 仓库中&#xff0c;因此安装…...

WPF中的数据转换-StringFormat

WPF中的数据转换-StringFormat 前言 字符串格式化。使用该功能可以通过设置Binding.StringFormat属性对文本形式的数据进行转换——例如包含日期和数字的字符串。对于至少一半的格式化任务&#xff0c;字符串格式化是一种便捷的技术。 使用 当设置Binding.StringFormat属性…...

java.lang.UnsupportedOperationException解决方法

java.lang.UnsupportedOperationException解决方法 先放错误信息业务场景报错分析先看报错代码位置进入源码查看至此 真相大白 解决方法总结 先放错误信息 业务场景 已知有学生 张三李四王五赵六 等人 private List<String> nameList Arrays.asList("张三", &…...

docker for window更改到非系统盘的使用记录

1、使用Hyper-v模式的docker安装 2、安装docker for windows后安装目录没办法自己选择&#xff0c;固定在c盘 卸载后通过命令行方式设置软连接方式后重新安装来让其安装到软连接的d盘&#xff0c;解决c盘空间问题 mklink /j "C:\Program Files\Docker" "D:\Pr…...

day 38 | ● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ

518. 零钱兑换 II 这道题就是完全背包问题&#xff0c;因为可以选择的数量是无限的。所以第二层的遍历顺序就是从前往后。 因为是次数问题&#xff0c;递推公式是 的&#xff0c;初值应该设定为dp【0】 1&#xff0c;否则无法进行累加。 func change(amount int, coins []i…...

写得了代码,焊得了板!嵌入式开发工程师必修之代码管理方案(中)

目录 2.2 分仓、权限与依赖问题 2.3 基于 Git 进行多仓管理 Git submodule Git subtree Script/CMake Git-Repo Conan 本文来自 武让 极狐GitLab 高级解决方案架构师 &#x1f31f; 前一篇文章&#xff0c;作者介绍了嵌入式开发场景的代码管理特点与诉求&#xff0c;以及…...

运河建设管理网站/互联网销售公司

题目&#xff1a;输入一个复杂链表&#xff08;每个节点中有节点值&#xff0c;以及两个指针&#xff0c;一个指向下一个节点&#xff0c;另一个特殊指针random指向一个随机节点&#xff09;&#xff0c;请对此链表进行深拷贝&#xff0c;并返回拷贝后的头结点。&#xff08;注…...

wordpress文章修改大小/什么是网络整合营销

.Net 2.0中&#xff0c;ListView中虽然增加了AutoResizeColumns函数&#xff0c;允许自动对列宽进行调整&#xff0c;但是对于其中的 AutoResizeColumns(ColumnHeaderAutoResizeStyle.ColumnContent) AutoResizeColumns(ColumnHeaderAutoResizeStyle.ColumnContent) 也就是根…...

精美网站建设公司/如何做一个网站的seo

1.总线 总线&#xff1a;就是电子管道&#xff0c;负责在各个部件之间传递信息 字&#xff1a;总线传递的都是定长的字节快 字节数&#xff1a;字中的字节数&#xff0c;比如32位的机器是4个字节&#xff0c;64位的机器是8个字节 2.IO设备 输入&#xff1a;鼠标&#xff0c;键盘…...

深圳公司注册代理公司排名/关键词优化排名费用

延时 setTimeout(code,millisec):用于设置在指定的毫秒数后调用函数【设定延时】 var timeOutIdsetTimeout(function(){ alert(5秒后弹框); },5000); clearTimeout(timeOutId):用于取消由setTimeout函数设定的延时 周期调用(timer) setInterval(code,millisec):用于设置在指定…...

做外贸网站需要注意些什么手续/win7运行速度提高90%

由于本地时间和数据库时间可能不一致&#xff0c; 所以我们常常抓取数据库的时间作为我们数据的时间&#xff0c;那在EntityFramework中要如何抓取时间呢&#xff1f;网上常见的做法是利用SqlFunctions.GetDate()&#xff0c;但是该函数必须要放到模型中来执行才可以&#xff0…...

wordpress gonzo/网络广告创意

cmd D和cmd R快捷键没有反应 0.31.0版本换了一种加载方式&#xff0c;通过修改userDefaults达到debug目的 [userDefaults setObject:"127.0.0.1" forKey:"RCT_jsLocation"];[userDefaults synchronize];NSLog("%",[userDefaults stringForKey:…...