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.hqwc.cn/news/101253.html

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

相关文章

华为云API人脸识别服务FRS的感知力—偷偷藏不住的你

云服务、API、SDK&#xff0c;调试&#xff0c;查看&#xff0c;我都行 阅读短文您可以学习到&#xff1a;人工智能AI人脸的识别、检测、搜索、比对 1、IntelliJ IDEA 之API插件介绍 API插件支持 VS Code IDE、IntelliJ IDEA等平台、以及华为云自研 CodeArts IDE&#xff0c;…

2023高教社杯 国赛数学建模C题思路 - 蔬菜类商品的自动定价与补货决策

1 赛题 在生鲜商超中&#xff0c;一般蔬菜类商品的保鲜期都比较短&#xff0c;且品相随销售时间的增加而变差&#xff0c; 大部分品种如当日未售出&#xff0c;隔日就无法再售。因此&#xff0c; 商超通常会根据各商品的历史销售和需 求情况每天进行补货。 由于商超销售的蔬菜…

好用免费的Chat GPT(亲测有用)

1、MindLink麦灵 MindLink麦灵 点进登录后 普通用户可以提问100次 2、你问我答 你问我答 无限次数的。 3、灵感 灵感 点击链接后会提示你如何下载使用。 这个有win版和mac版&#xff0c;点击登陆后&#xff0c;每日都会有30次GPT3/3.5的提问。 4、WebTab 在浏览器插件中…

TS编译选项

自动监控编译 tsc xxx.ts -w 在一个文件夹下&#xff0c;创建 tsconfig.json 文件&#xff0c;在用命令 tsc 就可以自动编译当前文件夹下的ts文件 tsconfig.json文件配置如下&#xff1a; {/*tsconfig.json 是ts编译器的配置文件&#xff0c;ts编译器可以根据它的信息来对代…

记LGSVL本地编译记录

主要的编译参考来着官方文件 Unity安装 安装unity hub 安装2020.3.3f1在unity hub上 但是我发现没有2020.3.3f1&#xff0c;只有2020.3.3f1c1&#xff0c;其实c1就是中国版&#xff0c;没有什么影响 GIT安装 安装GIT安装Git LFS验证git-lfs(输出Git LFS initialized就&am…

草图大师SketchUp Pro 2023 for Mac

SketchUp Pro 2023 for Mac&#xff08;草图大师&#xff09;是一款专业的三维建模软件&#xff0c;由Trimble Inc.开发。它可以用于创建、修改和分享3D模型&#xff0c;包括建筑、家具、景观等。 SketchUp Pro 2023 for Mac提供了简单易学的用户界面和强大的工具集&#xff0…

idea的git入门

&#xff08;1&#xff09;安装好git之后&#xff0c;在idea的设置里面&#xff0c;按照下面三步&#xff0c;配置git &#xff08;2&#xff09;创建本地git仓库 选择本地仓库的根目录&#xff0c;点击ok &#xff08;3&#xff09;创建成功之后&#xff0c;会发现文件名称都变…

C. To Add or Not to Add

题目&#xff1a; 样例1&#xff1a; 输入 5 3 6 3 4 0 2输出 3 4 样例2&#xff1a; 输入 3 4 5 5 5输出 3 5 样例3&#xff1a; 输入 5 3 3 1 2 2 1输出 4 2 思路&#xff1a; 贪心题目&#xff0c;化分离数为块。这里要注意的是 需要进行的排序 以及操作的过程是什么样子…

前端,关于一个骚气的页面阅读定位图(菜单)

之前在网上看到一个特别骚气的页面阅读定位菜单&#xff0c;今天给大家分享一下原理&#xff0c;先看效果图&#xff1a; 这是我之前浏览联想官网上看到的一个效果图&#xff0c;觉得相当骚气。然后我把他的背景图扣下来&#xff0c;也做了一个&#xff0c;看看效果。 他的实现…

Goland2023版新UI的debug模式调试框按钮功能说明

一、背景 Jetbrains家的IDE的UI基本都是一样的&#xff0c;debug模式的调试框按钮排列也是一致的&#xff0c;但是在我使用Goland2023版的新UI时&#xff0c;发现调试框的按钮变化还是很大的&#xff0c;有一些按钮被收起来了&#xff0c;如果看之前的博客会发现有一些文中的旧…

JVM学习(五)--方法区

概念&#xff1a; 方法区就是存和类相关的东西&#xff0c;成员方法&#xff0c;方法参数&#xff0c;成员变量&#xff0c;构造方法&#xff0c;类加载器等&#xff0c;逻辑上存在于堆中&#xff0c;但是不同的虚拟机对它的实现不同&#xff0c;oracle的hotsport vm在1.6的时…

iOS脱壳之frida-ios-dump

frida-ios-dump介绍 该工具基于frida提供的强大功能通过注入js实现内存dump然后通过python自动拷贝到电脑生成ipa文件&#xff0c;适合现iOS11版本之后的越狱手机使用。 下载 https://github.com/AloneMonkey/frida-ios-dump环境安装 电脑环境安装 win和Mac 环境一样都是…