开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十一天，点击查看活动详情
AJAX GET请求的缓存问题
-
对于低版本的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()
- 也可以随机数+时间戳....
AJAX POST请求
-
AJAX POST请求和GET请求的代码区别在哪里？就是前端代码有区别。后端代码没有区别。
// 4. 发送AJAX POST请求 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型。模拟form表单提交数据。 // 获取表单中的数据 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。 xhr.send("username="+username+"&password="+password) -
实现一个案例：使用AJAX POST请求实现用户注册的时候，用户名是否可用。（验证用户名是否可以注册）实现步骤如下：
-
在前端，用户输入用户名之后，失去焦点事件blur发生，然后发送AJAX POST请求，提交用户名
-
在后端，接收到用户名，连接数据库，根据用户名去表中搜索
-
如果用户名已存在
- 后端响应消息：对不起，用户名已存在（在前端页面以红色字体展示）
-
如果用户名不存在
- 后端响应消息：用户名可以使用（在前端页面以绿色字体展示）
-
-
实现一个案例：用户点击按钮之后，发送AJAX请求，显示学生列表。
- 在后端java程序中拼接HTML代码，然后将HTML代码直接响应到浏览器客户端。这种方式不好，不应该在java代码中编写HTML代码，能否在java程序中直接向前端响应数据？可以，可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析即可。
