AJAX学习笔记5同步与异步理解

示例

前端代码

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示AJAX同步和异步</title>
</head>
<body>
<script type="text/javascript">
    window.onload=function (){
        document.getElementById("btn1").onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(this.readyState==4){
                    if(this.status==200){
                        document.getElementById("div1").innerHTML=this.responseText
                    }else{
                        alert("请求失败")
                    }
                }
            }
            xhr.open("get","/ajax/test1",true)
            xhr.send()
        }

        document.getElementById("btn2").onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(this.readyState==4){
                    if(this.status==200){
                        document.getElementById("div2").innerHTML=this.responseText
                    }else{
                        alert("请求失败")
                    }
                }
            }
            xhr.open("get","/ajax/test2",false)
            xhr.send()
        }

    }
</script>


<button id="btn1">AJAX请求1</button>
<div id="div1"></div>
<button id="btn2">AJAX请求2</button>
<div id="div2"></div>
</body>
</html>

后端两个

test1

复制代码

package com.web;

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;

/**
 * @author hrui
 * @date 2023/9/4 10:34
 */
@WebServlet("/test1")
public class AjaxRequestTest1 extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            Thread.sleep(10000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().print("AJAX请求1");
    }
}

test2

复制代码

package com.web;

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;

/**
 * @author hrui
 * @date 2023/9/4 10:34
 */
@WebServlet("/test2")
public class AjaxRequestTest2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        try {
//            Thread.sleep(10000);
//        } catch (InterruptedException e) {
//            e.printStackTrace();
//        }
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().print("AJAX请求2");
    }
}

同步与异步的使用

当第一个按钮改成同步后 test1里面睡10秒