AJAX学习笔记1发送Get请求

传统请求有哪些方式,及缺点

传统请求有哪些?

1.直接在浏览器地址栏上输入URL.

2.点击超连接.

<a href="/上下文/请求地址">超链接请求</a>  ---->相对路径

<a href="http://www.baidu.com">超链接请求</a>  ---->绝对路径

3.提交form表单

<form action="/上下文/请求地址" method="post">

4.使用JS代码

window.open("url")

document.localtion.href=""

window.localtion.href=""

新建项目举例

next----next

设置字符集

添加框架支持

关于为什么项目启动会自动访问index的说明

Servlet中WebApp欢迎页面配置_biubiubiu0706的博客-CSDN博客

 引入依赖

index.html

 

配置Tomcat

传统请求的缺点,每次请求都会将整个页面刷新

AJAX可以做到局部刷新

AJAX通过浏览器上一个对象XMLHttpRequest  可以理解为一个线程,

通过XMLHttpRequest(浏览器内置对象)向服务器发送请求做到局部更新

AJAX可以在浏览器当中发送异步请求.请求A和请求B是异步的.谁也不需要等谁.类似多线程并发

响应回来的数据:普通文本,XML字符串,JSON数据

学习AJAX需要看得懂下面JS代码

发送第一个AJAX请求

AJAX   GET请求

添加依赖

配置Tomcat

测试

因为后端没有写该接口

最核心部分就是框中的回调函数中的

再次测试

编写后端代码

测试

后端出错

测试

后端向浏览器响应文本数据

其实该用responseText

测试   完美

其实该用responseText

测试

给点颜色看看

其实该用responseText

测试

再做个练习  熟练发送AJAX   GET请求

 

下面来改进一下AJAX请求的写法    下面这样也可以  不知道为什么

理论来说this已经没效果了.但是测试也可以

正确的写法应该是如下   ajax3这种方式只是为了扩展下思路

AJAX GET请求   提交数据给服务器    以ajax2为例

get请求提交数据是在请求行上

格式比如:url?name=xxx&password=xxx  是HTTP协议中规定的

测试

注意请求地址并没有变化,参数也没有再url上

看下后端有没有接收到

但是现在 参数在程序里是写死的   改一下代码

测试  输出到前端页面没有乱码

  

控制台乱码,应该是

改成了GBK试试  和自己计算机字符集原因

  • 对于低版本的IE浏览器来说,AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说,大部分浏览器都已经不存在AJAX get缓存问题了。

  • 什么是AJAX GET请求缓存问题呢?

    • 在HTTP协议中是这样规定get请求的:get请求会被缓存起来。

    • 发送AJAX GET请求时,在同一个浏览器上,前后发送的AJAX请求路径一样的话,对于低版本的IE来说,第二次的AJAX GET请求会走缓存,不走服务器。

  • POST请求在HTTP协议中规定的是:POST请求不会被浏览器缓存。

  • GET请求缓存的优缺点:

    • 优点:直接从浏览器缓存中获取资源,不需要从服务器上重新加载资源,速度较快,用户体验好。

    • 缺点:无法实时获取最新的服务器资源。

  • 浏览器什么时候会走缓存?

    • 第一:是一个GET请求

    • 第二:请求路径已经被浏览器缓存过了。第二次发送请求的时候,这个路径没有变化,会走浏览器缓存。

  • 如果是低版本的IE浏览器,怎么解决AJAX GET请求的缓存问题呢?

    • 可以在请求路径url后面添加一个时间戳,这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的,这样就不会走浏览器的缓存问题了。

    • 可以采用时间戳:"url?t=" + new Date().getTime()

    • 或者可以通过随机数:"url?t=" + Math.random()

    • 也可以随机数+时间戳....

如果真遇到了  解决方式

或者随机数加时间戳     随机数:Math.random()

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

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

相关文章

【前端】React项目初体验

