AJAX学习笔记——发送Ajax的GET请求及GET请求的缓存问题-CSDN博客

本文链接：https://blog.csdn.net/weixin_62117675/article/details/127751393

AJAX get请求如何提交数据呢？
- get请求提交数据是在“请求行”上提交，格式是：url?name=value&name=value&name=value....
- 其实这个get请求提交数据的格式是HTTP协议中规定的，遵循协议即可。

前端html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送Ajax，请求</title>
</head>
<body>

<script type="text/javascript">
    window.onload = function (){
        document.getElementById("helloBtn").onclick = function () {
            //发送ajax请求
            //1、第一步，创建ajax核心对象XMLHttpServlet
            var xhr = new XMLHttpRequest();
            //2、第二步，注册回调函数
            //这是一个回调函数，这个函数在XMLHttpServlet对象的readyState状态值发生改变时被调用
            xhr.onreadystatechange = function () {
                //这个回调函数会被调用多次
               /*
                   0：请求未初始化
                   1：服务器连接已建立
                   2：请求已收到
                   3：正在处理请求
                   4：请求已完成且响应已就绪
               */
                //0->1
                //1->2
                //2->3
                //3->4
                console.log(xhr.readyState)
                //当XMLHttpServlet对象的readyState的状态码为4时，表示响应结束
                //这里this就相当于xhr
                if (this.readyState == 4){
                    //响应结束
                    console.log("响应结束！")
                    if (this.status == 404){//status是HTTP的响应状态码
                        alert("对不起，你访问的资源不存在。请检查请求路径")
                    } else if (this.status == 500){
                        alert("对不起，服务器发生了严重的内部错误！")
                    } else if (this.status == 200){
                        //200表示完全响应完毕，成功结束
                        //通过XMLHttpServlet对象获取响应信息
                        //this.responseText
                        //innerHTML可以将后面的内容当做一段HTML代码解析并执行
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }
                }
            }
            //3、第三步，开启通道(只是打开通道，建立连接。 并没有发送请求)
            // XMLHttpServlet对象的open方法
            // open(mothod,url,async,user,psw)
            // menthod : 请求方式，可以是get，或者post，或其他方法
            // url : 请求路径
            // async : 只能是true或false  true表示ajax是一个异步请求，false表示是一个同步请求（大部分ajax请求为异步）
            // user,psw : 用户名和密码,用于身份验证，要想访问服务器上的一些资源需要提供一些口令才能访问
            xhr.open("GET","/AjaxDemo/ajaxServlet01",true)
            //4、第四步、发送请求
            xhr.send()
        }
    }
</script>
<!--给一个按钮，点击发送ajax请求-->
<input type="button" value="hello ajax" id="helloBtn">
<!--给一个div图层，ajax接收响应的数据后，在div中渲染-->
<div id="mydiv"></div>
</body>
</html>

servlet代码：

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajaxServlet01")
public class ajaxServlet01 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //Servlet服务器向浏览器响应一段数据
        PrintWriter out = response.getWriter();
        //out向浏览器输出信息
        out.print("welcome to study ajax!");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

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()
- 也可以随机数+时间戳....