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

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

    示例

    前端代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>演示AJAX同步和异步</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9.     window.onload=function (){
    10.         document.getElementById("btn1").onclick=function(){
    11.             var xhr=new XMLHttpRequest();
    12.             xhr.onreadystatechange=function(){
    13.                 if(this.readyState==4){
    14.                     if(this.status==200){
    15.                         document.getElementById("div1").innerHTML=this.responseText
    16.                     }else{
    17.                         alert("请求失败")
    18.                     }
    19.                 }
    20.             }
    21.             xhr.open("get","/ajax/test1",true)
    22.             xhr.send()
    23.         }
    24.  
    25.         document.getElementById("btn2").onclick=function(){
    26.             var xhr=new XMLHttpRequest();
    27.             xhr.onreadystatechange=function(){
    28.                 if(this.readyState==4){
    29.                     if(this.status==200){
    30.                         document.getElementById("div2").innerHTML=this.responseText
    31.                     }else{
    32.                         alert("请求失败")
    33.                     }
    34.                 }
    35.             }
    36.             xhr.open("get","/ajax/test2",false)
    37.             xhr.send()
    38.         }
    39.  
    40.     }
    41. </script>
    42.  
    43.  
    44. <button id="btn1">AJAX请求1</button>
    45. <div id="div1"></div>
    46. <button id="btn2">AJAX请求2</button>
    47. <div id="div2"></div>
    48. </body>
    49. </html>

    后端两个

    test1

    1. package com.web;
    2.  
    3. import javax.servlet.ServletException;
    4. import javax.servlet.annotation.WebServlet;
    5. import javax.servlet.http.HttpServlet;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9.  
    10. /**
    11.  * @author hrui
    12.  * @date 2023/9/4 10:34
    13.  */
    14. @WebServlet("/test1")
    15. public class AjaxRequestTest1 extends HttpServlet {
    16.  
    17.     @Override
    18.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    19.         try {
    20.             Thread.sleep(10000);
    21.         } catch (InterruptedException e) {
    22.             e.printStackTrace();
    23.         }
    24.         resp.setContentType("text/html;charset=utf-8");
    25.         resp.getWriter().print("AJAX请求1");
    26.     }
    27. }

    test2

    1. package com.web;
    2.  
    3. import javax.servlet.ServletException;
    4. import javax.servlet.annotation.WebServlet;
    5. import javax.servlet.http.HttpServlet;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9.  
    10. /**
    11.  * @author hrui
    12.  * @date 2023/9/4 10:34
    13.  */
    14. @WebServlet("/test2")
    15. public class AjaxRequestTest2 extends HttpServlet {
    16.     @Override
    17.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    18. //        try {
    19. //            Thread.sleep(10000);
    20. //        } catch (InterruptedException e) {
    21. //            e.printStackTrace();
    22. //        }
    23.         resp.setContentType("text/html;charset=utf-8");
    24.         resp.getWriter().print("AJAX请求2");
    25.     }
    26. }

    同步与异步的使用

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

  • 相关阅读:
    Python判断一个整数是否是回文数的三种方法
    怎么设计一个高质量的API接口
    JavaScript——创建对象的三种方法
    TI C2000系列TMS320F2837xD开发板（DSP+FPGA）硬件规格参数说明书
    分布式理论
    Linux 常用命令
    springboot医美容院预约管理系统java ssm
    【Spring笔记05】Spring的自动装配
    SC7A20（士兰微-加速度传感器）示例
    使用HTML实现一个静态页面（含源码）
  • 原文地址：https://blog.csdn.net/tiantiantbtb/article/details/132665311