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秒

相关推荐
逐花归海.12 分钟前
『 C++ 入门到放弃 』- 多态
开发语言·c++·笔记·程序人生
致***锌43 分钟前
期权交易完整版教程简介
笔记
棱镜研途1 小时前
学习笔记丨卷积神经网络(CNN):原理剖析与多领域Github应用
图像处理·笔记·学习·计算机视觉·cnn·卷积神经网络·信号处理
皮蛋sol周2 小时前
嵌入式学习C语言(八)二维数组及排序算法
c语言·学习·算法·排序算法
人生游戏牛马NPC1号2 小时前
学习 Flutter (一)
android·学习·flutter
嘉琪0012 小时前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
Aczone283 小时前
嵌入式 数据结构学习 (六) 树、哈希表与内核链表
数据结构·学习·算法
想成为大佬的每一天3 小时前
Linux驱动学习day22(interrupt子系统)
学习
Chef_Chen3 小时前
从0开始学习R语言--Day43--Wald检验
学习
真的想上岸啊3 小时前
学习C++、QT---21(QT中QFile库的QFile读取文件、写入文件的讲解)
c++·qt·学习