React介绍 React 是一个非常流行的 JavaScript 前端框架&#xff0c;它为开发人员提供了一种快速构建高质量用户界面的方式。以下是使用 React 构建项目的初体验&#xff1a; 安装 React 和相关依赖项 使用 React 开发项目需要先安装一些必需的依赖项&#xff0c;包括 Node.…

Echarts 中国地图

直接展示效果图&#xff1a; 我们需要引入两个文件&#xff1a; echarts.js 官网地址下载&#xff1a;快速上手 - Handbook - Apache ECharts chain.js 这个官网已经找不到了&#xff0c;需要自行搜寻下载 也可以私信我(网上下载的China.js会导致省名称定为不准确&#xff0…

leetcode 1002. 查找共用字符

2023.9.6 个人感觉这题难度不止简单&#xff0c;考察到的东西还是挺多的。 首先理解题意&#xff0c;可以将题意转化为&#xff1a;求字符串数组中 各字符串共同出现的字符的最小值。 分为三步做&#xff1a; 构造一个哈希表hash&#xff0c;初始化第一个字符串的字母出现频率…

如何挑选低值易耗品管理系统?优化企业管理效率与成本控制

在现代企业管理中&#xff0c;低值易耗品的管理是一个容易被忽视但却十分重要的环节。低值易耗品包括办公用品、耗材、工具等&#xff0c;它们虽然单价不高&#xff0c;但数量庞大且频繁使用&#xff0c;对企业的日常运营和成本控制有着重要影响。为了提高管理效率、降低成本&a…

【Git】删除本地分支;报错error: Cannot delete branch ‘wangyunuo-test‘ checked out at ‘XXX‘

目录 0.环境 1.问题描述 2.解决步骤 1&#xff09;使用命令切换到其他分支 2&#xff09;查看当前本地所有分支 3&#xff09;删除“wangyunuo-test”分支 0.环境 windows 11 64位 Git VScode跑代码 1.问题描述 在做项目过程中&#xff0c;想删除一个本地分支“wangyun…

JS返回NodeList和HTMLCollection详解

HTML DOM 集合 (Collection) 概述 HTML DOM 集合 (Collection) 是一组 HTML 元素&#xff0c;这些元素可以通过 JavaScript 代码进行访问和操作。HTML DOM 集合通常由一个或多个 HTML 元素组成&#xff0c;并提供了访问和操作这些元素的方法。HTML DOM 集合在 JavaScript 中非常…

解决DCNv2不能使用高版本pytorch编译的问题

可变形卷积网络GitHub - CharlesShang/DCNv2: Deformable Convolutional Networks v2 with Pytorch代码已经出来好几年了&#xff0c;虽然声称"Now the master branch is for pytorch 1.x"&#xff0c;实际上由于pytorch自1.11版开始发生了很大变化&#xff0c;原来基…

JAVA毕业设计096—基于Java+Springboot+Vue的在线教育系统(源码+数据库+18000字论文)

基于JavaSpringbootVue的在线教育系统(源码数据库18000字论文)096 一、系统介绍 本系统前后端分离 本系统分为管理员、用户两种角色(管理员角色权限可自行分配) 用户功能&#xff1a; 注册、登录、课程预告、在线课程观看、学习资料下载、学习文章预览、个人信息管理、消息…

elementUI——el-table自带排序使用问题

问题 排序表格默认第一列按降序排&#xff08;状态1&#xff09;&#xff0c;当点击其他列后&#xff08;状态2&#xff09;&#xff0c;改变日期&#xff0c;触发表格数据更新&#xff0c;发现列的排序还点亮在之前的操作上&#xff0c;没有按照默认来&#xff08;回到状态1&a…

Rokid Jungle--Max pro

介绍和功能开发 YodaOS-Master操作系统&#xff1a;以交换计算为核心&#xff0c;实现单目SLAM空间交互&#xff0c;具有高精度、实时性和稳定性。发布UXR2.0SDK&#xff0c;为构建空间内容提供丰富的开发套件 多模态交互 算法原子化 多种开发工具协同 多生态支持 骁龙XR2…

【C++精华铺】10.STL string模拟实现

