jQuery Ajax中参数async的设置问题

利用jquery ajax向后台传递参数相信大家都不陌生。在这个过程中有一个参数async表示是否异步，它是一个布尔值，可以取true或者false，那么这两者之间的区别在哪里？下面看一个demo：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>测试</title>
    <script src="lib/easyui/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            var text = [];
            $.ajax({
                url: 'ashx/TestHandler.ashx',
                type: 'post',
                dataType: 'text',
                async: true,
                success: function (data) {
                    text.push(data);
                }
            })
            alert('数组长度为：' + text.length);
        })
    </script>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication2.ashx
{
    /// <summary>
    /// TestHandler 的摘要说明
    /// </summary>
    public class TestHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            System.Threading.Thread.Sleep(3000);
            context.Response.Write("Hello World");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

后台代码会延时3秒，然后向前端返回一个字符串，此时将async设置为true，则结果如下图所示：
在这里插入图片描述
数组长度为什么会是0？这是因为async参数为true时，浏览器在发出ajax请求之后就会立即执行下面的代码，而不是等待ajax返回结果后再执行，此时就处于异步状态。与此相反，如果把async设置成false，结果如下图所示：
在这里插入图片描述
async设置为false表示同步，浏览器会在ajax返回结果之后再执行下面的代码，因此数组的长度是1。

HerryDong

发布了99 篇原创文章 · 获赞 16 · 访问量 3万+

私信关注

jQuery Ajax中参数async的设置问题

猜你喜欢