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

这篇具有很好参考价值的文章主要介绍了AJAX学习笔记5同步与异步理解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

示例

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

前端代码

<!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");
    }
}

同步与异步的使用

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

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

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

AJAX学习笔记5同步与异步理解,ajax,学习,笔记文章来源地址https://www.toymoban.com/news/detail-703631.html

到了这里,关于AJAX学习笔记5同步与异步理解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ajax_4(进阶)同步异步+ 宏任务微任务 + Promise链 + async终极解决方案 +事件循环原理 + 综合案例

    01-同步代码和异步代码 什么是同步代码? 同步代码:逐行执行,需要原地等待结果后,才继续向下执行。 什么是异步代码? 调用后耗时,不阻塞代码继续执行,(不必原地等待),在将来完成后 触发一个 回调函数 。 代码阅读 目标:阅读并回答代码执行和打印的顺序 打印

    2024年02月13日
    浏览(48)
  • AJAX学习笔记6 JQuery对AJAX进行封装

    AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。  用JS发送AJAX请求回顾 响应结果一般是个字符串

    2024年02月09日
    浏览(37)
  • Ajax学习笔记

    目录 ​​​​​​​ 是什么 工作原理基于的关键技术 XMLHttpRequest对象 异步通信 数据格式 XMLHTTPRequest对象 功能 回调函数 onreadystatechange onload onerror ontimeout 函数 属性 写法 基本格式 完整格式 Ajax可以发起的不同请求 GET请求 POST请求 DELETE请求 PUT请求 jQuery封装后的写法 Ajax全称

    2024年04月27日
    浏览(28)
  • AJAX学习笔记3练习

    AJAX学习笔记2发送Post请求_biubiubiu0706的博客-CSDN博客 1.验证用户名是否可用 需求,用户输入用户名,失去焦点--onblur失去焦点事件,发送AJAX POST请求,验证用户名是否可用 新建表 前端页面 WEB-INF下新建lib包引入依赖,要用JDBC 后端代码 还可以在input获得焦点时候对span里面的数据清空

    2024年02月09日
    浏览(37)
  • Ajax学习笔记第二天

    喜欢的东西太贵了,我一咬牙,狠下心决定不喜欢了! 【 一.GET请求 】 【 1.1 URL即信息 】 我们知道php的相关运算都是在服务器端进行的,此时我们要考虑一个问题,如何将要计算的数字带给服务器?我们可以通过URL传递数据: ?xingming=ikunGGnianling=20xingbie=男 一个标准的URL网址

    2024年02月07日
    浏览(37)
  • Ajax学习笔记第4天

    做决定之前仔细考虑,一旦作了决定就要勇往直前、坚持到底! 【 1 模仿百度招聘 】 整个流程展示: 1.文件目录 2.页面效果展示及代码 data中的page1数据展示 2.1 主页 index.html :index里面代码部分解释 underscore.js :模板页面的相关代码 页面渲染 :jQuery框架 第1部分代码 :先获取

    2024年02月06日
    浏览(34)
  • Ajax学习笔记第三天

    做决定之前仔细考虑,一旦作了决定就要勇往直前、坚持到底! 【 1 ikunGG邮箱注册 】 整个流程展示: 1.文件目录 2.页面效果展示及代码 mysql数据库中的初始表 2.1 主页 09.html :里面代码部分解释 display: inline-block; 让块元素h1变成行内块元素,不然块级元素h1的宽度会撑满父元素

    2024年02月08日
    浏览(40)
  • AJAX学习笔记2发送Post请求

    AJAX学习笔记1发送Get请求_biubiubiu0706的博客-CSDN博客 继续 AJAX发送POST请求  无参数 测试 改回来   测试 AJAX POST请求   请求体中提交参数 测试 后端打断点 如何用AJAX模拟form表单post请求提交数据呢? 设置请求头必须在open之后,send之前 请求头里的设置好比form表单的enctype

    2024年02月10日
    浏览(43)
  • AJAX学习笔记1发送Get请求

    传统请求有哪些方式,及缺点 传统请求有哪些? 1.直接在浏览器地址栏上输入URL. 2.点击超连接. a href=\\\"/上下文/请求地址\\\"超链接请求/a  ----相对路径 a href=\\\"http://www.baidu.com\\\"超链接请求/a  ----绝对路径 3.提交form表单 form action=\\\"/上下文/请求地址\\\" method=\\\"post\\\" 4.使用JS代码 window.open(\\\"u

    2024年02月10日
    浏览(47)
  • 异步请求-AJAX

    什么是同步交互 首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后,按照预先编写好的程序中的业务逻辑进行处理,比如和数据库服务器进行数据信息交换。最后,服务器对请求进行响应,将结果返回给客户端,返回一个HTML在浏览器中显示,通常会有CSS样

    2024年02月06日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包