1. 序言 STL&#xff08;标准模板库&#xff09;是一个C标准库&#xff0c;其中包括一些通用的算法、容器和函数对象。STL的容器是C STL库的重要组成部分&#xff0c;它们提供了一种方便的方式来管理同类型的对象。其中&#xff0c;STLstring是一种常用的字符串类型。 STLstrin…

既然有 HTTP 协议,为什么还要有 RPC

HTTP和RPC 什么是HTTP HTTP协议&#xff08;Hyper Text Transfer Protocol&#xff09;&#xff0c;又叫做超文本传输协议。平时上网在浏览器上敲个网址就能访问网页&#xff0c;这里用到的就是HTTP协议。 什么是RPC RPC&#xff08;Remote Procedure Call&#xff09;&…

VLAN间路由:单臂路由与三层交换

文章目录 一、定义二、实现方式单臂路由三层交换 三、单臂路由与三层路由优缺点对比四、常用命令 首先可以看下思维导图&#xff0c;以便更好的理解接下来的内容。 一、定义 VLAN间路由是一种网络配置方法&#xff0c;旨在实现不同虚拟局域网&#xff08;VLAN&#xff09;之…

ssprompt:一个LLM Prompt分发管理工具

阅读顺序 &#x1f31f;前言&#x1f514;ssprompt介绍命令介绍Metafile介绍版本依赖规则 &#x1f30a; PromptHubGitHub Token &#x1f680; Quick Install系统依赖pip安装Linux, macOS, Windows (WSL)Windows (Powershell) &#x1f6a9; Roadmap&#x1f30f; 项目交流讨论…

Android手机防沉迷软件的基本原理

(现在手机游戏、短视频等不仅对小孩子负面影响巨大&#xff0c;连很多成年人都沉迷其中难以自拔&#xff0c;影响工作、生活、学习。这已经造成全社会性的巨大影响&#xff0c;长此以往&#xff0c;国将不国。本人仅在此以自己掌握的些许技术略尽绵薄之力&#xff0c;希望能抛砖…

一、了解[mysql]索引底层结构和算法

目录 一、索引1.索引的本质2.mysql的索引结构 二、存储引擎1.MyISAM2.InnoDB3.为什么建议InnoDB表要建立主键并且推荐int类型自增&#xff1f;4.innodb的主键索引和非主键索引&#xff08;二级索引&#xff09;区别5.联合索引 一、索引 1.索引的本质 索引:帮助mysql高效获取数…

ClickHouse 存算分离改造:小红书自研云原生数据仓库实践

ClickHouse 作为业界性能最强大的 OLAP 系统&#xff0c;在小红书内部被广泛应用于广告、社区、直播和电商等多个业务领域。然而&#xff0c;原生 ClickHouse 的 MPP 架构在运维成本、弹性扩展和故障恢复方面存在较大局限性。为应对挑战&#xff0c;小红书数据流团队基于开源 C…

Vue + Element UI 前端篇(八):管理应用状态

使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的&#xff0c;但是因为组件封装的原因&#xff0c;隐藏按钮在头部组件&#xff0c;而导航菜单在导航菜单组件&#xff0c;这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改…

MT9700 80mΩ,可调快速响应限流配电开关芯片

MT9700 80mΩ&#xff0c;可调快速响应限流配电开关芯片 特征 符合USB规范 集成80mΩ电源MOSFET 低电源电流 15μA典型开启状态 1μA典型关闭状态 宽输入电压Range&#xff1a;2.4V到5.5V 快速瞬态响应&#xff1a;<2μs 反向电流流阻塞 热关机保护 热插件应…

JAVA 比较两个区间是否存在交集

最近遇到一个开发问题&#xff0c;判断两个价格的大小&#xff0c;听着很简单&#xff0c;但其实价格是浮动的&#xff0c;也就是说价格是一个范围&#xff0c;比如物品A的价格是5&#xff5e;10&#xff0c;现在我们通过筛选条件&#xff0c;把价格符合在8&#xff5e;20之前的…