Ajax工作模式探讨

Ajax工作模式探讨-异步

举例示范ajax的异步
首先先写一个button按钮

<button id="asyncBtn">发送ajax请求</button>

然后编写ajax当点击按钮时，发送ajax请求

<script type="text/javascript">
    $(function () {
        $("#asyncBtn").click(function () {
            console.log("ajax函数之后");
           $.ajax({
               url:"test/ajax/async.html",
               type:"post",
               dataType:"text",
               success:function(response){
                   console.log("ajax函数内部的success"+response);
               }
           });
           console.log("ajax函数之后");
        });
    })
</script>

然后编写handler方法接收ajax请求，返回一个success字符串，我们让这个段处理逻辑睡两秒

@ResponseBody
    @RequestMapping("/test/ajax/async.html")
    public String testAsync() throws InterruptedException {
        Thread.sleep(2000);
        return "success";
    }

然后进行测试，点击按钮

查看console控制台

我们得出结论：我们的console.log("ajax函数之后");是在等待执行完$.ajax()方法后执行，但是它并不会等待$.ajax()方法中的success方法执行完之后执行

整个执行顺序图解：

这是因为执行$.ajax(）方法和它内部的success方法并不是同一个线程执行的，所以才有了异步的效果，同一个线程需要等待，但是不同线程不需要等待

Ajax工作模式探讨-同步

我们来演示ajax同步请求的效果

我们只需要在ajax的方法中加入一个属性async=false即可
这里一定要注意async属性的falsue是不加双引号的，因为在js中双引号中存在字符串则为true

$(function () {
        $("#asyncBtn").click(function () {
            console.log("ajax函数之后");
           $.ajax({
               url:"test/ajax/async.html",
               type:"post",
               dataType:"text",
               // 注意不要将false放到引号中，因为在js中引号中存在字符串则为true
               async:false,
               success:function(response){
                   console.log("ajax函数内部的success"+response);
               }
           });
               console.log("ajax函数之后");
        });
    })

后台代码还是不变

再次测试执行

点击按钮

发现这次使用的是统一线程，所以ajax函数之后的输出必须等待sucess方法执行完成才执行

图解说明