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()

相关推荐
一米阳光86612 小时前
软考(中级)软件设计师核心笔记(3)数据库系统——概念、数据库设计
数据库·笔记·职场发展·软考·软件设计师
漏刻有时3 小时前
PHP GeoJSON转PNG地图渲染程序开发笔记、源码解读、问题复盘与整改方案
android·笔记·php
暗影凋落4 小时前
CMake构建学习笔记-SQLite库的构建
笔记·学习·sqlite
画面无声5 小时前
STM32的SPI通信原理与练习记录
c语言·stm32·单片机·嵌入式硬件·学习
zzm6286 小时前
精读KDD 2017最佳论文:通过类比挖掘加速创新 | 阅读笔记
笔记
你有哈莫吗6 小时前
CMake构建学习笔记-iconv库的构建
笔记·学习
ctlover7 小时前
Python学习第4日
学习
小弥儿8 小时前
GitHub今日热榜 | 2026-08-01:硬件安全工具与AI教育并行
人工智能·学习·开源·github
秋雨梧桐叶落莳8 小时前
计算器仿写总结
学习·macos·ios·objective-c·cocoa
统计学小王子9 小时前
《数学少年-从正负号到几何原本》(第一章:“刻度之上,零为分界“)--1.2 电梯与账单里的相反数字
学习·初中数学·初中数学科普·数学科普