AJAX异步

同步/异步：

异步（ajax）：客户端发出请求之后立即就可以做别的操作，不用等服务器响应后再接着操作。

同步(普通)：客户端发出请求之后就不能在做别的操作了，必须等服务器响应后才可以接着操作。

同步（普通）

将之前创建的监听器和过滤器全部关闭，避免影响。
运行结果如下：

点击链接，可以看出“ 复选框 ”被重新刷新，回到“ 请选择 ”的选项。

代码如下：

TimeServlet：

package com.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.time.LocalDateTime;

@WebServlet(urlPatterns = "/TimeServlet")
public class TimeServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取服务器时间
        String localDateTime=LocalDateTime.now().toString();
        req.setAttribute("time","服务器:"+localDateTime);
        req.getRequestDispatcher("/time.jsp").forward(req,resp);
    }
}

time.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/7
  Time: 17:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <select>
        <option>请选择</option>
        <option>河南</option>
        <option>河北</option>
    </select>
    <a href="${pageContext.request.contextPath}/TimeServlet">获取服务器端的时间</a>
    <hr/>
    <div id="myDiv" style="width: 500px;height: 300px;border: 1px solid black">
        ${time}   <%-- ${time}为el代码块--%>
    </div>
</body>
</html>

异步（ajax）

代码如下：

TimeAjaxServlet :

package com.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.time.LocalDateTime;

@WebServlet(urlPatterns = "/TimeAjaxServlet")
public class TimeAjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //针对ajax请求做特定的处理
        String localDateTime= LocalDateTime.now().toString();
        resp.setContentType("text/html;charset=utf-8");
        //使用响应对象，直接将数据输出给浏览器（注意不是返回页面，只是返回数据），用于对ajax请求做响应
        PrintWriter out= resp.getWriter();
        out.println("服务器："+localDateTime);
        out.flush();
        out.close();
    }
}

timeAjax.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/7
  Time: 17:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <select>
        <option>请选择</option>
        <option>河南</option>
        <option>河北</option>
    </select>
    <a href="javascript:getTime()">获取服务器端的时间</a>
    <hr/>
    <div id="myDiv" style="width: 500px;height: 300px;border: 1px solid black">

    </div>

    <script type="text/javascript">
        //ajax请求和处理相应
        function getTime(){
            //alert(123);
            //定义js原生ajax对象
            var xhr=new XMLHttpRequest(); //XMLHttpRequest() 能够发送ajax请求的对象
            //打印初始状态
            alert("初始状态："+xhr.readyState);
            //配置ajax对象请求状态切换事件
            //readyState:ajax请求状态
            //change：状态变化的时候
            xhr.onreadystatechange=function (){
                //显示当前的请求状态
                alert(xhr.readyState);
                //xhr.readyState==4 表示ajax请求已经完成
                if(xhr.readyState==4 && xhr.status==200){
                    //xhr.responseText 服务器返回的内容
                    //获取服务器返回的内容
                    myDiv.innerHTML+=xhr.responseText+"</br>";
                }
            }
            //配置请求的方式和请求地址
            xhr.open("get","${pageContext.request.contextPath}/TimeAjaxServlet")
            //发送请求
            xhr.send();

            /*
            //绑定页面加载完成事件
            window.onload=function (){
                alert(123)
            }
             */
        }

    </script>


</body>
</html>