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

AJAX学习笔记4解决乱码问题_biubiubiu0706的博客-CSDN博客

示例

前端代码

复制代码
<!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秒

相关推荐
能不能别报错8 分钟前
K8s学习笔记(十九) K8s资源限制
笔记·学习·kubernetes
我登哥MVP41 分钟前
Ajax 详解
java·前端·ajax·javaweb
sulikey44 分钟前
【Linux权限机制深入理解】为何没有目录写权限仍能修改文件权限?
linux·运维·笔记·ubuntu·centos
十安_数学好题速析1 小时前
倍数关系:最多能选出多少个数
笔记·学习·高考
vue学习1 小时前
docker 学习dockerfile 构建 Nginx 镜像-部署 nginx 静态网
java·学习·docker
Hello_Embed1 小时前
STM32 环境监测项目笔记(一):DHT11 温湿度传感器原理与驱动实现
c语言·笔记·stm32·单片机·嵌入式软件
程序员大雄学编程3 小时前
「深度学习笔记4」深度学习优化算法完全指南:从梯度下降到Adam的实战详解
笔记·深度学习·算法·机器学习
新子y3 小时前
【小白笔记】PyTorch 和 Python 基础的这些问题
pytorch·笔记·python
Lynnxiaowen3 小时前
今天我们开始学习python语句和模块
linux·运维·开发语言·python·学习
rechol4 小时前
类与对象(中)笔记整理
java·javascript·笔记