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秒

相关推荐
wdfk_prog6 小时前
[Linux]学习笔记系列 -- [kernel][time]alarmtimer
linux·笔记·学习
小志biubiu6 小时前
【Linux】Ext系列文件系统
linux·服务器·c语言·经验分享·笔记·ubuntu·操作系统
charlie1145141916 小时前
现代 Python 学习笔记:Statements & Syntax
笔记·python·学习·教程·基础·现代python·python3.13
ha20428941946 小时前
Linux操作系统学习之---基于环形队列的生产者消费者模型(毛坯版)
linux·c++·学习
dxnb226 小时前
Datawhale25年10月组队学习:math for AI+Task5解析几何
人工智能·学习
哲Zheᗜe༘7 小时前
了解学习Redis主从复制
数据库·redis·学习
井队Tell9 小时前
打造高清3D虚拟世界|零基础学习Unity HDRP高清渲染管线(第九天)
学习·3d·unity
FserSuN10 小时前
Mem0:构建具有可扩展长期记忆的生产级AI代理 - 论文学习总结1
人工智能·学习
im_AMBER10 小时前
Leetcode 41
笔记·学习·算法·leetcode
im_AMBER11 小时前
React 05
开发语言·前端·javascript·笔记·学习·react.js·前端框架