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秒

相关推荐
KoiHeng3 分钟前
操作系统简要知识
linux·笔记
巴伦是只猫1 小时前
【机器学习笔记Ⅰ】11 多项式回归
笔记·机器学习·回归
DKPT5 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
巴伦是只猫6 小时前
【机器学习笔记Ⅰ】13 正则化代价函数
人工智能·笔记·机器学习
好好研究7 小时前
学习栈和队列的插入和删除操作
数据结构·学习
新中地GIS开发老师8 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
SH11HF9 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Frank学习路上9 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
Chef_Chen10 小时前
从0开始学习计算机视觉--Day07--神经网络
神经网络·学习·计算机视觉
X_StarX12 小时前
【Unity笔记02】订阅事件-自动开门
笔记·学习·unity·游戏引擎·游戏开发·大学生