ajax的同步和异步有怎样的区别？ajax同步与异步的区别介绍

最新推荐文章于 2022-08-11 17:40:38 发布

Warriorkris0816

最新推荐文章于 2022-08-11 17:40:38 发布

阅读量1.5k

点赞数 2

分类专栏： Node.js

本文链接：https://blog.csdn.net/CKT0816/article/details/104795384

版权

Node.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

对于ajax我们应该知道ajax是主要用来在前端页面中向服务器后端请求数据，ajax中根据async的值不同分为**同步（async = false）和异步（async = true）**两种执行方式，那么，ajax的同步和异步请求两种方式有什么区别呢？本篇文章就来给大家详细分析一下ajax同步与异步执行的区别。
图解
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
    <input type="button" value="JS_Ajax" id="btn"> 
    <hr>
    <input>
    <script>
        
        
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            //1.获取XMLHttpRequest 对象
            var xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.建立连接
            //参数1 ：method：请求的类型；GET 或 POST
            //参数2 ：url：文件在服务器上的位置
            //参数3 ：async：true（异步）或 false（同步）
            //xmlhttp.open("POST","AjaxServlet",true);
            xmlhttp.open("GET", "AjaxServlet?lname=zzf", true);
            //3.发送请求 
            xmlhttp.send();
            //4.接收服务器的数据 xmlhttp.responseText;
            //onreadystatechange:   存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
            xmlhttp.onreadystatechange = function() {
                //存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                //readyState
                //0: 请求未初始化
                //1: 服务器连接已建立
                //2: 请求已接收
                //3: 请求处理中
                //4: 请求已完成，且响应已就绪

                //status
                //1XX - 5XX
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    alert(xmlhttp.responseText);
                }
            }
        }
    </script>

</body>
</html>

首先我们来分别看一下ajax同步与异步请求是什么？

ajax异步请求：

异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。一般默认值为true。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

比如：

$.ajax({  

     type:"POST", 

     url:"Venue.aspx?act=init", 

      dataType:"html", 

     success:function(result){  //function1()

       f1(); 

       f2();  

    } 

     failure:function (result) {  

      alert('Failed');  

     }, 

 } 

 function2();

说明：上述代码中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2()。

ajax同步请求：

同步请求即是当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于是排队，也就是说，当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个ajax执行完毕后才会继续运行其他代码页面解除假死状态（即当ajax返回数据后，才执行后面的function）。

比如：

$.ajax({  

     type:"POST", 

     url:"Venue.aspx?act=init", 

     dataType:"html", 

     async: false,    success:function(result){  //function1()

       f1(); 

       f2(); 

     } 

    failure:function (result) {  

      alert('Failed');  

     }, 

 } 

 function2();

说明：上述代码中，当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，直到function1()部分执行完毕。

看完了对于ajax同步与异步请求的意思后，我们就来看看ajax同步请求与异步请求的区别。

ajax同步请求与异步请求的区别：

异步模式下：
当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。

同步模式下：
当我们使用AJAX发送完请求后，后续还有代码需要执行，我们同样将服务器响应交由另一个JS函数去处理，但是这时的代码执行情况是：在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时，包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样，请求发出后就进入阻塞状态，知道接触阻塞余下的代码才会继续执行。

Warriorkris0816

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ajax的同步和异步有怎样的区别？ajax同步与异步的区别介绍

对于ajax我们应该知道ajax是主要用来在前端页面中向服务器后端请求数据，ajax中根据async的值不同分为**同步（async = false）和异步（async = true）**两种执行方式，那么，ajax的同步和异步请求两种方式有什么区别呢？本篇文章就来给大家详细分析一下ajax同步与异步执行的区别。首先我们来分别看一下ajax同步与异步请求是什么？ajax异步请求：异步请求就当...
复制链接

扫一扫